Ajouter une note sous un champ de formulaire à l'aide de composants d'interface utilisateur

Comment puis-je ajouter un petit texte sous un champ dans Magento 2 en utilisant des composants d'interface utilisateur.
En utilisant Magento\Framework\Data\Formje pourrais faire ceci:

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

Le code ci-dessus produirait cela (notez le texte sous le champ).

Comment puis-je réaliser la même chose en utilisant des composants ui de formulaire?
J'ai la forme définie comme ceci:

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

J'ai essayé d'ajouter <item name="note" xsi:type="string" translate="true">Some note here</item>mais, devinez quoi?

Vous pouvez y parvenir en utilisant la balise suivante.

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

J'ai eu un temps vraiment ennuyeux à comprendre comment obtenir le rendu HTML dans un objet de notification. J'ai trouvé deux solutions. Je sais que cela pourrait éventuellement être un commentaire, mais je pensais que d'autres personnes seraient également intéressées par cette fonctionnalité.

1. Créer un nouvel élément html qui rend l'avis au format HTML au lieu de texte

l'élément d'origine se trouve sur /vendor/magento/module-ui/view/base/web/templates/form/field.html

Copiez cela dans votre module avec un chemin d'accès view/base/web/template/form/field-html-notice.htmlou quelque chose de similaire ( veuillez noter que le templatesrépertoire modifié templateest intentionnel et requis pour les fichiers de modèle personnalisés )

Maintenant, dans votre nouveau fichier field-html-notice.html, vous pouvez modifier le fichier html pour charger le $data.noticehtml en utilisant et ignorer complètement la plage. (bien sûr, si vous cherchez à traduire votre html, vous devrez personnaliser cette solution pour avoir une solution de contournement)

La solution serait de prendre ce modèle et de le modifier

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

pour ressembler à ceci:

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

Une fois que j'ai pris le temps de le faire, j'ai réalisé que l'équipe de Magento nous avait commodément donné la possibilité d'ajouter ce additionalInfoqui est rendu en html.

2. Ajouter un div avec la classe notice comme information supplémentaire pour un composant

L'option beaucoup plus collante serait d'avoir le rendu div de l'avis dans la additionalInfosection. Quelque chose dans le sens 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>

Alors oui, c'est simple, non? Bien. Je vais dormir maintenant.

(veuillez noter que le validateur xml se cassera si vous utilisez le <ou les >caractères réels dans vos informations supplémentaires, d'où le <et>

Remarque: il s'avère que vous pouvez simplement envelopper votre <![CDATA[<p>cool paragraph man</p>]] code HTML dans Merci @Marius

Les versions actuelles de Magento 2 2.2.8 et 2.3.1 prennent toutes les deux en charge par défaut html additionalInfo dans le champ UI Form.

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

Pas besoin de modifier le modèle field.html.