Que signifient «source» et «dataScope» dans le fichier de configuration du composant interface utilisateur du formulaire d'administration

Il existe des nœuds source et dataScope dans la configuration des composants de l'interface utilisateur du formulaire d'administration Magento2. Que signifient-ils et comment sont-ils censés être utilisés?

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

Concernant le sourcenœud

La sourcevaleur du nœud correspond à une clé dans le tableau de données retourné par la \Magento\Framework\View\Element\UiComponent\DataProvider\DataProviderInterface::getDataméthode de votre composant d'interface utilisateur.

Par exemple, considérons l' interface utilisateur customer_form .
Fichier/Magento/Customer/view/base/ui_component/customer_form.xml

De là, vous pouvez voir que pour la plupart des champs, Magento utilise la customervaleur sous le sourcenœud.
Mais attendez, pour les champs sous le jeu de addresschamps, cette valeur a changé en address.

Voyons maintenant brièvement le DataProvider correspondant pour le composant UI customer_form .
La classe est \Magento\Customer\Model\Customer\DataProvider.

En gros, la méthode getDatade cette classe est responsable du retour des données qui sont remplies dans les champs correspondants déclarés par le composant customer_form .
Comme vous pouvez le deviner maintenant, la valeur client du sourcenœud nous dit d'utiliser la valeur stockée sous le client clé dans la getDataméthode, tandis que l' adresse source pointe vers les données stockées sous l' adresse clé dans les données retournées.

Regarder de plus près: <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>

Le champ ci - dessus prend sa valeur prenom à partir des données stockées sous la clé client retourné par le client DataProvider .

Dans le cas ci-dessous, la source de la valeur du prénom est les données stockées sous l' adresse clé : <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>

Concernant le dataScopenœud

Le dataScopenœud vous permet de modifier une valeur pour l' attribut name de votre entrée (champ), par exemple, l' <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> entrée de résultat sera rendue comme suit:<input name="field_name"...>

Vous pouvez également écrire les valeurs dans le dataScopenœud séparées par des points: customer.address.firstnamedans ce cas, l'entrée de résultat est rendue comme suit: <input name="customer[address][firstname]"...> Voici où la magie opère .

Le dataScopenœud modifie également le chemin de la valeur récupérée pour un champ. Ceci est réalisé au moyen de la technique de liaison .

cela signifie que ce que votre champ sera envoyé en POST comme votre valeur "dataScope", dans votre situation, par exemple, la demande de publication sera comme ['title'] => var