To find the Magento 2 configuration page navigate to Magento 2 Admin Panel > Stores > Configuration.

Налаштування Magento 2

All tabs and forms on this page are customized using this file

etc/adminhtml/system.xml

that the majority of Magento 2 modules contains.

Add the following code to the system.xml file in your module to create your custom 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="tab_id" translate="label" sortOrder="110">
             <label>My Tab</label>
         </tab>
         <section id="section_id" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">
             <class>separator-top</class>
             <label>My Section</label>
             <tab>tab_id</tab>
             <resource>VendorName_ModuleName::acl_path</resource>
             <group id="group_id" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                 <label>My Group</label>
                 <attribute type="expanded">1</attribute>
                 <field id="field_id" translate="label comment" type="select" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                     <label>My YesNo Field</label>
                     <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                 </field>
             </group>
             <group id="group_id2" translate="label" type="text" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
                 <label>My Group2</label>
                 <attribute type="expanded">1</attribute>
                 <field id="field_id" translate="label comment" type="select" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                     <label>My YesNo Field</label>
                     <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                 </field>
             </group>
        </section>
     </system>
</config>

Clear the Magento 2 Configuration Cache (via System > Cache Management). Refresh the configuration page. You will see a new tab appear:

Кастомна секція в налаштуваннях Magento 2

Use the <tab> XML element when creating a new tab. Note: the tab_id has to be unique.

  • <resource> is used to delimit rights to access this section. You can learn more about them in this article.
  • <attribute type="expanded">1</attribute> indicates that the default group is deployed.
  • <source_model> identifies the model that is responsible for the data in the field. The Source Model, in particular, is used for drop-down lists.
  • showInStore indicates if an item can be edited at the Store View level, showInWebsite - at the Website level, showInDefault - at the global level. You can switch configuration levels using the "Store View" drop-down list at the top left corner, under the page title.
  • type indicates the type of the element, sortOrder - the position, translate indicates which properties can be translated into other languages. We recommend using sortOrder with step 10 in your modules.

Expansion of Existing Sections

With the sytem.xml file, you can not only create new sections but also extend existing ones. All you need to do is recreate the structure of sections and groups without using attributes or labels and add new fields to them.

When building a configuration page, Magento 2 collects system.xml files from all modules and merges them.

In the examples, we create a module for frequently asked questions (FAQ). The modified module code can be viewed on GitHub.

Read more to learn how to set the default values for the Magento 2 configuration page field.