15

There are source and dataScope nodes in Magento2 admin form UI component configuration. What do they mean and how are they supposed to be used?

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

Regarding the source node

The source node's value corresponds to a key in the data array returned by the \Magento\Framework\View\Element\UiComponent\DataProvider\DataProviderInterface::getData method of your UI component.


For example, let's consider the customer_form UI.
File /Magento/Customer/view/base/ui_component/customer_form.xml

From here you can see that for most of the fields Magento uses the customer value under the source node.
But wait, for the fields under the address fieldset this value has changed to the address.

Now let's take a brief look at the corresponding DataProvider for the customer_form UI component.
The class is \Magento\Customer\Model\Customer\DataProvider.

Roughly, the method getData of this class is responsible for returning data that is populated to the corresponding fields declared by the customer_form component.
As you can guess now, the customer value of the source node tells us to use the value stored under the key customer in the getData method, while the address source points to the data stored under the key address in the returned data.

Closer look: <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>

The field above takes its firstname value from the data stored under the key customer returned by the customer's DataProvider.

While in the case below, the source of the firstname value is the data stored under the key address: <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>


Regarding the dataScope node

The dataScope node allows you to change a value for the name attribute of your input (field), e.g., <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> The result input will be rendered as follows: <input name="field_name"...>

You can also write the values into the dataScope node separated by dots: customer.address.firstname, in this case the result input rendered as follows: <input name="customer[address][firstname]"...> Here is where the magic happens.

Also the dataScope node changes the path of the retrieved value for a field. This is achieved by means of the linking technique.

1
  • omg all I want is a datepicker LOL, gotta love Magento 😐
    – 00-BBB
    Mar 11 at 16:14
1

this is mean what your field will be sent in POST like your "dataScope" value, in your situation for example post request will be like ['title'] => var

1
  • You missed one question. What's the meaning of source? If it is datasource, why the argument is page, not page_listing_data_source?
    – Key Shang
    Sep 29 '17 at 2:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.