How To Add HTML note in UI component form field

Written by Jigar Patel

Jan 08, 2023

How To Add HTML note in UI component form field

We learn how to add HTML notes in UI Component From field in Magento 2.

UI component components are in charge of rendering result page fragments and facilitating JavaScript component-server interactions. It connects the UI’s visual elements and related data processes which are submitted by users. Some UI elements can be named as tables, buttons, or dialogs. Therefore, admins can use grids more easily with the help of UI components. In this article, I will instruct you to create a UI form in Magento 2 by using the UI component.

Using the below codes, you can Add HTML notes in UI Component From field in Magento 2.

Step:1 First We will start with the field in your ui-form:

<field name="store_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">Store URL</item>
         <item name="formElement" xsi:type="string">input</item>
         <item name="dataScope" xsi:type="string">store_url</item>
         <item name="required" xsi:type="boolean">true</item>
         <item name="notice" xsi:type="string" translate="true"> Enter store URL name. For example: xyzshop </item>
         <strong>
            <item name="additionalInfo" xsi:type="string">
         </strong>
         <em><![CDATA[<span style="color:red">Your store URL will be like:</span> <a href="https://dolphinwebsolution.com">Dolphin</a>]]></em> <strong></item></strong> 
         <item name="validation" xsi:type="array">
            <item name="required-entry" xsi:type="boolean">true</item>
         </item>
      </item>
   </argument>
</field>

Like to Read: Product Labels for Magento 2

When you will add the HTML code in your form field, the result will be displayed in the following image:

I Hope, This instruction will be helpful for you.

If you have any difficulties regarding this blog, do consider them posting in the Comments section below!

I’m here to help.

Thank you!

Jigar Patel

Author

We can help you with

  • Dedicated Team
  • Setup Extended Team
  • Product Development
  • Custom App Development

Schedule a Developer Interview And Get 7 Days Risk-Free Trial

Fill out the form below, and one of our technical experts will reach out to you within 12 hours.

    Google
    |

    4.8

    Google
    |

    4.8

    Google
    |

    4.9

    Google
    |

    4.8

    Google
    |

    4.9

    Copyright © 2024 DOLPHIN WEB SOLUTION. All rights reserved.

    ×

    Hello!

    Click one of our contacts below to chat on WhatsApp

    × How can I help you?
    TO TOP