Read More
Read More
Menu Close

    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.

    Searching for an experienced
    Magento 2 Company ?
    Read More

    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

    config

    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.

    cofigdemo

    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/

    . . .
    Discuss on Helpdesk

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top