How to create an UI component dynamically?

dmitry_fedyuk · April 22, 2018, 6:46am

Examples

1.

magento/magento2/blob/2.2.3/app/code/Magento/Catalog/view/base/web/js/product/list/columns/price-box.js#L112-L129


/**
 * Init price type box, in cases when product type has custom component or bodyTmpl
 *
 * @param {String} productType
 * @private
 */
_initPriceWithCustomMetaData: function (productType) {
    var price = this._deepObjectExtend(
        this.renders.prices['default'],
        this.renders.prices[productType]
    );


    price.name = productType + '.default';
    price.parent = this.name;
    price.source = this.source;
    price.productType = productType;
    layout([price]);
},

2.

github.com

magento/magento2/blob/2.2.3/app/code/Magento/Catalog/view/base/web/js/product/list/columns/price-box.js#L131-L157


/**
 * Init Prices by product type and add them to layout
 *
 * @param {Array} _priceData
 * @param {String} productType
 * @private
 */
_initPricesForProductType: function (_priceData, productType) {
    var prices = [];


    this._setPriceNamesToPrices(_priceData, productType);
    _.sortBy(_priceData, this._comparePrices);


    _.each(_priceData, function (priceData) {
        if (!priceData.component) {
            return;
        }


        priceData.parent = this.name;
        priceData.provider = this.provider;
        priceData.productType = productType;
        priceData = utils.template(priceData, this);
        prices.push(priceData);
    }, this);


    layout(prices);
},

3. Magento_Ui/js/view/messages

github.com

magento/magento2/blob/2.2.3/app/code/Magento/Checkout/view/frontend/web/js/view/payment/default.js#L104-L124


/**
 * Create child message renderer component
 *
 * @returns {Component} Chainable.
 */
createMessagesComponent: function () {


    var messagesComponent = {
        parent: this.name,
        name: this.name + '.messages',
        displayArea: 'messages',
        component: 'Magento_Ui/js/view/messages',
        config: {
            messageContainer: this.messageContainer
        }
    };


    layout([messagesComponent]);


    return this;
},

How is the Magento_Ui/js/view/messages UI component used?

4.

github.com

magento/magento2/blob/2.2.3/app/code/Magento/Checkout/view/frontend/web/js/view/payment/list.js#L67-L78


/**
 * Creates default group
 *
 * @returns {Component} Chainable.
 */
initDefaulGroup: function () {
    layout([
        this.configDefaultGroup
    ]);


    return this;
},

5.

github.com

magento/magento2/blob/2.2.3/app/code/Magento/Checkout/view/frontend/web/js/view/payment/list.js#L122-L161


/**
 * Create renderer.
 *
 * @param {Object} paymentMethodData
 */
createRenderer: function (paymentMethodData) {
    var isRendererForMethod = false,
        currentGroup;


    registry.get(this.configDefaultGroup.name, function (defaultGroup) {
        _.each(rendererList(), function (renderer) {


            if (renderer.hasOwnProperty('typeComparatorCallback') &&
                typeof renderer.typeComparatorCallback == 'function'
            ) {
                isRendererForMethod = renderer.typeComparatorCallback(renderer.type, paymentMethodData.method);
            } else {
                isRendererForMethod = renderer.type === paymentMethodData.method;
            }


            if (isRendererForMethod) {
                currentGroup = renderer.group ? renderer.group : defaultGroup;


                this.collectPaymentGroups(currentGroup);


                layout([
                    this.createComponent(
                        {
                            config: renderer.config,
                            component: renderer.component,
                            name: renderer.type,
                            method: paymentMethodData.method,
                            item: paymentMethodData,
                            displayArea: currentGroup.displayArea
                        }
                    )]);
            }
        }.bind(this));
    }.bind(this));
},

6.

github.com

magento/magento2/blob/2.2.3/app/code/Magento/Checkout/view/frontend/web/js/view/shipping-address/list.js#L66-L93


/**
 * Create new component that will render given address in the address list
 *
 * @param {Object} address
 * @param {*} index
 */
createRendererComponent: function (address, index) {
    var rendererTemplate, templateData, rendererComponent;


    if (index in this.rendererComponents) {
        this.rendererComponents[index].address(address);
    } else {
        // rendererTemplates are provided via layout
        rendererTemplate = address.getType() != undefined && this.rendererTemplates[address.getType()] != undefined ? //eslint-disable-line
            utils.extend({}, defaultRendererTemplate, this.rendererTemplates[address.getType()]) :
            defaultRendererTemplate;
        templateData = {
            parentName: this.name,
            name: index
        };
        rendererComponent = utils.template(rendererTemplate, templateData);
        utils.extend(rendererComponent, {
            address: ko.observable(address)
        });
        layout([rendererComponent]);
        this.rendererComponents[index] = rendererComponent;
    }
}

7.

github.com

magento/magento2/blob/2.2.3/app/code/Magento/Checkout/view/frontend/web/js/view/shipping-information/list.js#L56-L92


/**
 * Create new component that will render given address in the address list
 *
 * @param {Object} address
 */
createRendererComponent: function (address) {
    var rendererTemplate, templateData, rendererComponent;


    $.each(this.rendererComponents, function (index, component) {
        component.visible(false);
    });


    if (this.rendererComponents[address.getType()]) {
        this.rendererComponents[address.getType()].address(address);
        this.rendererComponents[address.getType()].visible(true);
    } else {
        // rendererTemplates are provided via layout
        rendererTemplate = address.getType() != undefined && this.rendererTemplates[address.getType()] != undefined ? //eslint-disable-line
            utils.extend({}, defaultRendererTemplate, this.rendererTemplates[address.getType()]) :
            defaultRendererTemplate;
        templateData = {
            parentName: this.name,
            name: address.getType()
        };


        rendererComponent = utils.template(rendererTemplate, templateData);
        utils.extend(
            rendererComponent,
            {
                address: ko.observable(address),
                visible: ko.observable(true)
            }
        );
        layout([rendererComponent]);
        this.rendererComponents[address.getType()] = rendererComponent;
    }
}

8.

github.com

magento/magento2/blob/2.2.3/app/code/Magento/Ui/view/base/web/js/core/app.js#L5-L16


define([
'./renderer/types',
'./renderer/layout',
'../lib/knockout/bootstrap'
], function (types, layout) {
'use strict';


return function (data, merge) {
    types.set(data.types);
    layout(data.components, undefined, true, merge);
};
});

9.

github.com

magento/magento2/blob/2.2.3/app/code/Magento/Ui/view/base/web/js/dynamic-rows/dynamic-rows.js#L214-L225


/**
 * Inits DND module
 *
 * @returns {Object} Chainable.
 */
initDnd: function () {
    if (this.dndConfig.enabled) {
        layout([this.dndConfig]);
    }


    return this;
},

10.

github.com

magento/magento2/blob/2.2.3/app/code/Magento/Ui/view/base/web/js/dynamic-rows/dynamic-rows.js#L1078-L1106


/**
 * Add child components
 *
 * @param {Object} data - component data
 * @param {Number} index - record(row) index
 * @param {Number|String} prop - custom identify property
 *
 * @returns {Object} Chainable.
 */
addChild: function (data, index, prop) {
    var template = this.templates.record,
        child;


    index = index || _.isNumber(index) ? index : this.recordData().length;
    prop = prop || _.isNumber(prop) ? prop : index;


    _.extend(this.templates.record, {
        recordId: prop
    });


    child = utils.template(template, {
        collection: this,
        index: index
    });


    layout([child]);


    return this;
},

11.

github.com

magento/magento2/blob/2.2.3/app/code/Magento/Ui/view/base/web/js/form/components/button.js#L82-L100


/**
 * Create target component from template
 *
 * @param {Object} targetName - name of component,
 * that supposed to be a template and need to be initialized
 */
getFromTemplate: function (targetName) {
    var parentName = targetName.split('.'),
        index = parentName.pop(),
        child;


    parentName = parentName.join('.');
    child = utils.template({
        parent: parentName,
        name: index,
        nodeTemplate: targetName
    });
    layout([child]);
},

12.

github.com

magento/magento2/blob/2.2.3/app/code/Magento/Ui/view/base/web/js/form/components/collection.js#L76-L91


/**
 * Creates new item of collection, based on incoming 'index'.
 * If not passed creates one with 'new_' prefix.
 *
 * @param {String|Object} [index] - Index of a child.
 * @returns {Collection} Chainable.
 */
addChild: function (index) {
    this.childIndex = !_.isString(index) ?
        'new_' + this.lastIndex++ :
        index;


    layout([utils.template(childTemplate, this)]);


    return this;
},

13.

github.com

magento/magento2/blob/2.2.3/app/code/Magento/Ui/view/base/web/js/form/element/abstract.js#L137-L148


/**
 * Initializes switcher element instance.
 *
 * @returns {Abstract} Chainable.
 */
initSwitcher: function () {
    if (this.switcherConfig.enabled) {
        layout([this.switcherConfig]);
    }


    return this;
},

14.

github.com

magento/magento2/blob/2.2.3/app/code/Magento/Ui/view/base/web/js/form/element/select.js#L169-L178


/**
 * Creates input from template, renders it via renderer.
 *
 * @returns {Object} Chainable.
 */
initInput: function () {
    layout([utils.template(inputNode, this)]);


    return this;
},

15. (since Magento 2.3)

github.com

magento/magento2/blob/782bc0eb/app/code/Magento/Ui/view/base/web/js/form/element/url-input.js#L127-L143


/**
 * Create child component by value
 *
 * @param {String} value
 * @return void
 */
createChildUrlInputComponent: function (value) {
    var elementConfig;


    if (!_.isEmpty(value) && _.isUndefined(this.linkedElementInstances[value])) {
        elementConfig = this.urlTypes[value];
        layout([elementConfig]);
        this.linkedElementInstances[value] = this.requestModule(elementConfig.name);
    }
    this.linkedElement = this.linkedElementInstances[value];


},

Magento 2.3 includes a new urlInput UI Component since 2018-03-19.

16.

github.com

magento/magento2/blob/2.2.3/app/code/Magento/Ui/view/base/web/js/grid/listing.js#L109-L120


/**
 * Creates drag&drop widget instance.
 *
 * @returns {Listing} Chainable.
 */
initDnd: function () {
    if (this.dndConfig.enabled) {
        layout([this.dndConfig]);
    }


    return this;
},

17.

github.com

magento/magento2/blob/2.2.3/app/code/Magento/Ui/view/base/web/js/grid/listing.js#L122-L133


/**
 * Initializes resize component.
 *
 * @returns {Listing} Chainable.
 */
initResize: function () {
    if (this.resizeConfig.enabled) {
        layout([this.resizeConfig]);
    }


    return this;
},

18.

github.com

magento/magento2/blob/2.2.3/app/code/Magento/Ui/view/base/web/js/grid/listing.js#L135-L146


/**
 * Creates inline editing component.
 *
 * @returns {Listing} Chainable.
 */
initEditor: function () {
    if (this.editorConfig.enabled) {
        layout([this.editorConfig]);
    }


    return this;
},

19.

github.com

magento/magento2/blob/2.2.3/app/code/Magento/Ui/view/base/web/js/grid/provider.js#L60-L69


/**
 * Initializes storage component.
 *
 * @returns {Provider} Chainable.
 */
initStorage: function () {
    layout([this.storageConfig]);


    return this;
},

20.

github.com

magento/magento2/blob/2.2.3/app/code/Magento/Ui/view/base/web/js/grid/controls/bookmarks/bookmarks.js#L87-L96


/**
 * Creates custom storage instance.
 *
 * @returns {Bookmarks} Chainable.
 */
initStorage: function () {
    layout([this.storageConfig]);


    return this;
},

21.

github.com

magento/magento2/blob/2.2.3/app/code/Magento/Ui/view/base/web/js/grid/editing/editor.js#L116-L127


/**
 * Initializes bulk editing component.
 *
 * @returns {Editor} Chainable.
 */
initBulk: function () {
    if (this.bulkEnabled) {
        layout([this.bulkConfig]);
    }


    return this;
},

22.

github.com

magento/magento2/blob/2.2.3/app/code/Magento/Ui/view/base/web/js/grid/editing/editor.js#L129-L138


/**
 * Initializes editors' view component.
 *
 * @returns {Editor} Chainable.
 */
initView: function () {
    layout([this.viewConfig]);


    return this;
},

23.

github.com

magento/magento2/blob/2.2.3/app/code/Magento/Ui/view/base/web/js/grid/editing/editor.js#L140-L149


/**
 * Initializes client component.
 *
 * @returns {Editor} Chainable.
 */
initClient: function () {
    layout([this.clientConfig]);


    return this;
},

24.

github.com

magento/magento2/blob/2.2.3/app/code/Magento/Ui/view/base/web/js/grid/editing/editor.js#L151-L164


/**
 * Creates instance of a new record.
 *
 * @param {(Number|String)} id - See 'getId' method.
 * @param {Boolean} [isIndex=false] - See 'getId' method.
 * @returns {Editor} Chainable.
 */
initRecord: function (id, isIndex) {
    var record = this.buildRecord(id, isIndex);


    layout([record]);


    return this;
},

25.

github.com

magento/magento2/blob/2.2.3/app/code/Magento/Ui/view/base/web/js/grid/editing/record.js#L102-L114


/**
 * Creates new instance of a field.
 *
 * @param {Column} column - Column instance which contains field definition.
 * @returns {Record} Chainable.
 */
initField: function (column) {
    var field = this.buildField(column);


    layout([field]);


    return this;
},

26.

github.com

magento/magento2/blob/2.2.3/app/code/Magento/Ui/view/base/web/js/grid/filters/filters.js#L148-L159


/**
 * Initializes chips component.
 *
 * @returns {Filters} Chainable.
 */
initChips: function () {
    layout([this.chipsConfig]);


    this.chips('insertChild', this.name);


    return this;
},

27.

github.com

magento/magento2/blob/2.2.3/app/code/Magento/Ui/view/base/web/js/grid/filters/filters.js#L233-L255


/**
 * Creates instance of a filter associated with the provided column.
 *
 * @param {Column} column - Column component for which to create a filter.
 * @returns {Filters} Chainable.
 */
addFilter: function (column) {
    var index       = column.index,
        processed   = this._processed,
        filter;


    if (!column.filter || _.contains(processed, index)) {
        return this;
    }


    filter = this.buildFilter(column);


    processed.push(index);


    layout([filter]);


    return this;
},

28.

github.com

magento/magento2/blob/2.2.3/app/code/Magento/Ui/view/base/web/js/grid/filters/range.js#L60-L71


/**
 * Creates instances of child components.
 *
 * @returns {Range} Chainable.
 */
initChildren: function () {
    var children = this.buildChildren();


    layout(children);


    return this;
},

29.

github.com

magento/magento2/blob/2.2.3/app/code/Magento/Ui/view/base/web/js/grid/paging/paging.js#L105-L114


/**
 * Initializes sizes component.
 *
 * @returns {Paging} Chainable.
 */
initSizes: function () {
    layout([this.sizesConfig]);


    return this;
},

30.

github.com

magento/magento2/blob/2.2.3/app/code/Magento/Ui/view/base/web/js/timeline/timeline.js#L91-L100


/**
 * Initializes TimelineView component.
 *
 * @returns {Timeline} Chainable.
 */
initView: function () {
    layout([this.viewConfig]);


    return this;
},

31. Magento_Checkout/js/model/payment/method-group

github.com

magento/magento2/blob/2.2.3/app/code/Magento/Vault/view/frontend/web/js/view/payment/vault.js#L19-L24


layout([{
    name: vaultGroupName,
    component: 'Magento_Checkout/js/model/payment/method-group',
    alias: 'vault',
    sortOrder: 10
}]);

dmitry_fedyuk · April 22, 2018, 7:24am