Custom Magento2 System Configuration

In magento 2 series we already know how to create module and admin menu. If you miss previous article, read from here. Today We discuss about magento 2 system configuration. So lets start..

How to adding a system config file
As like magento 1, system configuration are stored inside system.xml file. Location of this file is

app/code/Excercise/HelloWorld/etc/adminhtml/system.xml

Adding a new Tab
The first thing we’re going to do is a add a custom “Tab” to the System Configuration. Tabs are left navigation in admin section Stores -> Configuration. Lets create our new tab “Hello World”. Inside system.xml file code should be following.

<?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">
            <label>Hello World</label>
        </tab>
    </system>
</config>

Adding A New Section
Now we create a new section of helloworld tab. Now code should be following

<?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">
            <label>Hello World</label>
        </tab>
        <section id="helloworld" translate="label" sortOrder="130" showInDefault="1" showInWebsite="1" showInStore="1">
            <class>separator-top</class>
            <label>Hello World Configuration</label>
            <tab>helloworld</tab>
            <resource>Excercise_HelloWorld::test_config</resource>
        </section>
    </system>
</config>

Adding Groups and Fields

<?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">
            <label>Hello World</label>
        </tab>
        <section id="helloworld" translate="label" sortOrder="130" showInDefault="1" showInWebsite="1" showInStore="1">
            <class>separator-top</class>
            <label>Hello World Configuration</label>
            <tab>helloworld</tab>
            <resource>Excercise_HelloWorld::test_config</resource>
            <group id="active_display" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="0" showInStore="0">
                <label>Hello World Configuration Options</label>
                <field id="scope" translate="label" type="select" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0">
                    <label>Enable Helloworld Controller</label>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
            </group>
        </section>
    </system>
</config>

Adding ACL
In magento 1 acl are stored inside adminhtml. But in magento 2 acl are stored acl.xml file and located

app/code/Excercise/HelloWorld/etc/adminhtml/acl.xml
<?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="Excercise_HelloWorld::test_config" title="Hello World Section" />
                        </resource>
                    </resource>
                </resource>
            </resource>
        </resources>
    </acl>
</config>

Don’t forget clearing magento cache. And goto Stores -> Configuration, you can see a new “Hello World Configuration” tab appear.

9 thoughts on “Custom Magento2 System Configuration

  1. Just want to say your article is as astonishing. The clarity in your post is just great and i can assume you’re
    an expert on this subject. Well with your permission
    let me to grab your RSS feed to keep up to date with forthcoming post.
    Thanks a million and please carry on the enjoyable work.

  2. Hi I am not able to see my configuration tab on the left end I have addded in the same way pls have a look on my system.xml

    Hello

    separator-top
    Social Login
    Hello
    HelloWorld::helloworld_config

    Social Login Google Configuration Options

    Enable Google Login
    Magento\Backend\Model\Config\Source\Yesno

    Google API Client ID

    Google API Client Secret

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s