เพิ่มบันทึกย่อภายใต้เขตข้อมูลฟอร์มโดยใช้ส่วนประกอบ UI

ฉันจะเพิ่มข้อความเล็ก ๆ ใต้ฟิลด์ใน Magento 2 โดยใช้ส่วนประกอบ ui ได้อย่างไร
ใช้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-form
ฉันมีแบบฟอร์มที่กำหนดไว้เช่นนี้:

<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>แต่เดาอะไร

คุณสามารถทำได้โดยใช้แท็กต่อไปนี้

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

ฉันมีเวลาที่น่ารำคาญจริง ๆ หาวิธีการรับ 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-notice.html ใหม่ของคุณคุณสามารถแก้ไขไฟล์ html เพื่อโหลดการ$data.noticeใช้ html และข้ามช่วงทั้งหมด (แน่นอนถ้าคุณต้องการแปล 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>

เมื่อฉันใช้เวลาในการทำเช่นนั้นฉันก็ตระหนักว่าทีมงานวีโอไอพีนั้นให้ความสะดวกแก่เราในการเพิ่มadditionalInfoที่แสดงเป็น html

2. เพิ่ม div ด้วยคลาสประกาศเพื่อเป็นข้อมูลเพิ่มเติมสำหรับส่วนประกอบ

ตัวเลือกที่ tackier มากจะให้ 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 จะแตกถ้าคุณใช้ตัวจริง<หรือ>ตัวละครในข้อมูลเพิ่มเติมของคุณด้วยเหตุนี้<และ>

หมายเหตุ: ปรากฎว่าคุณสามารถห่อ html ของคุณใน<![CDATA[<p>cool paragraph man</p>]] Thanks @Marius

Magento 2 เวอร์ชันปัจจุบัน 2.2.8 และ 2.3.1 ทั้งคู่รองรับ html เพิ่มเติมInfoตามค่าเริ่มต้นในฟิลด์ฟอร์ม UI

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

ไม่จำเป็นต้องแก้ไขเทมเพลต field.html