Tabs
A <tab>
-Tag references to either an existing or a new tab in the system configuration.
Tab attribute reference
A <tab>
-Tag can have the following attributes:
Attribute | Description | Type | Required |
---|---|---|---|
id | Defines the identifier that is used referencing the section. | typeId | required |
translate | Defines the field that should be translatable. Provide label to make the label translatable. | string | optional |
sortOrder | Defines the sort order of the section. High numbers push the section to the bottom of the page; low numbers push the section to the top. | float | optional |
class | Adds a defined CSS class to the rendered tab HTML element. | string | optional |
Tab node reference
A <tab>
-Tag can have the following child:
Node | Description | Type |
---|---|---|
label | Defines the label that is displayed in the frontend. | string |
Example: Create a tab
The following code snippet demonstrates the creation of a new tab with example data.
<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
<system>
<tab id="A_UNIQUE_ID" translate="label" class="a-custom-css-class-to-style-this-tab" sortOrder="10">
<label>A meaningful label</label>
</tab>
</system>
</config>
The snippet above creates a new tab with the identifier A_UNIQUE_ID
. As the translate
-attribute is defined and references the label, the label
-node is translatable. During the rendering process, the CSS class a-custom-css-class-to-style-this-tab
will be applied on the HTML element that was created for this tab.
The sortOrder
-attribute with the value of 10
defines the position of the tab in the list of all tabs when rendered.
Sections
A <section>
-Tag references to either an existing or a new section in the system configuration.
Section attribute reference
A <section>
-Tag can have the following attributes:
Attribute | Description | Type | Required |
---|---|---|---|
id | Defines the identifier that is used referencing the section. | typeId | required |
translate | Defines the field that should be translatable. Provide label to make the label translatable. | string | optional |
type | Defines the input type of the rendered HTML element. Defaults to text . | string | optional |
sortOrder | Defines the sort order of the section. High numbers will push the section to the bottom of the page; low numbers will push the section to the top. | float | optional |
showInDefault | Defines whether the section is shown in the default configuration scope. Specify 1 to show the section and 0 to hide the section. | int | optional |
showInStore | Defines whether the section is shown on store level. Specify 1 to show the section and 0 to hide the section. | int | optional |
showInWebsite | Defines whether the section is shown on website level. Specify 1 to show the section and 0 to hide the section. | int | optional |
canRestore | Defines if the section can be restored to default. | int | optional |
advanced | Deprecated since 100.0.2. | bool | optional |
extends | By providing an identifier of another section, the content of this node will extend the section that you referenced. | string | optional |
Section node reference
A <section>
-Tag can have the following children:
Node | Description | Type |
---|---|---|
label | Defines the label that is displayed in the frontend. | string |
class | Adds a defined CSS class to the rendered section HTML element. | string |
tab | References the associated tab. Expects the ID of the tab. | typeTabId |
header_css | Neither used nor evaluated at the time of this writing. | string |
resource | References an ACL resource to provide permission settings for this section. | typeAclResourceId |
group | Define one or more subgroups. | typeGroup |
frontend_model | Specifies a different frontend model to change the rendering and modify the output. | typeModel |
include | Used to include additional system_include.xsd compatible files. Usually used to structure large system.xml files. | includeType |
Example: Create a section and assign it to a tab
The following code snippet demonstrates the basic usage of creating a new section.
<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
<system>
<tab id="A_UNIQUE_ID" translate="label" class="a-custom-css-class-to-style-this-tab" sortOrder="10">
<label>A meaningful label</label>
</tab>
<section id="A_UNIQUE_SECTION_ID" showInDefault="1" showInWebsite="0" showInStore="1" sortOrder="10" translate="label">
<label>A meaningful section label</label>
<tab>A_UNIQUE_ID</tab>
<resource>VENDOR_MODULE::path_to_the_acl_resource</resource>
</section>
</system>
</config>
The section described above defines the ID A_UNIQUE_SECTION_ID
, is visible in the default config view and in a store context. The label
-node is translatable. The section is associated to the tab with the ID A_UNIQUE_ID
. The section can only be accessed by users that have the permissions defined in the ACL VENDOR_MODULE::path_to_the_acl_resource
.
Groups
The <group>
-Tag is used to group fields together.
Group attribute reference
A <group>
-Tag can have the following attributes:
Attribute | Description | Type | Required |
---|---|---|---|
id | Defines the identifier that is used referencing the group. | typeId | required |
translate | Defines the fields that should be translatable. Provide label to make the label translatable. Multiple fields should be separated by a space. | string | optional |
type | Defines the input type of the rendered HTML element. Defaults to text . | string | optional |
sortOrder | Defines the sort order of the section. High numbers will push the section to the bottom of the page; low numbers will push the section to the top. | float | optional |
showInDefault | Defines whether the group is shown in the default configuration scope. Specify 1 to show the group and 0 to hide the group. | int | optional |
showInStore | Defines whether the group is shown on store level. Specify 1 to show the group and 0 to hide the group. | int | optional |
showInWebsite | Defines whether the group is shown on website level. Specify 1 to show the group and 0 to hide the group. | int | optional |
canRestore | Defines if the group can be restored to default. | int | optional |
advanced | Deprecated since 100.0.2. | bool | optional |
extends | By providing an identifier of another group, the content of this node will extend the section that you referenced. | string | optional |
Group node reference
A <group>
-Tag can have the following children:
Node | Description | Type |
---|---|---|
label | Defines the label that is displayed in the frontend. | string |
fieldset_css | Adds one or more CSS classes to a group fieldset. | string |
frontend_model | Specifies a different frontend model to change the rendering and modify the output. | typeModel |
clone_model | Specifies a given model to clone fields. | typeModel |
clone_fields | Enabled or disabled cloning of fields. | int |
help_url | Not extensible. See below. | typeUrl |
more_url | Not extensible. See below. | typeUrl |
demo_link | Not extensible. See below. | typeUrl |
comment | Adds a comment below the group label. By using <![CDATA[//]]> HTML can be applied. | string |
hide_in_single_store_mode | Whether the group should be visible in single store mode. 1 hides the group; 0 shows the group. | int |
field | Define one or more fields that should be available under this group. | field |
group | Define one or more subgroups. | unbounded |
depends | Can be used to declare dependencies on other fields. Is used to show specific fields/groups only when a given field has a value of 1 . This node expects a section/group/field -string. | depends |
attribute | Custom attributes can be used by frontend models. Usually used to make a given frontend model more dynamic. | attribute |
include | Used to include additional system_include.xsd compatible files. Usually used to structure large system.xml files. | includeType |
more_url
, demo_url
and help_url
are defined by a PayPal frontend model that is only used once. These nodes are not reusable.Example: Create a group for a given section
The following code snippet demonstrates the basic usage of creating a new group.
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
<system>
<tab id="A_UNIQUE_ID" translate="label" class="a-custom-css-class-to-style-this-tab" sortOrder="10">
<label>A meaningful label</label>
</tab>
<section id="A_UNIQUE_SECTION_ID" showInDefault="1" showInWebsite="0" showInStore="1" sortOrder="10" translate="label">
<label>A meaningful section label</label>
<tab>A_UNIQUE_ID</tab>
<resource>VENDOR_MODULE::path_to_the_acl_resource</resource>
<group id="A_UNIQUE_GROUP_ID" translate="label comment" sortOrder="10" showInDefault="1" showInWebsite="0" showInStore="1">
<label>A meaningful group label</label>
<comment>An additional comment helping users to understand the effect when configuring the fields defined in this group.</comment>
<!-- Add your fields here. -->
</group>
</section>
</system>
</config>
The group described above defines the ID A_UNIQUE_GROUP_ID
, is visible in the default config view and in a store context. Both, the label
and the comment
are marked as translatable.
Fields
The <field>
-Tag is used inside of <group>
-Tags to define specific configuration values.