How to create note field in system.xml Magento 2

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

A <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:

• 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:

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.