管理フォームでの「ソース」と「dataScope」の意味は何ですかUiコンポーネント構成ファイル


11

あり、ソースdataScopeには Magento2管理フォームUIコンポーネントの構成のノードが。それらは何を意味し、どのように使用されることになっていますか?

<field name="title">
    <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">Page Title</item>
            <item name="formElement" xsi:type="string">input</item>
            <item name="source" xsi:type="string">page</item>
            <item name="sortOrder" xsi:type="number">20</item>
            <item name="dataScope" xsi:type="string">title</item>
            <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">true</item>
            </item>
        </item>
    </argument>
</field>

回答:


20

sourceノードについて

source返されたデータ配列のキーにノードの値が対応する\Magento\Framework\View\Element\UiComponent\DataProvider\DataProviderInterface::getDataあなたのUIコンポーネントの方法。


たとえば、customer_form UIを考えてみましょう。
ファイル/Magento/Customer/view/base/ui_component/customer_form.xml

ここから、ほとんどのフィールドでMagento customersourceノードの下の値を使用していることがわかります。
ただし、フィールドaddressセットの下のフィールドについては、この値がに変更されますaddress

次に、customer_form UIコンポーネントに対応するDataProviderを簡単に見てみましょう。 クラスはです。
\Magento\Customer\Model\Customer\DataProvider

おおまかに言って、getDataこのクラスのメソッドは、customer_formコンポーネントによって宣言された対応するフィールドに入力されるデータを返します。
あなたは今推測できるとおり、顧客の値sourceノードは、キーの下に格納された値を使用することを教えてくれる顧客getDataしながら、方法をアドレス sourceキーの下に格納されたデータへのポイントアドレス返されたデータインチ

よく見る: <field name="firstname" formElement="input"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> item name="source" xsi:type="string">customer</item> </item> </argument> </field>

上記のフィールドは、顧客のDataProviderによって返されたキー顧客の下に保存されたデータからその名の値を取得します。

以下の場合、firstname値のソースは、キーアドレスの下に保存されたデータです。 <field name="firstname" formElement="input"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="source" xsi:type="string">address</item> </item> </argument> </field>


dataScopeノードについて

dataScopeノードは、あなたがのために値を変更することができます名前など、あなたの入力(フィールド)の属性を、 <field name="title"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="dataType" xsi:type="string">text</item> <item name="formElement" xsi:type="string">input</item <item name="dataScope" xsi:type="string">field_name</item> </item> </argument> </field> 次のように結果の入力がレンダリングされます。<input name="field_name"...>

dataScopeドットで区切られたノードに値を書き込むこともできます。customer.address.firstnameこの場合、結果の入力は次のようにレンダリングされます。<input name="customer[address][firstname]"...> ここで魔法が起こります。

また、dataScopeノードはフィールドの取得値のパスを変更します。これは、リンク手法によって実現されます。


1

これは、「dataScope」値のようにPOSTでフィールドが送信されることを意味します。たとえば、リクエストの投稿は次のようになります。 ['title'] => var


あなたは1つの質問を逃しました。ソースの意味は何ですか?それがデータソースである場合、引数がpage_listing_data_sourceではなくpageである理由はですか?
Key Shang、
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.