Magento 2 UI Component – Understanding ‘Source’ Items in UI Component Files

formsknockoutjsmagento2requirejsuicomponent

In Magento 2's UI Form Component configuration files, you'll often see a item attribute with the same of source — <item name="source" xsi:type="string">block</item> below.

#File: vendor/magento/module-cms/view/adminhtml/ui_component/cms_block_form.xml
<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">Block Title</item>
            <item name="formElement" xsi:type="string">input</item>
            <item name="source" xsi:type="string">block</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>

What are these fields for? I ask because it seems like they're not necessary. For example, the module in this GitHub repository configures a working UI Component form, but doesn't use these name="source" items.

Does anyone know what these name="source" items are for? I'm aware of the UI Component mechanic that takes the XML and cofigures it as x-magento-init JSON

"block_id": {
    "type": "form.input",
    "name": "block_id",
    "dataScope": "block_id",
    "config": {
        "component": "Magento_Ui\/js\/form\/element\/abstract",
        "template": "ui\/form\/field",
        "visible": false,
        "dataType": "text",
        "formElement": "input",
        "source": "block"
    }
},

Which is fed into a uiElement based Knockout view model object. However, it's not clear how the nested tree of uiElement based Knockout view model objects use these field level source fields.

If I look at the uiElement's initModules method

    initModules: function () {
        _.each(this.modules, function (name, property) {
            if (name) {
                this[property] = this.requestModule(name);
            }
        }, this);

        if (!_.isFunction(this.source)) {
            this.source = registry.get(this.provider);
        }

        return this;
    },

I see the object references a source property, and if its not set, will reach into the registry for an object using the provider property as a string/key identifier. It seems like the value of these source items isn't used. However, its possible that they're used by the PHP code, or some other javascript code. Hence, my question.

Best Answer

Went to "the source" (groan) for this one and it looks like these <item name="source"/> nodes are, indeed, redundant. Or, the Magento engineer currently in charge of them thinks they're redundant, so that's as close to truth as we'll get.

Related Topic