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?

up vote 25 down vote accepted

You can achieve this using following tag.

<item name="notice" xsi:type="string" translate="true">Some note here</item>
  • Thanks. It works. I added translate="true" just to make the translatable phrase collector script pick this up also. – Marius May 26 '16 at 7:22
  • @Marius do you know how to use html code in notice? – Sergey Korzhov Jun 20 '17 at 8:08
  • @SergeyKorzhov try <item name="notice" xsi:type="string" translate="true"><![CDATA[Some note <a href="https://google.com">here</a>]]></item> – Marius Jun 20 '17 at 8:14
  • @Marius i did before asking. does not work. the funny thing is that html works just fine in system.xml even without CDATA. – Sergey Korzhov Jun 20 '17 at 8:21
  • In this notice , shall I give dynamic data inbetween messages ?? Is this possible @Marius – Jaisa Jan 17 at 13:20

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.

  1. 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 &lt; and &gt;

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

  • <item name="additionalInfo" xsi:type="string" translate="true"> works a lot better then notice – SwAt.Be Jun 7 at 16:57

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.