How does «data-form-part» element attribute work on an UI Compoment form submission

dmitry_fedyuk · February 2, 2016, 11:31pm

The data-form-part HTML element’s attribute allows you to include the element’s value to the data submitted to the server.

Examples from the core

github.com

magento/magento2/blob/c53d060/app/code/Magento/Catalog/view/adminhtml/templates/catalog/category/edit/assign_products.phtml#L14-L14


<input type="hidden" name="category_products" id="in_category_products" data-form-part="category_form" value="" />

github.com

magento/magento2/blob/c53d060/app/code/Magento/CatalogRule/Block/Adminhtml/Promo/Catalog/Edit/Tab/Conditions.php#L146-L156


$fieldset->addField(
    'conditions',
    'text',
    [
        'name' => 'conditions',
        'label' => __('Conditions'),
        'title' => __('Conditions'),
        'required' => true,
        'data-form-part' => 'catalog_rule_form'
    ]
)->setRule(

github.com

magento/magento2/blob/c53d060/app/code/Magento/Customer/Block/Adminhtml/Edit/Tab/Newsletter.php#L151-L160


$fieldset->addField(
    'subscription',
    'checkbox',
    [
        'label' => __('Subscribed to Newsletter'),
        'name' => 'subscription',
        'data-form-part' => $this->getData('target_form'),
        'onchange' => 'this.value = this.checked;'
    ]
);

github.com

magento/magento2/blob/c53d060/app/code/Magento/GoogleOptimizer/Helper/Form.php#L30-L42


$fieldset->addField(
    'experiment_script',
    'textarea',
    [
        'name' => 'experiment_script',
        'label' => __('Experiment Code'),
        'value' => $experimentCodeModel ? $experimentCodeModel->getExperimentScript() : '',
        'class' => 'textarea googleoptimizer',
        'required' => false,
        'note' => __('Experiment code should be added to the original page only.'),
        'data-form-part' => $formName
    ]
);

How does it work

github.com

magento/magento2/blob/c53d060/app/code/Magento/Ui/view/base/web/js/form/form.js#L61-L67


initConfig: function () {
    this._super();


    this.selector = '[data-form-part=' + this.namespace + ']';


    return this;
},

github.com

magento/magento2/blob/c53d060/app/code/Magento/Ui/view/base/web/js/form/form.js#L18-L35


items = Array.prototype.slice.call(items);


items.forEach(function (item) {
    switch (item.type) {
        case 'checkbox':
            result[item.name] = +!!item.checked;
            break;


        case 'radio':
            if (item.checked) {
                result[item.name] = item.value;
            }
            break;


        default:
            result[item.name] = item.value;
    }
});

github.com

magento/magento2/blob/c53d060/app/code/Magento/Ui/view/base/web/js/form/form.js#L90-L92


_.each(additional, function (value, name) {
    source.set('data.' + name, value);
});

data. is the data to be submitted:

github.com

magento/magento2/blob/c53d060/app/code/Magento/Ui/view/base/web/js/form/form.js#L94-L99


source.save({
    redirect: redirect,
    attributes: {
        id: this.namespace
    }
});