Aggiungi una nota sotto un campo modulo usando i componenti dell'interfaccia utente

Come posso aggiungere un piccolo testo sotto un campo in Magento 2 usando i componenti dell'interfaccia utente.
Usando Magento\Framework\Data\Formpotrei fare questo:

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

Il codice sopra produrrebbe questo (notare il testo sotto il campo).

Come posso ottenere la stessa cosa usando i componenti dell'interfaccia utente?
Ho la forma definita in questo modo:

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

Ho provato ad aggiungere <item name="note" xsi:type="string" translate="true">Some note here</item>ma, indovina?

È possibile ottenere ciò utilizzando il seguente tag.

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

Mi sono divertito molto a capire come ottenere HTML per il rendering in un oggetto Notice. Ci sono state due soluzioni che ho capito. So che questo potrebbe essere un commento, ma ho pensato che anche altre persone sarebbero interessate a questa funzionalità.

1. Crea un nuovo elemento html che rende l'avviso come HTML anziché testo

l'elemento originale è disponibile all'indirizzo /vendor/magento/module-ui/view/base/web/templates/form/field.html

Copialo nel tuo modulo con un percorso view/base/web/template/form/field-html-notice.htmlo qualcosa di simile ( tieni presente che la templatesdirectory che viene modificata templateè intenzionale e richiesta per i file modello personalizzati )

Ora nel tuo nuovo file field-html-notice.html, puoi modificare il file html per caricare l' $data.noticehtml usando e saltare completamente l'intervallo. (ovviamente se stai cercando di tradurre il tuo html, dovrai personalizzare questa soluzione per avere una soluzione alternativa)

La soluzione sarebbe quella di prendere questo modello e modificarlo

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

per assomigliare a qualcosa di più simile a questo:

    <!-- 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 volta che mi sono preso il tempo per farlo, mi sono reso conto che il team di Magento ci ha dato la possibilità di aggiungere additionalInfociò che è reso come HTML.

2. Aggiungi un div con la classe di avviso come informazioni aggiuntive per un componente

L'opzione molto più pacchiana sarebbe quella di rendere il div diviso nella additionalInfosezione. Qualcosa sulla falsariga di

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

Quindi sì, semplice vero? Bene. Adesso vado a dormire.

(tieni presente che il validatore xml si interromperà se utilizzi l'effettivo <o i >caratteri nelle tue informazioni aggiuntive, quindi il <e>

Nota: si scopre che puoi semplicemente racchiudere il tuo html in <![CDATA[<p>cool paragraph man</p>]] Thanks @Marius

Le attuali versioni 2.2.8 e 2.3.1 di Magento 2 supportano entrambe html additionalInfo per impostazione predefinita nel campo Modulo interfaccia utente.

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

Non è necessario modificare il modello field.html.