Добавить заметку в поле формы с помощью компонентов пользовательского интерфейса


18

Как я могу добавить небольшой текст в поле в Magento 2, используя компоненты пользовательского интерфейса.
Используя Magento\Framework\Data\Formя мог сделать это:

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

Код выше будет производить это (обратите внимание на текст под полем).

Как я могу добиться того же, используя UI-компоненты формы?
У меня есть форма, определенная так:

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

Я пытался добавить, <item name="note" xsi:type="string" translate="true">Some note here</item>но, угадайте, что?

Ответы:


32

Вы можете добиться этого, используя следующий тег.

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

Благодарю. Оно работает. Я добавил translate="true"только для того, чтобы сделать так, чтобы сценарий для переводчика фраз был переведен.
Мариус

@Marius вы знаете, как использовать HTML-код в уведомлении?
Сергей Коржов

@SergeyKorzhov попробуй <item name="notice" xsi:type="string" translate="true"><![CDATA[Some note <a href="https://google.com">here</a>]]></item>
Мариус

@Marius я сделал, прежде чем спрашивать. не работает. Самое смешное, что html прекрасно работает в system.xml даже без CDATA.
Сергей Коржов

В этом уведомлении я должен дать динамические данные между сообщениями? Возможно ли это @Marius
Джайса

3

У меня было действительно раздражающее время, когда я выяснял, как заставить HTML отображаться в объекте уведомлений. Я нашел два решения. Я знаю, что это может быть комментарий, но я подумал, что другие люди будут заинтересованы в этой функциональности.

  1. Создайте новый HTML-элемент, который отображает уведомление в виде HTML вместо текста

оригинальный элемент можно найти на /vendor/magento/module-ui/view/base/web/templates/form/field.html

Скопируйте это в свой модуль с путем view/base/web/template/form/field-html-notice.htmlили чем-то похожим ( обратите внимание, templatesчто изменяемый каталог templateявляется намеренным и обязательным для пользовательских файлов шаблонов )

Теперь в вашем новом файле field-html-note.html вы можете изменить html-файл, чтобы загрузить html-файл $data.noticeи пропустить весь диапазон. (конечно, если вы хотите перевести html, вам нужно настроить это решение, чтобы найти обходной путь)

Решение было бы взять этот шаблон и изменить

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

выглядеть примерно так:

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

Как только я нашел время для этого, я понял, что команда Magento удобно дала нам возможность добавлять additionalInfoто, что отображается как html.

  1. Добавьте div с классом уведомлений в качестве дополнительной информации для компонента

Гораздо более сложным вариантом было бы сделать уведомление Div в additionalInfoразделе. Нечто подобное

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

Так что да, просто верно? Что ж. Я пойду спать сейчас.

(обратите внимание, что валидатор xml сломается, если вы используете фактические <или >символы в вашей дополнительной информации, следовательно, &lt;и&gt;

Примечание: оказывается, вы можете просто обернуть свой HTML в <![CDATA[<p>cool paragraph man</p>]] Спасибо @Marius


1
<item name = "AdditionalInfo" xsi: type = "string" translate = "true"> работает намного лучше, чем обратите внимание
CompactCode

<![CDATA[<p>cool paragraph man</p>]] Не работает под, messageно работает с additionalInfo mag.2.2.2
Джулиано Варгас

2

Текущая версия Magento 2 2.2.8 и 2.3.1 поддерживает html AdditionalInfo по умолчанию в поле UI Form.

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

Нет необходимости изменять шаблон field.html.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.