Kullanıcı arabirimi bileşenlerini kullanarak form alanının altına not ekleme

Ui bileşenlerini kullanarak Magento 2'deki bir alanın altına nasıl küçük bir metin ekleyebilirim? Bunu
kullanarak Magento\Framework\Data\Formyapabilirdim:

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

Yukarıdaki kod bunu üretir (alanın altındaki metne dikkat edin).

Form ui bileşenlerini kullanarak aynı şeyi nasıl başarabilirim?
Ben böyle tanımlanmış formu var:

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

Eklemeyi denedim <item name="note" xsi:type="string" translate="true">Some note here</item>ama, tahmin edin ne oldu?

Bunu aşağıdaki etiketi kullanarak yapabilirsiniz.

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

Ben bir uyarı nesnesinde render html almak nasıl anlamaya gerçekten sinir bozucu bir zaman geçirdim. Anladığım iki çözüm var. Bunun muhtemelen bir yorum olabileceğini biliyorum, ancak diğer insanların da bu işlevsellikle ilgileneceğini düşündüm.

1. Bildirimi metin yerine HTML olarak işleyen yeni bir html öğesi oluşturun

orijinal eleman şu adreste bulunabilir: /vendor/magento/module-ui/view/base/web/templates/form/field.html

Bunu modülünüze bir yol view/base/web/template/form/field-html-notice.htmlveya benzer bir yolla kopyalayın ( lütfen özel şablon dosyaları için kasıtlı ve gerekli templatesdizinin değiştirildiğini unutmayıntemplate )

Şimdi yeni field-html-alert.html dosyanızda, html $data.noticekullanarak yüklemek için html dosyasını değiştirebilir ve yayılma alanını tamamen atlayabilirsiniz. (elbette html'nizi çevirmek istiyorsanız, geçici bir çözüm bulmak için bu çözümü özelleştirmeniz gerekir)

Çözüm, bu şablonu alıp değiştirmek olacaktır

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

bunun gibi bir şeye bakmak için:

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

Bunu yapmak için zaman ayırdığımda, Magento ekibinin bize additionalInfohtml olarak işlenen ekleme yeteneğini verdiğini fark ettim .

2. Bir bileşen için ek bilgi olarak bildirim sınıfıyla bir div ekleyin

Çok daha yapışkan seçenek uyarı div additionalInfobölüm bölümünde render olması olacaktır . Çizgisinde bir şey

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

Yani evet, basit değil mi? İyi. Şimdi uyuyacağım.

(Eğer gerçek kullanırsanız xml validator kıracak unutmayın <ya >da ek bilgi karakterleri dolayısıyla <ve>

Not: <![CDATA[<p>cool paragraph man</p>]] html'nizi Teşekkürler @Marius'a sarabilirsiniz

Mevcut Magento 2 sürüm 2.2.8 ve 2.3.1, her ikisi de varsayılan olarak UI Form alanında html addInfo özelliğini destekler.

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

Field.html şablonunu değiştirmenize gerek yoktur.