[function] Group fields in block

Discussions related to customizing hooks. Hooks are documented at http://bigprof.com/appgini/help/advanced-topics/hooks/
Post Reply
DevGiu
AppGini Super Hero
AppGini Super Hero
Posts: 151
Joined: 2016-05-27 09:08

[function] Group fields in block

Post by DevGiu » 2016-08-07 11:23

Based on the code of _mktabbed from Grimblefritz I created a function to group fields on blocks.

Function is

Code: Select all

function kogroups_html($table, &$groups, $after = '') {
	ob_start(); ?>
		<?php
			foreach ($groups as $group => $groupinfo) {
				$style = (isset($groupinfo['style']) ? $groupinfo['style'] : 'horizontal');
				echo "<div id='{$group}-holder' class=\"panel panel-default form-group form-{$style}\">";
				if (!empty($groupinfo['name'])) {
					echo "<div class='panel-heading'>{$groupinfo[name]}</div>";
				}

				echo "<div id='{$group}' class=\"panel-body\">";
				echo "</div>";
				echo "</div>";
			}
		?>
	<script>
		$j(function(){
		<?php
			foreach ($groups as $group => $groupinfo) {
				if (isset($groupinfo['position_after'])){
					echo "\$j('#{$groupinfo['position_after']}').parents('.form-group').after(\$j('#{$group}-holder'));\n";
				} else {
					echo "\$j('fieldset').prepend(\$j('#{$group}-holder'));\n";
				}

				foreach ($groupinfo['fields'] as $groupfield) {
					echo "\$j('#{$groupfield}').parents('.form-group').appendTo('#{$group}');\n";
			 	}
			}
		?>
		})
	</script>
	<?php
	$html = ob_get_contents();
	ob_end_clean();
	return $html;

}

How it works?
Create a php file, called for example mylib.php inside your hooks folder.
In your __global.php do require('mylib.php');
Now, in your table hooks file, inside your table_dv hook you can do:

Code: Select all

//put the fields you want in a group into an array
		$firstgroup_fields = array(
			'referencia',
			'contador',
			'estado_documento',
			'totalDocumento'
		);

		$secondgroup_fields = array(
			'fechaDocumento',
			'entidad_id',
			'serie_id',
			'direccionEntidad_id'
		);


		/* 
		You have to build an assoc array. First dimension is the id of the group. Second dimension is the params.
		In params you can use:
			['name'] = Specify the header of the group. If you don't specify, block will not have header named.
  			['fields'] = array with the fields you want inside this group
			['style'] = If not specified block will be form-horizontal. You can use 'inline' here. I'm working on a way to specifiy number of fields. Not yet.
  			['position_after']  = If provided, your block will be rendred after the field you specify here. If not provided,  block will be positioned at start
		*/
		$groups['firstgroup']['name'] = '';
		$groups['firstgroup']['fields'] = $firstgroup_fields;
		$groups['firstgroup']['style'] = 'inline';

		$groups['secondgroup']['name'] = 'Another group';
		$groups['secondgroup']['fields'] = $secondgroup_fields;
		$groups['secondgroup']['position_after'] = 'firstgroup';

		$groups['otro']['name'] = 'Another one';
		$groups['otro']['fields'] = array('comercial_id');
		$groups['otro']['position_after'] = 'condicionDePago_id';

		// Attach the function to HTML as always, being first param the table, and second the array with group/s
		$html .= kogroups_html('cab_fac_s', $groups);
/Giuseppe
Professional Outsourcing Services

DevGiu
AppGini Super Hero
AppGini Super Hero
Posts: 151
Joined: 2016-05-27 09:08

Re: [function] Group fields in block

Post by DevGiu » 2016-08-07 11:24

Showing the final result:
Selección_038.png
Selección_038.png (34.38 KiB) Viewed 8527 times
/Giuseppe
Professional Outsourcing Services

grimblefritz
AppGini Super Hero
AppGini Super Hero
Posts: 336
Joined: 2015-12-23 16:52

Re: [function] Group fields in block

Post by grimblefritz » 2016-08-07 12:14

Looks like a good approach if you want a vertical layout, but with some visual separation. Nice work.

Next, why not make the block headings active? So when clicked they expand/collapse the block - and allow the initial state to be specified in your array.

Code is never "done" :)

DevGiu
AppGini Super Hero
AppGini Super Hero
Posts: 151
Joined: 2016-05-27 09:08

Re: [function] Group fields in block

Post by DevGiu » 2016-08-07 12:20

And is not done :) its a first "release" just working. I would like to add the possibility to specify how much fields wants in each row and blocks me below other.

I will take into consideration about collapsing blocks. Could be interesting
/Giuseppe
Professional Outsourcing Services

grimblefritz
AppGini Super Hero
AppGini Super Hero
Posts: 336
Joined: 2015-12-23 16:52

Re: [function] Group fields in block

Post by grimblefritz » 2016-08-07 13:31

I can see blocks with an initial state of collapsed as being very useful in a mobile application. Large numbers of tabs on a smartphone can be cumbersome. Vertical blocks would be better.

And you know I have to ask...

What about tabs inside blocks, or blocks inside tabs?

:lol:

DevGiu
AppGini Super Hero
AppGini Super Hero
Posts: 151
Joined: 2016-05-27 09:08

Re: [function] Group fields in block

Post by DevGiu » 2016-08-07 14:57

I can't edit my own post? :(

Ok

TODO
- When style set to inline, a way to specify number of columns we want in the block

Changelog version 0.2:
- You can set behaviour of collapsable blocks

Code: Select all

$groups['groupname']['collapse'] = 0; // 0 = not collapsable; 1= Collapsable an open default; 2=Collapsable and closed default
- If block is collapsable shows a glyph representing the state.
- You can specfy another element of the DOM by his ID preceding with a #, to be moved to the block. In this sample, moving the Tabs from _mktabbed lib :D

Code: Select all

$secondgroup_fields = array(
			'fechaDocumento',
			'entidad_id',
			'serie_id',
			'direccionEntidad_id',
			'#form-tabs'
		);
version 0.2 code

Code: Select all

function kogroups_html($table, &$groups, $after = '') {
	ob_start(); ?>
		<?php
			foreach ($groups as $group => $groupinfo) {
				$style = (isset($groupinfo['style']) ? $groupinfo['style'] : 'horizontal');
				echo "<div id='{$group}-holder' class=\"panel panel-default form-group form-{$style}\">";
				if (!empty($groupinfo['name'])) {

					$collapseicon = '';
					$collapse_default_open_class = '';
					$collapse_data_toggle = ($groupinfo['collapse']==0 ? '' : "data-toggle='collapse'");

					if (isset($groupinfo['collapse']) && $groupinfo['collapse'] == 1){
						$collapseicon = "<span class='{$group}-collapse-icon glyphicon glyphicon-chevron-up'></span>";
						$collapse_default_open_class = 'collapse in';
					} else if (isset($groupinfo['collapse']) && $groupinfo['collapse'] == 2) {
						$collapseicon = "<span class='{$group}-collapse-icon glyphicon glyphicon-chevron-down'></span>";
						$collapse_default_open_class = 'collapse';
					}

					if (isset($groupinfo['collapse']) && $groupinfo['collapse'] > 0){
						$paneltitle = "<a {$collapse_data_toggle} href='#{$group}'>{$groupinfo[name]}</a>";
					} else {
						$paneltitle = "{$groupinfo[name]}";
					}

					echo "<div class='panel-heading'>{$collapseicon}{$paneltitle}</div>";
				}

				echo "<div id='{$group}' class='panel-body {$collapse_default_open_class}'>";
				echo "</div>";
				echo "</div>";
			}
		?>
	<script>
		$j(function(){
		<?php
			foreach ($groups as $group => $groupinfo) {
				if (!empty($groupinfo['name'])) {
					echo "\$j('#{$group}').on('shown.bs.collapse', function() {
	   						 \$j('.{$group}-collapse-icon').addClass('glyphicon-chevron-up').removeClass('glyphicon-chevron-down');
	  						});\n";

					echo "\$j('#{$group}').on('hidden.bs.collapse', function() {
   							 \$j('.{$group}-collapse-icon').addClass('glyphicon-chevron-down').removeClass('glyphicon-chevron-up');
  							});\n";
				}
				if (isset($groupinfo['position_after'])){
					echo "\$j('#{$groupinfo['position_after']}').parents('.form-group').after(\$j('#{$group}-holder'));\n";
				} else {
					echo "\$j('fieldset').prepend(\$j('#{$group}-holder'));\n";
				}

				foreach ($groupinfo['fields'] as $groupfield) {
					if ($groupfield[0] != '#') {
						echo "\$j('#{$groupfield}').parents('.form-group').appendTo('#{$group}');\n";
					} else {
						echo "\$j('{$groupfield}').appendTo('#{$group}');\n";
					}

			 	}
			}
		?>
		})
	</script>
	<?php
	$html = ob_get_contents();
	ob_end_clean();
	return $html;

}
/Giuseppe
Professional Outsourcing Services

grimblefritz
AppGini Super Hero
AppGini Super Hero
Posts: 336
Joined: 2015-12-23 16:52

Re: [function] Group fields in block

Post by grimblefritz » 2016-08-07 15:14

This example might help with the number of columns and also handle small displays. (From one of the Udemy examples.) You'll need to sort out how to work it into your code.


width controls number of columns. For example, 48% would give 2, 33% gives 3, 24% gives 4, etc.

margin-bottom opens up vertical space between fields.

vertical-align makes fields group across columns, so you get 1 field per column per row.

@media applies the style only to displays >= 768px

Code: Select all

<script>
	$j(function(){
		$j('fieldset.form-horizontal').removeClass('form-horizontal').addClass('form-inline');
	})
</script>

<style>
	@media (min-width: 768px){
		.form-inline .form-group{
			width: 48%;
			margin-bottom: 0.75em;
			vertical-align: top;
		}
	}
</style>

DevGiu
AppGini Super Hero
AppGini Super Hero
Posts: 151
Joined: 2016-05-27 09:08

Re: [function] Group fields in block

Post by DevGiu » 2016-08-07 15:26

Some comment about this function? Works as you wish?

Yes, this is the approach probably I will follow, but it did me strange things with 4 columns when I tried it. For this reason I need more testing.
/Giuseppe
Professional Outsourcing Services

DevGiu
AppGini Super Hero
AppGini Super Hero
Posts: 151
Joined: 2016-05-27 09:08

Re: [function] Group fields in block

Post by DevGiu » 2016-08-07 16:39

This is the problem I totally don't understand.
Following this pattern it looks this way. Why is not using extra space? (red box)
Selección_035.png
Selección_035.png (31.37 KiB) Viewed 8483 times
/Giuseppe
Professional Outsourcing Services

DevGiu
AppGini Super Hero
AppGini Super Hero
Posts: 151
Joined: 2016-05-27 09:08

Re: [function] Group fields in block

Post by DevGiu » 2016-08-07 16:41

v0.3 changelog:
- Bugs

v0.3 code

Code: Select all

function kogroups_html($table, &$groups, $after = '') {
	ob_start(); ?>
		<?php
			foreach ($groups as $group => $groupinfo) {
				$style = (isset($groupinfo['style']) ? $groupinfo['style'] : 'horizontal');
				$blockcolumns = (isset($groupinfo['style']['columns']) ? $groupinfo['style']['columns'] : 1);

				echo "<div id='{$group}-holder' class=\"panel panel-default\">";
				if (!empty($groupinfo['name'])) {

					$collapseicon = '';
					$collapse_default_open_class = '';
					$collapse_data_toggle = ($groupinfo['collapse']==0 ? '' : "data-toggle='collapse'");

					if (isset($groupinfo['collapse']) && $groupinfo['collapse'] == 1){
						$collapseicon = "<span class='{$group}-collapse-icon glyphicon glyphicon-chevron-up'></span>";
						$collapse_default_open_class = 'collapse in';
					} else if (isset($groupinfo['collapse']) && $groupinfo['collapse'] == 2) {
						$collapseicon = "<span class='{$group}-collapse-icon glyphicon glyphicon-chevron-down'></span>";
						$collapse_default_open_class = 'collapse';
					}

					if (isset($groupinfo['collapse']) && $groupinfo['collapse'] > 0){
						$paneltitle = "<a {$collapse_data_toggle} href='#{$group}-content'>{$groupinfo[name]}</a>";
					} else {
						$paneltitle = "{$groupinfo[name]}";
					}

					echo "<div class='panel-heading'>{$collapseicon}{$paneltitle}</div>";
				}

				echo "<div id='{$group}-content' class='panel-body {$collapse_default_open_class}'>";
				echo "<fieldset id='{$group}' class='form-horizontal'></div>";
				echo "</div>";
				echo "</div>";
			}
		?>
	<script>
		$j(function(){
		<?php
			foreach ($groups as $group => $groupinfo) {
				if ($style != 'horizontal') {

				}
				if (!empty($groupinfo['name'])) {
					echo "\$j('#{$group}-content').on('shown.bs.collapse', function() {
	   						 \$j('.{$group}-collapse-icon').addClass('glyphicon-chevron-up').removeClass('glyphicon-chevron-down');
	  						});\n";

					echo "\$j('#{$group}-content').on('hidden.bs.collapse', function() {
   							 \$j('.{$group}-collapse-icon').addClass('glyphicon-chevron-down').removeClass('glyphicon-chevron-up');
  							});\n";
				}
				if (isset($groupinfo['position_after'])){
					if ($groupinfo['position_after'][0] != '#') {
						echo "\$j('#{$groupinfo['position_after']}').parents('.form-group').after(\$j('#{$group}-holder'));\n";
					} else {
						echo "\$j('{$groupinfo['position_after']}-holder').after(\$j('#{$group}-holder'));\n";
					}

				} else {
					echo "\$j('fieldset:first').prepend(\$j('#{$group}-holder'));\n";
				}

				foreach ($groupinfo['fields'] as $groupfield) {
					if ($groupfield[0] != '#') {
						echo "\$j('#{$groupfield}').parents('.form-group').appendTo('#{$group}');\n";
					} else {
						echo "\$j('{$groupfield}').appendTo('#{$group}');\n";
					}

			 	}
			}
		?>
		})
	</script>
	<?php
	$html = ob_get_contents();
	ob_end_clean();
	return $html;

}
/Giuseppe
Professional Outsourcing Services

DevGiu
AppGini Super Hero
AppGini Super Hero
Posts: 151
Joined: 2016-05-27 09:08

Re: [function] Group fields in block

Post by DevGiu » 2016-09-26 08:19

Now, library can "inject" groups inside tabs.

Code: Select all

$groups['mygroup']['insidetab'] = 'mytab';
screenshot_002.png
screenshot_002.png (23.65 KiB) Viewed 8358 times
I modified grimblefritz tabs lib, to understand "aliases", and you can "inject" a group of tabs inside a block by his alias this way.

Code: Select all

// Creation of tab
$html .= mktabbed_html('cab_fac_s', $tabs, 'mytabalias');
$html .= mktabbed_html('cab_fac_s', $tabs2, 'mytabalias2');
.
.
.
.
$arrayoffieldsforgroup = array(
			'baseImponible1',
			'cuotaImpuesto1',
			'cuotaRecargo1',
			'baseImponible2',
			'cuotaImpuesto2',
			'cuotaRecargo2',
			'baseImponible3',
			'cuotaImpuesto3',
			'cuotaRecargo3',
			'baseImponible4',
			'cuotaImpuesto4',
			'cuotaRecargo4',
			'##mytabalias2', // this is a group of tabs
		);

$groups['totales']['name'] = '';
$groups['totales']['rows']['fields'] = array($arrayoffieldsforgroup);
$groups['totales']['rows']['columns'] = array(4);
$groups['totales']['insidetab'] = 'mytabalias';


$html .= kogroups_html('cab_fac_s', $groups);

/Giuseppe
Professional Outsourcing Services

grimblefritz
AppGini Super Hero
AppGini Super Hero
Posts: 336
Joined: 2015-12-23 16:52

Re: [function] Group fields in block

Post by grimblefritz » 2016-09-26 12:22

Very interesting. I would not have considered combining the two, but I see it could be a useful effect.

Maybe we should consider combining the libraries into one?

DevGiu
AppGini Super Hero
AppGini Super Hero
Posts: 151
Joined: 2016-05-27 09:08

Re: [function] Group fields in block

Post by DevGiu » 2016-09-26 15:50

grimblefritz wrote:Very interesting. I would not have considered combining the two, but I see it could be a useful effect.

Maybe we should consider combining the libraries into one?
I think so, I just need some time to translate comments to english and clean a little of garbage :D

Add me to skype if you want.
/Giuseppe
Professional Outsourcing Services

Post Reply