Agregue una nota debajo de un campo de formulario usando componentes ui

¿Cómo puedo agregar un pequeño texto debajo de un campo en Magento 2 usando componentes ui?
Usando Magento\Framework\Data\Formpodría hacer esto:

/** @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')
    ]
);

El código anterior produciría esto (observe el texto debajo del campo).

¿Cómo puedo lograr lo mismo usando form ui-components?
Tengo la forma definida así:

<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>

Intenté agregar <item name="note" xsi:type="string" translate="true">Some note here</item>pero, ¿adivina qué?

Puede lograr esto usando la siguiente etiqueta.

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

Tuve un momento realmente molesto descubriendo cómo obtener html para representar en un objeto de notificación. Ha habido dos soluciones que he descubierto. Sé que esto podría ser un comentario, pero supuse que otras personas también estarían interesadas en esta funcionalidad.

1. Cree un nuevo elemento html que muestre el aviso como HTML en lugar de texto

el elemento original se puede encontrar en /vendor/magento/module-ui/view/base/web/templates/form/field.html

Copie eso en su módulo con una ruta view/base/web/template/form/field-html-notice.htmlo algo similar ( tenga en cuenta que el templatesdirectorio que se está cambiando templatees intencional y requerido para los archivos de plantilla personalizados )

Ahora, en su nuevo archivo field-html-notice.html, puede modificar el archivo html para cargar el $data.noticeuso de html y omitir el intervalo por completo. (por supuesto, si está buscando traducir su html, deberá personalizar esta solución para tener una solución alternativa)

La solución sería tomar esta plantilla y modificar

    <!-- /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>

para parecerse a algo más como esto:

    <!-- 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>

Una vez que me tomé el tiempo para hacerlo, me di cuenta de que el equipo de Magento nos ha dado convenientemente la capacidad de agregar additionalInfoque se representa como html.

2. Agregue un div con la clase de aviso como información adicional para un componente

La opción mucho más pegajosa sería tener el divisor de notificación en la additionalInfosección. Algo en la línea de

    <!-- 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>

Entonces sí, simple ¿verdad? Bien. Me voy a dormir ahora.

(tenga en cuenta que el validador xml se romperá si usa los caracteres reales <o >en su información adicional, de ahí que el <y>

Nota: resulta que puedes envolver tu html en <![CDATA[<p>cool paragraph man</p>]] Thanks @Marius

Las versiones actuales de Magento 2 2.2.8 y 2.3.1 son compatibles con la información adicional html de forma predeterminada en el campo Formulario UI.

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

No es necesario modificar la plantilla field.html.