Add a note under a form field using ui components
You can achieve this using following tag.
<item name="notice" xsi:type="string" translate="true">Some note here</item>
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.
- 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.
- 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">
<div class="admin__field-note">
This looks like a notice<br/>
it is super <span style="font-weight=bold">TACKY</span><br/>
but it will work <a href="http://google.com">I promise</a>
</div>
</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
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.