How does a form submission work for an UI Component

dmitry_fedyuk · February 1, 2016, 5:09pm

The form UI Component does not have a <form> HTML tag, so the classic way for forms does not work.
How it works:

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


adapter.on({
    'reset': this.reset.bind(this),
    'save': this.save.bind(this, true),
    'saveAndContinue': this.save.bind(this, false),
    'saveAndApply': this.saveAndApply.bind(this, true)
});

github.com

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


save: function (redirect) {
    this.validate();


    if (!this.source.get('params.invalid')) {
        this.submit(redirect);
    }
},

github.com

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


/**
 * Validates each element and returns true, if all elements are valid.
 */
validate: function () {
    this.source.set('params.invalid', false);
    this.source.trigger('data.validate');
},

github.com

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


/**
 * Submits form
 */
submit: function (redirect) {
    var additional = collectData(this.selector),
        source = this.source;


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


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

github.com

magento/magento2/blob/c53d060/app/code/Magento/Ui/view/base/web/js/form/provider.js#L45-L57


/**
 * Saves currently available data.
 *
 * @param {Object} [options] - Addtitional request options.
 * @returns {Provider} Chainable.
 */
save: function (options) {
    var data = this.get('data');


    this.client.save(data, options);


    return this;
}

github.com

magento/magento2/blob/c53d060/app/code/Magento/Ui/view/base/web/js/form/client.js#L56-L66


/**
 * Assembles data and submits it using 'utils.submit' method
 */
save: function (data, options) {
    var url = this.urls.beforeSave,
        save = this._save.bind(this, data, options);


    beforeSave(data, url).then(save);


    return this;
},

github.com

magento/magento2/blob/c53d060/app/code/Magento/Ui/view/base/web/js/form/client.js#L13-L33


function beforeSave(data, url) {
    var save = $.Deferred();


    data = utils.serialize(data);


    data.form_key = window.FORM_KEY;


    if (!url) {
        save.resolve();
    }


    $('body').trigger('processStart');


    $.ajax({
        url: url,
        data: data,
        success: function (resp) {
            if (!resp.error) {
                save.resolve();
                return true;
            }

github.com

magento/magento2/blob/c53d060/app/code/Magento/Ui/view/base/web/js/form/client.js#L68-L83


_save: function (data, options) {
    var url = this.urls.save;


    options = options || {};


    if (!options.redirect) {
        url += 'back/edit';
    }


    utils.submit({
        url: url,
        data: data
    }, options.attributes);


    return this;
}

github.com

magento/magento2/blob/c53d060/lib/web/mage/utils/misc.js#L87-L93


/**
 * Serializes and sends data via POST request.
 *
 * @param {Object} options - Options object that consists of
 *      a 'url' and 'data' properties.
 */
submit: function (options, attrs) {

dmitry_fedyuk · February 1, 2016, 5:34pm