System XML File: How to Create Admin Configuration in Magento 2

When we create a model or extension, then its control should be given in the admin configuration by using the system XML file, this is a better model and extension scale, which decides how better the model or extension that you have created is.

In Magento 2 there is one file that is System.xml that is used to create admin configuration fields.

This file we need when we want to provide some setting option inside of the admin configuration for admin users.

Store > Setting > Configuration

 

Step 1: Register Extension

In order to create a menu in Magento 2 extension first, you have to create a registration.php file inside of the module folder.

Wishusucess/Conf/registration.php
<?php
/**
* @Category Wishusucess
* @Package Wishusucess_Conf
* @website http://www.wishusucess.com/
*/
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Wishusucess_Conf',
__DIR__
);

 

Step 2: Module information and Version

The module XML file consists of the basic information of your extension. This is one of the most basic files of the Magento 2 extension.

In the Wishusucess module’s root directory, I have created a new directory that is called the, etc directory. So here I have created a file that is module.xml file under the etc directory.

Wishusucess/Conf/etc/module.xml
<?xml version="1.0"?>
<!--
/**
* @Category Wishusucess
* @Package Wishusucess_Conf
* @website http://www.wishusucess.com/
*/
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Wishusucess_Conf" setup_version="2.1.0" />
</config>

 

Read more: Magento 2.4 Installation Guide: How to Install Magento 2.4.2

 

Step 3: Create Adminhtml Menu XML File

To Create Admin Menu in Magento 2 extension we need to create the menu XML file.

This is the file about the routing and navigation of the items.

By using this link we can navigate to the other page. These files are used to create a link that helps to the landing on another page that is added in the left navigation and tells Magento framework how to resolve requests for that page.

The menu.xml file gives us options to add items in the content section of the left navigation.

Each item we use to add by action attribute and that action can be decided by the Magento 2 developers, where they want to redirect after clicking the link.

Wishusucess/Conf/etc/adminhtml/menu.xml
<?xml version="1.0"?>
<!--
/**
* @Category Wishusucess
* @Package Wishusucess_Conf
* @website http://www.wishusucess.com/
*/
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Backend:etc/menu.xsd">
<menu>
<add id="Wishusucess_Conf::conf" title="Wishusucess" translate="title" module="Wishusucess_Conf" sortOrder="20" resource="Wishusucess_Conf::conf"/>
</menu>
</config>

 

Add Menu Items in Magento 2 Extension

Now, we can add the menu item from the other module to another module or

We can add the menu item in the same file of

Wishusucess/Conf/etc/adminhtml/menu.xml

But here,

I am adding the menu item from another module. So I am creating a menu file

Wishusucess/Recaptcha/etc/adminhtml/menu.xml
<?xml version="1.0"?>
<!--
/**
* Tech9logy
* @category Recaptcha
* @package Wishusucess_Recaptcha
*/
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../Magento/Backend/etc/menu.xsd">
<menu>
<add id="Wishusucess_Recaptcha::view" title="Google reCaptcha" translate="title" module="Wishusucess_Recaptcha" sortOrder="10" resource="Wishusucess_Recaptcha::view"/>
<add id="Wishusucess_Recaptcha::grid" title="reCAPTCHA Configuration" module="Wishusucess_Recaptcha" sortOrder="20" parent="Wishusucess_Recaptcha::view" action="adminhtml/system_config/edit/section/wishusucess/" resource="Wishusucess_Recaptcha::view"/>
</menu>
</config>

 

After executing the setup upgrade command you will see the output like the below image.

Magento 2 Menu xml

 

Steps to Create Admin Configuration By System XML File

We have to create a file inside of etc/adminhtml/system.xml then we can

Step 2: Set default value

Step 3: Flush Magento cache

Step 4: Get value from the configuration

Magento 2 System XML File for Admin Configuration

The System configuration page is logically divided into four parts:

  • Tabs
  • Sections
  • Groups
  • Fields.

Now if you will see the admin you can see the menu item which I have added here,

Now, adding system XML file and linking the Recaptcha configuration with system configuration via menu item link.

Wishusucess/Recaptcha/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="recaptcha" translate="label" sortOrder="10">
<label>Wishusucess</label>
</tab>
<section id="wishusucess_recaptcha" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
<class>separator-top</class>
<label>reCAPTCHA Setting</label>
<tab>recaptcha</tab>
<resource>Wishusucess_Recaptcha::wishusucess_recaptcha</resource>
<group id="general" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="0" showInStore="0">
<label>reCAPTCHA Configuration</label>
<field id="enabled" translate="label comment" type="select" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1" canRestore="1">
<label>Enabled</label>
<source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
</field>
<field id="googlesitekey" translate="label comment" type="text" sortOrder="2" showInDefault="1" showInWebsite="1" showInStore="1" canRestore="1">
<label>Site Key</label>
<comment><![CDATA[Enter Site Key]]></comment>
</field>
<field id="googlesecretkey" translate="label comment" type="text" sortOrder="3" showInDefault="1" showInWebsite="1" showInStore="1" canRestore="1">
<label>Secret Key</label>
<comment><![CDATA[Enter Secret Key]]></comment>
</field>
<field id="moduleposition" translate="Module" type="multiselect" sortOrder="4" showInDefault="1" showInWebsite="1" showInStore="1">
<label>Select Form</label>
<source_model>Wishusucess\Recaptcha\Model\Config\Source\ConfigOption</source_model>
</field>
</group>
</section>
</system>
</config>

Now the output will look like the below image.

 

System XML in Magento 2

So this is the simple way to add the menu item and system XML configurations in the module and extension.

 

Similar Posts:

RMA Extension Magento 2: What is RMA and How it Works

Google reCAPTCHA in Magento 2: How to Add reCaptcha