Magento 2 configuration and customization of System.xml

The Magento 2 system.xml is a configuration file that is used to create fields in the Magento 2 System. You will need system.xml if your module has some settings that the admin needs to set.

Let’s start to create a new simple configuration. To do so, you need to create a system.xml file as shown below.

We have a Module named Demo Webkul_Demo.

File Path: app/code/Webkul/Demo/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="webkul" translate="label" sortOrder="10">
            <label>Webkul</label>
        </tab>
        <section id="demo" translate="label" type="text" sortOrder="300" showInDefault="1" showInWebsite="0" showInStore="0">
            <label>Demo</label>
            <tab>webkul</tab>
            <resource>Webkul_Demo::config_demo</resource>
            <group id="configuration" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0">
                <label>Demo Configuration</label>
                <field id="demo_text" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0">
                    <label>Demo Text</label>
                </field>
            </group>
        </section>
    </system>
</config>

You can set default values for your configuration fields by creating a config.xml file in your modules etc directory.

File Path: app/code/Webkul/Demo/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>
        <demo>
            <configuration>
                <demo_text>Example text</demo_text>
            </configuration>
        </demo>
    </default>
</config>

The admin configuration will look like this

Adding a custom image to the admin configuration group.

File Path: app/code/Webkul/Demo/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="webkul" translate="label" sortOrder="10">
            <label>Webkul</label>
        </tab>
        <section id="demo" translate="label" type="text" sortOrder="300" showInDefault="1" showInWebsite="0" showInStore="0">
            <label>Demo</label>
            <tab>webkul</tab>
            <resource>Webkul_Demo::config_demo</resource>
            <group id="configuration" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0">
                <label>Demo Configuration</label>
                <field id="demo_image" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0">
                    <frontend_model>Webkul\Demo\Block\DemoImage</frontend_model>
                </field>
                <field id="demo_text" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0">
                    <label>Demo Text</label>
                </field>
            </group>
        </section>
    </system>
</config>

As you can see in the system.xml file, there is a field added demo_image, with frontend_model. You need to create a block file like this.

File Path: app/code/Webkul/Demo/Block/DemoImage.php

<?php
namespace Webkul\Demo\Block;

class DemoImage extends \Magento\Config\Block\System\Config\Form\Field {


    public function __construct(
        \Magento\Framework\View\Asset\Repository $assetRepo,
        \Magento\Backend\Block\Template\Context $context,
        array $data = []
    ) {
        $this->_assetRepo = $assetRepo;
        parent::__construct($context, $data);
    }

    public function render(\Magento\Framework\Data\Form\Element\AbstractElement $element) {
        $imageUrl = $this->_assetRepo->getUrl("Webkul_Demo::images/demoImage.png");
        $html = "<img src='$imageUrl' alt='Demo Image' width='1000' height='100' />";
        return $html;
    }

}

The image you want to use is in app/code/Webkul/Demo/view/adminhtml/web/images/demoImage.png in this directory.

You can also add more HTML, CSS, or js scripts to your block file. By which you can customize even more as you like.

You can also check the link from Magento docs, which gives you more information about the system.xml configuration file, and also check our other blogs.

Reference: https://devdocs.magento.com/guides/v2.4/config-guide/prod/config-reference-systemxml.html

You can also check our other blogs https://webkul.com/blog/how-to-show-product-stock-remaining-items-in-magento-2/

For technical assistance, please get in touch with us via email at support@webkul.com

Additionally, explore a wide range of solutions to upgrade your store’s functionality by visiting the Magento 2 Modules section.

For expert guidance or custom feature development, hire experienced Magento 2 developers for your project.