Magento 2 configuration and customization of System.xml

The Magento 2 system.xml is a configuration file that is used to create fields in Magento 2 System Configuration system.xml. You will need system.xml if your module has some settings which 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 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 below link Magento docs which give 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/