Categories


Archives


Recent Posts


Categories


Where Backend UI Component Forms Get their Data

astorm

Frustrated by Magento? Then you’ll love Commerce Bug, the must have debugging extension for anyone using Magento. Whether you’re just starting out or you’re a seasoned pro, Commerce Bug will save you and your team hours everyday. Grab a copy and start working with Magento instead of against it.

Updated for Magento 2! No Frills Magento Layout is the only Magento front end book you'll ever need. Get your copy today!

In a typical adminhtml UI Form Component, each individual form element has a corresponding view model object. For text input fields, these view models come from the constructor function returned by the Magento_Ui/js/form/element/abstract RequireJS module.

The view model’s value property, an Knockout observable object, contains the field’s value.

This value property is set with the uiElement’s links feature.

#File: vendor/magento/module-ui/view/base/web/js/form/element/abstract.js
defaults: {
    /* ... */
    links: {
        value: '${ $.provider }:${ $.dataScope }'
    }            
}

The links default will set observable values on an object at the time of instantiation by pulling items from the uiRegistry. The above configuration sets the value property. The key it uses to pull values from the uiRegistry is created by the ES6 Template Literal String ${ $.provider }:${ $.dataScope }. The .provider property comes from UI Component XML configuration

<item name="js_config" xsi:type="array">
    <item name="provider" xsi:type="string">cms_page_form.page_form_data_source</item>
    <item name="deps" xsi:type="string">cms_page_form.page_form_data_source</item>
</item>

The child view models in a Magento_Ui/js/core/app application will (seems to?) inherit this provider value thanks to code in the Magento_Ui/js/core/renderer/layout.js module. The dataScope value also comes fromUI Component XML configuration

<item name="dataScope" xsi:type="string">title</item>

In out above example, the links.value` key has a value of

cms_page_form.page_form_data_source:data.title

The Magento_Ui/js/core/renderer/layout module manipulates the dataScope value on the view mode object to include parent values,

This is why dataScope expands to data.title instead of just title

#File: vendor/magento/module-ui/view/base/web/js/core/renderer/layout.js
function getDataScope(parent, node) {
    var dataScope = node.dataScope,
        parentScope = parent && parent.dataScope;

    return !utils.isEmpty(parentScope) ?
        !utils.isEmpty(dataScope) ?
            parentScope + '.' + dataScope :
            parentScope :
        dataScope || '';
}

This means value is populated with an observable whose initial value comes from

requirejs('uiRegistry').get('cms_page_form.page_form_data_source').data.title

Copyright © Alan Storm 1975 – 2019 All Rights Reserved

Originally Posted: 15th February 2017