Magento 2 How to Create Custom Tab In Admin Configuration through System.xml

To create Custom Tab In Admin Configuration module, you need to complete the following steps:

Basic Setup :Step 1 : Create the folder of CustomTab module

Step 2 : Create etc/module.xml file

Step 3 : Create etc/registration.php file

Step 4 : Enable the module

Steps to follow :Step 1 : Create etc/module.xml file.

Then, it is necessary to create etc folder and add the module.xml file

app/code/BlueThink/CustomTab/etc/module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="BlueThink_CustomTab" setup_version="1.0.0">
    </module>
</config>

1

2

3

4

5

<?xml version="1.0"?>

</module>

</config>

Step 2 : Create etc/registration.php file

In this step, we will add registration.php as following guide:

app/code/BlueThink/CustomTab/registration.php

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
	\Magento\Framework\Component\ComponentRegistrar::MODULE,
	'BlueThink_CustomTab',
	__DIR__
);

1

2

3

4

5

6

<?php

\Magento\Framework\Component\ComponentRegistrar::register(

\Magento\Framework\Component\ComponentRegistrar::MODULE,

'BlueThink_CustomTab',

__DIR__

);

Step 3 : Enable the module

Finish the step 3, we have already created the HelloWorld module. And we will enable this module in this step

After create the module if you run the command as:

php bin/magento module:status

You should see the module is disable now:

List of disabled modules: BlueThink_CustomTab

enable the module right now, let run the command as:

php bin/magento module:enable BlueThink_CustomTab

After Enable Module Then Run this Command

sudo php bin/magento setup:upgrade
sudo php bin/magento setup:di:compile
sudo php bin/magento setup:static-content:deploy -f
sudo php bin/magento c:f
sudo chmod -R 777 var/ pub/static generated/

1

2

3

4

5

sudo php bin/magento setup:upgrade

sudo php bin/magento setup:di:compile

sudo php bin/magento setup:static-content:deploy -f

sudo php bin/magento c:f

sudo chmod -R 777 var/ pub/static generated/

Step 4 : Create system.xml File

app/code/BlueThink/CustomTab/etc/adminhtml/system.xml

<?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="bluethink" translate="label" sortOrder="10">
            <label>BlueThink</label>
        </tab>
        <section id="bluethinkcustom" translate="label" sortOrder="130" showInDefault="1" showInWebsite="1" showInStore="1">
            <class>separator-top</class>
            <label>Custom Tab</label>
            <tab>bluethink</tab>
            <resource>BlueThink_CustomTab::bluethinkcustom_config</resource>
            <group id="general" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="0" showInStore="0">
                <label>General Configuration</label>
                <field id="enable" translate="label" type="select" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0">
                    <label>Module Enable</label>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
                <field id="message" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0">
                    <label>Enter Your Message</label>
                    <depends>
                        <field id="enable">1</field>
                    </depends>
                    <!-- <comment>This text will display on the frontend.</comment> -->
                </field>
            </group>
        </section>
    </system>
</config>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

<?xml version="1.0"?>

<label>BlueThink</label>

</tab>

<class>separator-top</class>

<label>Custom Tab</label>

<tab>bluethink</tab>

<resource>BlueThink_CustomTab::bluethinkcustom_config</resource>

<label>General Configuration</label>

<label>Module Enable</label>

<source_model>Magento\Config\Model\Config\Source\Yesno</source_model>

</field>

<label>Enter Your Message</label>

</depends>

</field>

</group>

</section>

</system>

</config>

Step 5 : Set default value

Each field in system.xml after create will not have any value. When you call them, you will receive ‘null’ result. So for the module, we will need to set the default value for the field and you will call the value without go to config, set value and save it. This default value will be saved in config.xml which is located in etc folder. Let’s create it for this simple configuration:

app/code/BlueThink/CustomTab/etc/config.xml

<?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>
        <bluethinkcustom>
            <general>
                <enable>1</enable>
                <message>Bluethink</message>
            </general>
        </bluethinkcustom>
    </default>
</config>

1

2

3

4

5

6

7

8

9

10

11

<?xml version="1.0"?>

<message>Bluethink</message>

</general>

</bluethinkcustom>

</default>

</config>

You can put the path to the field in the <default> element to set value default for it. The format is:

<default>
    <section>
        <group>
            <field>{value}</field>
        </group>
    </section>
</default>

1

2

3

4

5

6

7

<group>

<field>{value}</field>

</group>

</section>

</default>

Magento 2 How to Create Custom Tab In Admin Configuration through System.xml

Step 6: Flush Magento Cache

Leave a Reply Cancel reply

Find More Blogs

How to Add a Custom Tab to the Customer Order Detail Page in Magento 2

Exception Handling in Java

How to add custom less file in Magento2

Spring Boot Microservices

Implementation of WireMock for better testing

Magento 2: How to selected default option in configurable options?

How To Implement Simple JWT Authentication in Django Rest Framework

Optimizing Search: Integrating Elasticsearch in Django Applications

How to create Customer Segments

Proxy Design Pattern and Requisition List in Magento 2