Dodaj notatkę pod polem formularza, używając komponentów interfejsu użytkownika

Jak mogę dodać mały tekst pod polem w Magento 2 przy użyciu komponentów interfejsu użytkownika.
Używając Magento\Framework\Data\Formmogę to zrobić:

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

Powyższy kod spowodowałby to (zauważ tekst pod polem).

Jak mogę osiągnąć to samo za pomocą elementów interfejsu użytkownika?
Mam formę zdefiniowaną w ten sposób:

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

Próbowałem dodać, <item name="note" xsi:type="string" translate="true">Some note here</item>ale zgadnij co?

Możesz to osiągnąć za pomocą następującego tagu.

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

Miałem naprawdę denerwujący czas, zastanawiając się, jak uzyskać HTML do renderowania w obiekcie zawiadomienia. Wymyśliłem dwa rozwiązania. Wiem, że to może być komentarz, ale pomyślałem, że inni ludzie również zainteresowaliby się tą funkcjonalnością.

1. Utwórz nowy element HTML, który wyświetla powiadomienie jako HTML zamiast tekstu

oryginalny element można znaleźć pod adresem /vendor/magento/module-ui/view/base/web/templates/form/field.html

Skopiuj to do modułu ze ścieżką view/base/web/template/form/field-html-notice.htmllub czymś podobnym ( pamiętaj, templatesże zmieniany katalog templatejest zamierzony i wymagany dla niestandardowych plików szablonów )

Teraz w nowym pliku field-html-notice.html możesz zmodyfikować plik html, aby załadować go $data.noticeza pomocą html i całkowicie pominąć zakres. (oczywiście jeśli chcesz przetłumaczyć kod HTML, musisz dostosować to rozwiązanie, aby uzyskać pewne obejście)

Rozwiązaniem byłoby wziąć ten szablon i zmodyfikować

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

wyglądać mniej więcej tak:

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

Gdy tylko poświęciłem trochę czasu, zdałem sobie sprawę, że zespół Magento dogodnie dał nam możliwość dodania, additionalInfoże jest renderowany jako HTML.

2. Dodaj div z klasą notice jako dodatkowe informacje dla komponentu

Dużo trudniejszą opcją byłoby renderowanie powiadomienia div w additionalInfosekcji. Coś w stylu

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

Więc tak, proste, prawda? Dobrze. Idę teraz spać.

(pamiętaj, że walidator xml ulegnie awarii, jeśli użyjesz rzeczywistych <lub >znaków w swoich dodatkowych informacjach, stąd <i>

Uwaga: okazuje się, że możesz po prostu owinąć swój <![CDATA[<p>cool paragraph man</p>]] plik HTML w Thanks @Marius

Obecne wersje 2.2.8 i 2.3.1 Magento 2 domyślnie obsługują HTML DodatkoweInfo w polu Formularza interfejsu użytkownika.

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

Nie trzeba modyfikować szablonu field.html.