UIコンポーネントを使用してフォームフィールドの下にメモを追加する


18

UIコンポーネントを使用して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>
マリウス

@マリウス私は尋ねる前にやった。動作しません。面白いことに、htmlはsystem.xmlでCDATAがなくても問題なく動作します。
セルゲイコルジョフ

この通知では、メッセージ間で動的データを提供しますか?これは可能ですか@Marius
Jaisa

3

通知オブジェクトでhtmlをレンダリングする方法を考え出すのは本当に面倒な時間でした。私が考え出した解決策は2つあります。これはコメントである可能性がありますが、他の人もこの機能に興味があると思いました。

  1. 通知をテキストではなくHTMLとしてレンダリングする新しいhtml要素を作成します

元の要素は /vendor/magento/module-ui/view/base/web/templates/form/field.html

パスview/base/web/template/form/field-html-notice.htmlまたは同様のものを使用してモジュールにコピーします(変更されるディレクトリは意図的であり、カスタムテンプレートファイルに必要であることに注意してくださいtemplatestemplate

これで、新しい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>

時間をかけて、MagentoチームがadditionalInfohtmlとしてレンダリングされる機能を追加できるので便利だとわかりました。

  1. コンポーネントの追加情報として、通知クラスを持つdivを追加します

もっとタッキーなオプションは、notice 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;

注:<![CDATA[<p>cool paragraph man</p>]] Thanks @MariusでHTMLをラップすることができます


1
<item name = "additionalInfo" xsi:type = "string" translate = "true">は、気付くよりもずっとよく機能します
-CompactCode

<![CDATA[<p>cool paragraph man</p>]] 下では動作しませんmessageが、additionalInfo mag.2.2.2 で動作します
Juliano Vargas

1

現在のMagento 2バージョン2.2.8および2.3.1は、どちらもデフォルトでUI Formフィールドでhtml additionalInfoをサポートしています。

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

field.htmlテンプレートを変更する必要はありません。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.