Magento 2 how to show field notice dynamically in UI component form

Here we will check in Magento 2 how to show notice dynamically in UI component form fields.

In the mean time, you can also check our Adobe Commerce extensions that we have crafted with industry standards.

Sometimes we have to add a note under any form field to describe the field or any information regarding the field to the user.

<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <dataSource name="vendor_module_form_data_source">
        <argument name="dataProvider" xsi:type="configurableObject">
            <argument name="class" xsi:type="string">Vendor\Module\Model\Form\DataProvider</argument>
            <argument name="name" xsi:type="string">vendor_module_form_data_source</argument>
            <argument name="primaryFieldName" xsi:type="string">id</argument>
            <argument name="requestFieldName" xsi:type="string">id</argument>
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="submit_url" xsi:type="url" path="route/path/save"/>
                    <item name="validate_url" xsi:type="url" path="route/path/validate"/>
                </item>
            </argument>
        </argument>
        <argument name="data" xsi:type="array">
            <item name="js_config" xsi:type="array">
                <item name="component" xsi:type="string">Magento_Ui/js/form/provider</item>
            </item>
        </argument>
    </dataSource>
    <fieldset name="module_form">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string" translate="true">Form Title</item>
            </item>
        </argument>
        <field name="url">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="label" xsi:type="string" translate="true">Url</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">employee</item>
                    <item name="dataScope" xsi:type="string">url</item>
                    <item name="validation" xsi:type="array">
                        <item name="validate-url" xsi:type="boolean">true</item>
                    </item>
                </item>
            </argument>
        </field>
    </fieldset>
</form>

We can add notice dynamically by overriding the getMeta function in the form UI component data provider class.

namespace Vendor\Module\Model\Form;

class DataProvider extends \Magento\Ui\DataProvider\AbstractDataProvider
{
    protected $collection;

    public function __construct(
        $name,
        $primaryFieldName,
        $requestFieldName,
        CollectionFactory $collectionFactory,
        array $meta = [],
        array $data = []
    ) {
        parent::__construct($name, $primaryFieldName, $requestFieldName, $meta, $data);
        $this->collection = $collectionFactory->create();
    }

    /**
     * @inheritdoc
     */
    public function getMeta()
    {
        $meta = parent::getMeta();

        $meta['module_form'] = [
            'children' => [
                'url' => [
                    'arguments' => [
                        'data' => [
                            'config' => [
                                'notice' => __('Label For Element')
                            ]
                        ]
                    ]
                ]
            ]
        ];

        return $meta;
    }
}

Hire Magento developers who are dedicated to achieving outstanding outcomes for your unique e-commerce ventures in order to add a personal touch.

Furthermore, there is no necessity to look beyond this point; take advantage of the opportunity to initiate your projects with the recommended Magento 2 development company.