How to Create System.xml Configuration in Magento 2

At the time of creating new extension in Magento 2, you need to provide admin user with some settings prior to make it work. System.xml is a configuration file which is used to create those setting fields in extension and it is placed under “etc” folder. After the successful creation of settings, these fields are shown under Store –> Configuration –> Your Extension.

Here, we will learn to create system.xml configuration in Magento 2.

Go to app/code/Magecomp/Hello/etc/adminhtml/system.xml and add the code below:

<pre class="lang:default decode:true">
<?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="helloworld" translate="label" sortOrder="100"> 
            <!-- add a new tab with id helloworld -->
            <label>Hello World</label>
        </tab>
        <section id="helloworld" translate="label" sortOrder="130" showInDefault="1" showInWebsite="1" showInStore="1">
            <!-- add a new section with id helloworld and for tab helloworld -->
            <class>separator-top</class>
            <label>Hello World Configuration</label>
            <tab>helloworld</tab>
            <resource>Magecomp_First::test_config</resource>
            <group id="active_display" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="0" showInStore="0">
                <!-- add a new group with id active display -->
                <label>Hello World Configuration Options</label>
                <field id="scope" translate="label" type="select" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0">
                    <!-- add a new field with id scope -->
                    <label>Enable Helloworld Controller</label>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
            </group>
        </section>
    </system>
</config>
</pre>

With above code, we can add new tab, section, group and field. Now the next step is to set default values for these configuration item, create the file app/code/Magecomp/Hello/etc/config.xml and add the code below:

<pre class="lang:default decode:true">
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Store:etc/config.xsd">
    <default>
        <helloworld> 
            <active_display>
                <scope>1</scope>
            </active_display>
        </helloworld>
    </default>
</config>
</pre>

There is another important thing to do is to setup ACL. In our system.xml, we have the line
Magecomp_First::test_config
This is used to setup ACL for system configuration. Create a file app/code/Magecomp/Hello/etc/acl.xml with below code:

<pre class="lang:default decode:true">
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Acl/etc/acl.xsd">
    <acl>
        <resources>
            <resource id="Magento_Adminhtml::admin">
                <resource id="Magento_Adminhtml::stores">
                    <resource id="Magento_Adminhtml::stores_settings">
                        <resource id="Magento_Adminhtml::config">
                            <resource id="Magecomp_First::test_config" title="Hello World Section" />
                        </resource>
                    </resource>
                </resource>
            </resource>
        </resources>
    </acl>
</config>
</pre>

Now open Magento admin and you can see the HelloWorld tab and sections.

Hope this tutorial has helped you to create system.xml configuration for your next Magento 2 extension.

Let me know if you stuck somewhere or require any help regarding through commenting. I will be happy to help you.