Reading list Switch to dark mode

    How to create note field in system.xml Magento 2

    Updated 30 March 2023

    Here, we will explain how to add note type field in system.xml file in magento 2. Additionally, we will explain how to show module package version with this note type field.

    The system.xml file allows you to manage the Commerce system configuration. For detailed information about the system.xml file, you can also check the magento blog by clicking on https://experienceleague.adobe.com/docs/commerce-operations/configuration-guide/files/config-reference-systemxml.html

    The system.xml file is located under etc/adminhtml/system.xml in a given Commerce 2 extension.

    Field type reference

    <field>-Tag can have one of the several allowed values for the type="" attribute:

    It is also possible to create a custom field type. This is often done when a special button, with an action, is required. To do this requires two main elements:

    Searching for an experienced
    Magento 2 Company ?
    Find out More
    • Creating a block in the adminhtml area
    • Setting the type="" to the path to this block


    Steps to add note type field in system.xml

    Here, we will explain only for the note type field. Let’s start the work. Please check our blog to know more how to add custom module  configuration in Magento2.

    • First, create system.xml file.
      File Path: app/code/Webkul/Custom/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="test" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>Test Configuration</label>
                <tab>webkul</tab>
                <resource>Webkul_Test::config_test</resource>
                <group id="custom_product_information" translate="label" type="text" sortOrder="700" showInDefault="1"
                    showInWebsite="1" showInStore="1">
                    <label>Custom module Product Information</label>
                    <field id="author" translate="label" type="note" sortOrder="1" showInDefault="1" showInWebsite="1"
                        showInStore="1">
                        <label></label>
                        <frontend_model>Webkul\Custom\Block\Adminhtml\System\Config\ModuleInfo</frontend_model>
                    </field>
                </group>
            </section>
        </system>
    </config>
    • Now, create ModuleInfo.php block file.
      File Path: app/code/Webkul/Custom/Block/Adminhtml/System/Config/ModuleInfo.php
    <?php
    
    namespace Webkul\Custom\Block\Adminhtml\System\Config;
    
    use Magento\Backend\Block\Context;
    use Magento\Framework\Module\PackageInfoFactory;
    
    class ModuleInfo extends \Magento\Config\Block\System\Config\Form\Field\Heading
    {
        /**
         * @var PackageInfoFactory
         */
        protected $packageInfoFactory;
    
        /**
         * Constructor
         *
         * @param Context $context
         * @param PackageInfoFactory $packageInfoFactory
         * @param array $data
         */
        public function __construct(
            Context $context,
            PackageInfoFactory $packageInfoFactory,
            array $data = []
        ) {
            $this->packageInfoFactory = $packageInfoFactory;
            parent::__construct($context, $data);
        }
    
        /**
         * Render element html
         *
         * @param \Magento\Framework\Data\Form\Element\AbstractElement $element
         * @return string
         */
        public function render(\Magento\Framework\Data\Form\Element\AbstractElement $element)
        {
            $label = $element->getLabel();
    
            $info = "<p>You can add any text/html here.</p>";
            $label .= $info;
    
            $packageInfo = $this->packageInfoFactory->create();
            $version = $packageInfo->getVersion('Webkul_Custom');
            $label .= '<p>'.__('Version: %1', $version).'</p>';
    
            return sprintf(
                '<tr class="system-fieldset-sub-head" id="row_%s"><td colspan="5"><h4 id="%s">%s</h4></td></tr>',
                $element->getHtmlId(),
                $element->getHtmlId(),
                $label
            );
        }
    }

    Now, It will be shown in the System configurations as below:

    image-10


    Related blogs

    You can also check our other wonderful blogs related to the system configurations in magento2 with the following links:
    1. How to create a checkbox field in system configuration Magento 2: Click here
    2. How to create a Button in the Configuration Section in Magento 2: Click here
    3. How to Create Radio button in Admin System Configuration in Magento 2: Click here
    4. Create a dependent field in admin configuration in Magento 2: Click here
    Thanks,

    Moreover, If you are looking to create a custom e-commerce website, it is a great idea to hire Magento developers who can help you build a powerful and scalable online store.

    . . .

    Leave a Comment

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


    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home