Add a note under a form field using ui components

Question

How can I add a small text under a field in Magento 2 using ui components.
Using Magento\Framework\Data\Form I could do this:

/** @var \Magento\Framework\Data\Form $form */
$form = $this->formFactory->create();
$fieldset = $form->addFieldset(
    'base_fieldset',
    [
        'legend' => __('Some legend here'),
        'class'  => 'fieldset-wide'
    ]
);
$fieldset->addField(
    'name',
    'text',
    [
        'name'      => 'name',
        'label'     => __('Name'),
        'title'     => __('Name'),
        'note'      => __('Some note here')
    ]
);

The code above would produce this (notice the text under the field).

How can I achieve the same thing using form ui-components?
I have the form defined like this:

<field name="name">
    <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">Name</item>
            <item name="formElement" xsi:type="string">input</item>
            <item name="source" xsi:type="string">[entity]</item>
            <item name="sortOrder" xsi:type="number">10</item>
            <item name="dataScope" xsi:type="string">name</item>
            <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">true</item>
            </item>
        </item>
    </argument>
</field>

I tried adding <item name="note" xsi:type="string" translate="true">Some note here</item> but, guess what?

Answer 1

You can achieve this using following tag.

<item name="notice" xsi:type="string" translate="true">Some note here</item>

Answer 2

I had a really annoying time figuring out how to get html to render in a notice object. There have been two solutions I have figured out. I know this could possibly be a comment, but I figured other people would be interested in this functionality as well.

1. Create a new html element that renders the notice as HTML instead of text

the original element can be found at /vendor/magento/module-ui/view/base/web/templates/form/field.html

Copy that into your module with a path of view/base/web/template/form/field-html-notice.html or something similar (please note the templates directory being changed to template that is intentional and required for custom template files)

Now in your new field-html-notice.html file, you can modify the html file to load the $data.notice using html and skip the span altogether. (of course if you're looking to translate your html, you'll need to customise this solution to have some workaround)

The solution would be to take this template and modify

    <!-- /vendor/magento/module-ui/view/base/web/templates/form/field.html:35 -->
    <div class="admin__field-note" if="$data.notice" attr="id: noticeId">
        <span translate="notice"/>
    </div>

    <div class="admin__additional-info" if="$data.additionalInfo" html="$data.additionalInfo"></div>

to look something more like this:

    <!-- view/base/web/template/form/field-html-notice.html:35 -->
    <div class="admin__field-note" if="$data.notice" attr="id: noticeId" html="$data.notice"></div>

    <div class="admin__additional-info" if="$data.additionalInfo" html="$data.additionalInfo"></div>

Once I had taken the time to do that, I realised the Magento team has conveniently given us the ability to add additionalInfo that is rendered as html.

2. Add a div with the notice class as additional info for a component

The much tackier option would be to have the notice div render in the additionalInfo section. Something along the lines of

    <!-- my_cool_component.xml -->
    <field name="field_id">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <!-- other field config -->
                <item name="additionalInfo" xsi:type="string" translate="true">
                    &lt;div class="admin__field-note"&gt;
                        This looks like a notice&lt;br/&gt;
                        it is super &ltspan style="font-weight=bold"&gt;TACKY&lt/span&gt;&lt;br/&gt;
                        but it will work &lta href="http://google.com"&gt;I promise&lt/a&gt;
                    &lt;/div&gt;
                </item>
            </item>
        </argument>
    </field>

So yeah, simple right? Well. I'm going to go sleep now.

(please note that the xml validator will break if you use the actual < or > characters in your additional info, hence the < and >

Note: turns out you can just wrap your html in <![CDATA[<p>cool paragraph man</p>]] Thanks @Marius

Answer 3

The current Magento 2 versions 2.2.x and 2.3.x both support the HTML additionalInfo by default in UI form field.

<item name="additionalInfo" xsi:type="string">
    <![CDATA[<b>My Html Information</b>]]>
</item>

No need to modify the field.html template.