Adicionar uma nota em um campo de formulário usando componentes da interface do usuário

Como posso adicionar um texto pequeno em um campo no Magento 2 usando componentes da interface do usuário.
Usando Magento\Framework\Data\Formeu poderia fazer isso:

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

O código acima produziria isso (observe o texto sob o campo).

Como posso conseguir a mesma coisa usando os componentes da interface do usuário do formulário?
Eu tenho o formulário definido assim:

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

Eu tentei adicionar <item name="note" xsi:type="string" translate="true">Some note here</item>, mas, adivinhem?

Você pode conseguir isso usando a seguinte tag.

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

Eu tive um tempo muito chato para descobrir como obter html para renderizar em um objeto de aviso. Descobri duas soluções. Eu sei que isso poderia ser um comentário, mas achei que outras pessoas também estariam interessadas nessa funcionalidade.

1. Crie um novo elemento html que renderize o aviso como HTML em vez de texto

o elemento original pode ser encontrado em /vendor/magento/module-ui/view/base/web/templates/form/field.html

Copie isso no seu módulo com um caminho view/base/web/template/form/field-html-notice.htmlou algo semelhante ( observe que o templatesdiretório templateque está sendo alterado para intencional e necessário para arquivos de modelo personalizados )

Agora, no seu novo arquivo field-html-notice.html, você pode modificar o arquivo html para carregar o $data.noticehtml em uso e ignorar completamente a extensão. (é claro que se você deseja traduzir seu html, precisará personalizar esta solução para ter uma solução alternativa)

A solução seria pegar esse modelo e 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 parecer algo mais ou menos assim:

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

Depois que dediquei um tempo para fazer isso, percebi que a equipe do Magento convenientemente nos deu a capacidade de adicionar o additionalInfoque é renderizado como html.

2. Adicione uma div com a classe de aviso como informações adicionais para um componente

A opção mais difícil seria fazer com que a divisão de aviso seja renderizada na additionalInfoseção. Algo ao longo das linhas 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>

Então sim, simples, certo? Bem. Eu vou dormir agora.

(observe que o validador xml será interrompido se você usar os caracteres reais <ou >em suas informações adicionais, portanto, <e>

Nota: Acontece que você pode apenas envolver seu html em <![CDATA[<p>cool paragraph man</p>]] Obrigado @Marius

As versões atuais do Magento 2 2.2.8 e 2.3.1 suportam o html additionalInfo por padrão no campo UI Form.

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

Não é necessário modificar o modelo field.html.