Group Field Join KC discussion

The parameter Group contains multiple parameters. Within a group, you can create, double, sort or remove multiple parameters. For example: In the Progress Bar Element , you can see the Options parameter - It belongs to Type group. The group parameter's appearance: KingComposer group fields

Map Instruction:


array(
	'type'			=> 'group',
	'label'			=> __('Options', 'kingcomposer'),
	'name'			=> 'options',
	'description'	=> '',
	'options'		=> array('add_text' => __('Add new group', 'kingcomposer')),
	// default values when create new group
	'value' => base64_encode( json_encode( array(
		"1" => array(
			"param1" => "default value 1 of group 1",
			"param2" => "default value 2 of group 1"
		),
		"2" => array(
			"param1" => "default value 3 of group 2",
			"param1" => "default value 4 of group 2"
		)
	))),

	// you can use all param type to register child params
	'params' => array(
		array(
			'type' => 'text',
			'label' => 'Param 1',
			'name' => 'param1',
			'description' => 'param1',
			'admin_label' => true,
		),
		array(
			'type' => 'text',
			'label' => 'Param 2',
			'name' => 'param2',
			'description' => 'param2',
			'admin_label' => true,
		)
	)
)

Example:

'myelement' => array(

	'name' => __('My Element', 'KingComposer'),
	'description' => __('', 'KingComposer'),
	'icon' => 'kc-icon-progress',
	'category' => 'Content',
	'css_box' => true,
	'params' => array(

		array(
			'type'			=> 'text',
			'label'			=> __( 'Title', 'KingComposer' ),
			'name'			=> 'title',
			'description'	=> __( 'This is text title. Leave blank if no title is needed.', 'KingComposer' ),
			'admin_label'	=> true,
		),
		array(
			'type'			=> 'dropdown',
			'label'			=> __( 'Style', 'KingComposer' ),
			'name'			=> 'style',
			'description'	=> __( 'Select style for progress bars', 'KingComposer' ),
			'options'		=> array(
				'1' => __('Style 1', 'KingComposer'),
				'2' => __('Style 2', 'KingComposer'),
				'3' => __('Style 3', 'KingComposer'),
				'4' => __('Style 4', 'KingComposer'),
			),
			'admin_label'	=> true,
		),
		array(
			'type'			=> 'group',
			'label'			=> __('Options', 'KingComposer'),
			'name'			=> 'options',
			'description'	=> __( 'Repeat this fields with each item created, Each item corresponding processbar element.', 'KingComposer' ),
			'options'		=> array('add_text' => __('Add new progress bar', 'kingcomposer')),
			'value' => base64_encode( json_encode(array(
				"1" => array(
					"value" => "90",
					"label" => "Development"
				),
				"2" => array(
					"value" => "80",
					"label" => "Design"
				),
				"3" => array(
					"value" => "70",
					"label" => "Marketing"
				)
			) ) ),
			'params' => array(
				array(
					'type' => 'text',
					'label' => __( 'Value', 'KingComposer' ),
					'name' => 'value',
					'description' => __( 'Enter value of bar.', 'KingComposer' ),
					'admin_label' => true,
				),
				array(
					'type' => 'text',
					'label' => __( 'Label', 'KingComposer' ),
					'name' => 'label',
					'description' => __( 'Enter text used as title of bar.', 'KingComposer' ),
					'admin_label' => true,
				),
				array(
					'type' => 'color_picker',
					'label' => __( 'Label Color', 'KingComposer' ),
					'name' => 'label_color',
					'description' => __( 'Label text color', 'KingComposer' ),
				),
				array(
					'type' => 'color_picker',
					'label' => __( 'Progressbar Color', 'KingComposer' ),
					'name' => 'prob_color',
					'description' => __( 'Custom progress bar color.', 'KingComposer' ),
				),
				array(
					'type' => 'color_picker',
					'label' => __( 'Progressbar Background Color', 'KingComposer' ),
					'name' => 'prob_bg_color',
					'description' => __( 'Custom progress Background bar color.', 'KingComposer' ),
				),
			),
		),
		array(
			'type'			=> 'checkbox',
			'label'			=> __( 'Processbar Animate', 'KingComposer' ),
			'name'			=> 'progress_animate',
			'description'	=> __( 'Animate effect if checked', 'KingComposer' ),
			'options'			=> array( 'yes' => __( 'Yes, Please!', 'KingComposer' ) ),
			'value' 			=> 'yes'
		),
		array(
			'type'			=> 'text',
			'label'			=> __( 'Processbar Weight', 'KingComposer' ),
			'name'			=> 'weight',
			'description'	=> __( 'Height weight of progress bar: Ex 12, unit (px)', 'KingComposer' ),
			'value'			=> '12'
		),
		array(
			'type'			=> 'text',
			'label'			=> __( 'Wrapper class name', 'KingComposer' ),
			'name'			=> 'wrap_class',
			'description'	=> __( 'Custom class for wrapper of shortcode widget', 'KingComposer' ),
		)
	)

)

Output:

//1. In case using template ( your element's name is "myelement" and corresponding template is
// wp-content/themes/twentysixteen/kingcomposer/myelement.php )

 $item ){
    //loop over each item
    echo $item->label;
    echo $item->label_color;
    // etc..
  }

?>

//2. In case creating shortcode via WP function add_shortcode();

 $item ){
    //loop over each item
    echo $item->label;
    echo $item->label_color;
    // etc..
  }

}

?>

Relation in child fields of Group Field:

   'relation' => array(){
      'parent' => {group-field-name}+'-'+{child-field-name},
      'show_when' => {value_of_parent}
      //'hide_when' => {value_of_parent} 
      // Use only one show_when or hide_when
   }

Example relation group fields:

'myelement' => array(

	'name' => __('My Element', 'KingComposer'),

	'params' => array(
		array(
			'type'			=> 'group',
			'label'			=> __('Group Field', 'KingComposer'),
			'name'			=> 'gfname',
			'description'	=> '',
			'options'		=> array('add_text' => __('Add new progress bar', 'kingcomposer')),
			'value' => base64_encode( json_encode(array(
				"1" => array(
					"value" => "90",
					"label" => "Development"
				),
				"2" => array(
					"value" => "80",
					"label" => "Design"
				),
				"3" => array(
					"value" => "70",
					"label" => "Marketing"
				)
			) ) ),
			'params' => array(
				array(
					'type' => 'select',
					'label' => __( 'Child Field', 'KingComposer' ),
					'name' => 'child',
					'options' => array(
					   'value1' => 'Value One',
					   'value2' => Value Two
					)
				),
				array(
					'type' => 'text',
					'label' => __( 'Label', 'KingComposer' ),
					'name' => 'label',
					'relation' => array(
					   'parent' => 'gfname-child',
					   'show_when' => 'value1'
					)
				),
			),
		)
	)

)
Having trouble with map adding? Please read more about Add Map.