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

18

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?

Marius
źródło

Odpowiedzi:

32

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

<item name="notice" xsi:type="string" translate="true">Some note here</item>
Sohel Rana
źródło
Dzięki. To działa. Dodałem translate="true"tylko po to, aby tłumaczący skrypt kolekcjonera fraz mógł to również odebrać.
Marius
@Marius, czy wiesz, jak używać kodu HTML w powiadomieniu?
Sergey Korzhov,
@SergeyKorzhov try <item name="notice" xsi:type="string" translate="true"><![CDATA[Some note <a href="https://google.com">here</a>]]></item>
Marius
@Marius zrobiłem przed zapytaniem. nie działa. zabawne jest to, że HTML działa dobrze w system.xml nawet bez CDATA.
Sergey Korzhov,
Czy w tym zawiadomieniu mam podawać dynamiczne dane między wiadomościami? Czy to możliwe @Marius
Jaisa
3

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.

  1. 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 &lt;i&gt;

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

Nathaniel Rogers
źródło
1
<item name = "additionalInfo" xsi: type = "string" translate = "true"> działa o wiele lepiej niż zawiadomienie
CompactCode
<![CDATA[<p>cool paragraph man</p>]] Nie działa pod, messageale działa z additionalInfo mag.2.2.2
Juliano Vargas
2

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.

Milind Singh
źródło