Fügen Sie mithilfe von UI-Komponenten eine Notiz unter einem Formularfeld hinzu

Wie kann ich in Magento 2 mit Hilfe von UI-Komponenten einen kleinen Text unter ein Feld einfügen?
Mit Magento\Framework\Data\Formkönnte ich das machen:

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

Der obige Code würde dies erzeugen (beachten Sie den Text unter dem Feld).

Wie kann ich mit form ui-components dasselbe erreichen?
Ich habe die Form wie folgt definiert:

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

Ich habe versucht hinzuzufügen, <item name="note" xsi:type="string" translate="true">Some note here</item>aber weißt du was?

Dies erreichen Sie mit folgendem Tag.

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

Ich hatte eine wirklich nervige Zeit damit, herauszufinden, wie man HTML in einem Benachrichtigungsobjekt rendert. Es gab zwei Lösungen, die ich herausgefunden habe. Ich weiß, dass dies möglicherweise ein Kommentar sein könnte, aber ich nahm an, dass auch andere Leute an dieser Funktionalität interessiert sind.

1. Erstellen Sie ein neues HTML-Element, das die Notiz als HTML anstelle von Text darstellt

Das Originalelement finden Sie unter /vendor/magento/module-ui/view/base/web/templates/form/field.html

Kopieren Sie das in Ihr Modul mit einem Pfad von view/base/web/template/form/field-html-notice.htmloder ähnlichem ( beachten Sie, dass das templatesVerzeichnis, in das es geändert templatewird, beabsichtigt ist und für benutzerdefinierte Vorlagendateien erforderlich ist ).

Jetzt können Sie in Ihrer neuen Datei field-html-notice.html die HTML-Datei so ändern, dass sie die HTML-Datei lädt und die gesamte $data.noticeZeitspanne überspringt. (Wenn Sie Ihre HTML-Datei übersetzen möchten, müssen Sie diese Lösung natürlich anpassen, um Abhilfe zu schaffen.)

Die Lösung wäre, diese Vorlage zu nehmen und zu ändern

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

um etwas ähnlicher auszusehen:

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

Nachdem ich mir die Zeit dafür genommen hatte, stellte ich fest, dass das Magento-Team uns die Möglichkeit gegeben hat additionalInfo, HTML-Dateien hinzuzufügen .

2. Fügen Sie eine div mit der Bekanntmachungsklasse als zusätzliche Information für eine Komponente hinzu

Die viel klebrigere Option wäre, die Nachricht div in dem additionalInfoAbschnitt rendern zu lassen . Etwas in der Art von

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

Also ja, einfach, oder? Gut. Ich gehe jetzt schlafen.

(Bitte beachten Sie, dass der XML - Validator abbricht, wenn Sie die tatsächlichen <oder >Zeichen in Ihren zusätzlichen Informationen verwenden, daher das <und>

Hinweis: Es stellt sich heraus, dass Sie Ihre HTML- <![CDATA[<p>cool paragraph man</p>]] Datei einfach in Thanks @Marius einbinden können

Die aktuellen Magento 2-Versionen 2.2.8 und 2.3.1 unterstützen beide standardmäßig das HTML AdditionalInfo im UI-Formularfeld.

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

Die Vorlage field.html muss nicht geändert werden.