Group fields

The setting field type Group Fields

Arguments

Name	Type	Value	Description
type	string	group	The type of setting
name	string	{field_name}	The unique name will be used in template
label	string	(optional)	The label that appears above of the setting field.
description	string	(optional)	The description that appears above under of the setting field.
tooltip	string	(optional)	The long description that appears on the tooltip when hover on.
value	object	(optional)	The default value will be used for the first time.
options	object	(optional)	{ add_text: string (Custom text for add new), max: interge (Maximum item) }
params	object	(required)	List of fields in this group (support group level 2)
on	object	(optional)	Add listener events for setting field

Code example

section.lh

@schema
{
	"name"		: "Group Fields",
	"author"	: "LayoutHub",
	"website"	: "https://www.LayoutHub.com"
}
@endschema


<div class="sample-demo">

	@include('group')
	
</div>

settings.js

[   
    {
        name: 'group_1',
        label: 'Simple Group',
        type: 'group',
        value: [
	        {
		        text: 'Text 01',
	        }
        ],
        options: {
	    	add_text: 'Add new item'  
        },
        params: [
	        {
		        name: 'text',
		        type: 'text',
		        label: 'Text'
	        },
	        {
		        name: 'image',
		        type: 'image',
		        label: 'Image'
	        }
        ]
    },
    {
        name: 'group_2',
        label: 'Group in group',
        type: 'group',
        value: [
	        {
		        text: "Text 02",
		        group_inner: [
			        {
				        text: 'Text 03'
			        }
		        ]
	        }
        ],
        options: {
	    	add_text: 'Add new group'  
        },
        params: [
	        {
		        name: 'text',
		        type: 'text',
		        label: 'Text'
	        },
	        {
		        name: 'group_inner',
		        type: 'group',
		        label: 'Child group',
		        params: [
			         {
				        name: 'text',
				        type: 'text',
				        label: 'Text'
			        },
			        {
				        name: 'image',
				        type: 'image',
				        label: 'Image'
			        }
		        ]
	        }
        ]
    },
    {
        name: 'group_3',
        label: 'Group types',
        type: 'group',
        value: [
	        {
		        type: 'group_type_1',
		        settings: {
			        text: 'Text 03',
			        group_inner: [
				        {
					        text: 'Text 04'
				        },
				        {
					        text: 'Text 05'
				        }
			        ]
		        }
	        }
        ],
        options: {
	    	add_text: 'Add new group'  
        },
        params: [
	        {
		        type: 'group_type_1',
		        name: 'Group 01',
		        settings: [
		        {
			        name: 'text',
			        type: 'text',
			        label: 'Text'
		        },
		        {
			        name: 'group_inner',
			        type: 'group',
			        label: 'Child group',
			        params: [
				         {
					        name: 'text',
					        type: 'text',
					        label: 'Text'
				        },
				        {
					        name: 'image',
					        type: 'image',
					        label: 'Image'
				        }
			        ]
		        }]
		    },
		    {
		        type: 'group_type_2',
		        name: 'Group 02',
		        settings: [
		        {
			        name: 'text',
			        type: 'text',
			        label: 'Text'
		        },
		        {
			        name: 'group_inner',
			        type: 'image',
			        label: 'Select image'
		        }]
		    }
        ]
    }
]

includes/group.lh

<ul>
@for (section.settings.group_1 as grp)
	<li>
		<label>@print(grp.text)</label>
		@if (grp.image !== undefined && grp.image !== '')
		<img src="@attr(grp.image)" width="250" />
		@endif
	</li>
@endfor
</ul>
<p>@print(JSON.stringify(section.settings.group_2))</p>
<p>@print(JSON.stringify(section.settings.group_3))</p>

Download .ZIP

Download the sample file below and unzip in the developer direction. If you still have not activated developer mode, click here.

15KB

group.zip

archive

How it works

The Group field works in the editor