What do "source" and "dataScope" mean in admin form Ui component configuraion file

Question

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>

Answer 1

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.

Answer 2

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