Mage Titans - Workshop - UI Components

Why async?

◉ Because of modularity of server side app:- data-mage-init- Layout XML declarations- UI Components XML declarations ◉ Asynchronous JavaScript modules loaders ◉ Many user interactions are asynchronous ◉ Performance considerations

How to maintain async?new MutationObserver ( function(mutations) { // array of MutationRecord });

Browser Chrome Firefox Internet Explorer Opera Safari

Starting from 18 14 11 15 6.0

UiComponent

define(['uiElement'], function (Element) { return Element.extend({…}); });

uiRegistry

define(['uiRegistry'], function (r) { r.get('cmp’, function (c) {};); // sync

var p = reg.promise('cmp'); // async

p.done(function (c) {};);});

component

UiRegistry

component a

component b

component c(source)

Practice 0: remote control

require(['uiRegistry'], function (reg) { var c = reg.get('index=customer_columns'); c.insertChild(c.getChild('name'), c.getChild('gender'));});

Practice 1: Apply Filter

require(['uiRegistry'], function (reg) { var c = reg.get('index=listing_filters'); c.setData({"email":”[email protected]"}).apply();});

Practice 1: Apply Filter

require(['uiRegistry'], function (reg) { var c = reg.get('index=customer_listing_data_source'); c.set('params.filters.email', ’[email protected] ');});

does not work

Practice 1: Apply Filter// hack filters.js (change “exports” to “links”)

require(['uiRegistry'], function (reg) { var c = reg.get('index=customer_listing_data_source'); c.set('params.filters.email', '[email protected]');});

Practice 2: Apply search filter

require(['uiRegistry'], function(r) { r.async("index=fulltext") (function (c) { c.set('value', 'keyword'); }); });

async.js

$.async(‘CSS selector’, function callback);

Practice 3: DOM modificationrequire( ['Magento_Ui/js/lib/view/utils/async'], function($) { $.async( 'span', function(dom) { dom.style.border='1px solid #ff0000'; } ); });

async.js$.async({…}, function callback);{ "component": 'cms_page_listing', "ctx": 'div', // CSS selector/Element "selector": 'span’ // CSS selector}

Practice 3: DOM modificationrequire( ['Magento_Ui/js/lib/view/utils/async'], function($) { $.async( { "component": "index=related_product_listing", "selector": "span" }, function(dom) { dom.style.border='1px solid #ff0000'; } ); });

Practice 4 (see UiWorkshop module)

Adding ‘goToFirstPage’ and

‘goToLastPage’ buttons to pager


Disable ’save’ button in inline editor

unless something has changed


Improving keyboard navigation on

Categories selection tree