Every addon has some settings specific to its features. In the admin.php file, we specify the fields/features that an addon will have.

Basic Addon Configuration Syntax

For every addon, we need to lay out some basic information like the type, name, title, description, etc.

SpAddonsConfig::addonConfig([
	'type'       => 'addon_type',
	'addon_name' => 'your_addon_unique_name',
	'title'      => 'Your Addon Title',
	'desc'       => 'Some description of your addon.',
	'category'   => 'Addon Category',
	'icon'       => '<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">...</svg>',
	'settings' => []
]);

Properties

type (required)

The `type` property specifies the type of addon. 
Replace `addon_type` with the appropriate addon type, such as `content`, `repeatable`, 

addon_name (required)

The `addon_name` property represents the name of your addon. 
Replace `your_addon_unique_name` with a unique name for your addon. 

title (required)

The `title` property refers to the title that will be displayed in the addon list. 
Replace `Your Addon Title` with the desired title of your addon. 

desc (optional)

Replace `Some description of your addon` with an appropriate description for your addon. This is optional. 

category (required)

The `Category` property refers to the group under which your addon will be listed. 
Replace `Addon Category` with the desired category name.

icon (required)

Could be a SVG markup or image URL. We recommend SVG markup. 

settings (required)

All the addon specific settings must be put inside this associative array. You have to follow the exact settings structure.

We will discussing the basic addon settings structure in the next section.

Settings Syntax

In SP Page Builder 5, The settings property holds all the addon settings fields, grouped into different sections.

The basic structure is as follows:

'settings' => [
	'unique_group_name' => [
		'title' => 'The group title',
		'depends' => [['some_other_field', '=', 'some_value']],
		'fields' => [
			'field_property_name' => [
				'type' 	=> 'text',
				'title' => 'Field title',
				'desc' => 'Field description',
				'std'  	=> 'Default value of the field.',
				'responsive' => true
			],
			...other fields
		]
	],
	...other groups
]

• You must have to put your settings to a specific settings group. The group name must be unique as per addon.
• Each group should have the following 3 fields:
  • title - The group title. This title will be displayed in the group card header.
  • depends - (Optional) Defines any dependencies for the group based on the value of another field. If you want to show or hide your group by any other field's specific value then write the condition here.
  • fields - Contains an associative array of individual settings fields within the group.
    • We have roughly 37 setting field types.
    • The field types are -
      • hidden,
      • text,
      • gmap,
      • select,
      • category,
      • accesslevel,
      • animation,
      • alert,
      • alignment,
      • headings,
      • link,
      • color,
      • advancedcolor,
      • textarea,
      • separator,
      • number,
      • module,
      • checkbox,
      • radio,
      • advancedradio,
      • icon,
      • editor,
      • media,
      • padding,
      • margin,
      • boxshadow,
      • slider,
      • advancedslider,
      • fontstyle,
      • fonts,
      • typography,
      • codeeditor,
      • gradient,
      • buttons,
      • thumbnail,
      • timeline,
      • repeatable,
    • All the fields has its common properties. The common properties are
      • type - The field type. One of the 37 types described before.
      • title - The field title.
      • desc - Field description.
      • std - Field default value.
      • responsive - Set to true if you want the field to have responsive values, otherwise false.
    • Repeatable fields
      • We have a special field type repeatable. This field could contain other fields inside of it.
      • The structure of a repeatable field follows a similar pattern to regular fields but you need to set the field type to repeatable and add the attr property. Here's an example of a repeatable field structure:

      •   'repeatable_items' => [
          	'title' => Text::_('COM_SPPAGEBUILDER_ADDON_JS_SLIDER_ITEMS'),
          	'type'  => 'repeatable',
          	'std'   => [],
          	'attr' => [
          		'item_group_name' => [
          			'title' => 'Group Title',
          			'fields' => [
          				'field_name' => [
          					'type'  => 'text',
          					'title' => 'Field title',
          					'std'   => 'some default value',
          				],
          				...other fields
          			]
          		],
          		...other groups
          	]
          ]
        

      • The attr property contains the nested field groups within the repeatable field. If your look carefully, you will notice that inside the attr property the structure is similar as the normal fields groups.
      - Note: For repeatable fields, you need to add the `_items` suffix to the field name. You can see that we've used the field name `repeatable_items`, here the `_items` suffix is important.