Thêm ghi chú dưới trường biểu mẫu bằng các thành phần ui

Làm cách nào tôi có thể thêm một văn bản nhỏ dưới một trường trong Magento 2 bằng các thành phần ui.
Sử dụng Magento\Framework\Data\Formtôi có thể làm điều này:

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

Mã ở trên sẽ tạo ra điều này (chú ý văn bản dưới trường).

Làm thế nào tôi có thể đạt được điều tương tự bằng cách sử dụng mẫu ui-thành phần?
Tôi có mẫu được định nghĩa như thế này:

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

Tôi đã thử thêm <item name="note" xsi:type="string" translate="true">Some note here</item>nhưng, đoán xem?

Bạn có thể đạt được điều này bằng cách sử dụng thẻ sau.

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

Tôi đã có một thời gian thực sự khó chịu khi tìm ra cách để html để hiển thị trong một đối tượng thông báo. Có hai giải pháp tôi đã tìm ra. Tôi biết điều này có thể là một bình luận, nhưng tôi đoán người khác cũng sẽ quan tâm đến chức năng này.

1. Tạo một phần tử html mới hiển thị thông báo dưới dạng HTML thay vì văn bản

yếu tố ban đầu có thể được tìm thấy tại /vendor/magento/module-ui/view/base/web/templates/form/field.html

Sao chép nó vào mô-đun của bạn với một đường dẫn view/base/web/template/form/field-html-notice.htmlhoặc một cái gì đó tương tự ( xin lưu ý rằng templatesthư mục được thay đổi thành templateđó là cố ý và cần thiết cho các tệp mẫu tùy chỉnh )

Bây giờ trong tệp trường-html-notify.html mới của bạn, bạn có thể sửa đổi tệp html để tải $data.noticebằng cách sử dụng html và bỏ qua khoảng thời gian hoàn toàn. (tất nhiên nếu bạn đang muốn dịch html của mình, bạn sẽ cần tùy chỉnh giải pháp này để có một số cách giải quyết)

Giải pháp sẽ là lấy mẫu này và sửa đổi

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

để trông giống như thế này:

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

Khi tôi đã dành thời gian để làm điều đó, tôi nhận ra nhóm Magento đã thuận tiện cho chúng tôi khả năng thêm additionalInfođược hiển thị dưới dạng html.

2. Thêm một div với lớp thông báo dưới dạng thông tin bổ sung cho một thành phần

Tùy chọn khó khăn hơn nhiều sẽ có div thông báo kết xuất trong additionalInfophần. Một cái gì đó dọc theo dòng

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

Vì vậy, yeah, đơn giản phải không? Tốt. Tôi sẽ đi ngủ bây giờ

(xin lưu ý rằng trình xác nhận xml sẽ bị <hỏng nếu bạn sử dụng thực tế hoặc >ký tự trong thông tin bổ sung của mình, do đó <và>

Lưu ý: hóa ra bạn chỉ có thể gói html của mình trong <![CDATA[<p>cool paragraph man</p>]] Thanks @Marius

Cả hai phiên bản Magento 2 hiện tại 2.2.8 và 2.3.1 đều hỗ trợ htmlInInfo theo mặc định trong trường Mẫu UI.

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

Không cần sửa đổi trường.html.