UI Components

2. 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

3. 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

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

5. uiRegistry
define(['uiRegistry'], function (r) {
r.get('cmp’, function (c) {};); // sync
var p = reg.promise('cmp'); // async
p.done(function (c) {};);
});

6. component
UiRegistry
component a
component b
component c
(source)

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

8. Practice 1: Apply Filter
require(['uiRegistry'], function (reg) {
var c = reg.get('index=listing_filters');
c.setData({"email":”user_1@example.com"}).apply();
});

9. Practice 1: Apply Filter
require(['uiRegistry'], function (reg) {
var c = reg.get('index=customer_listing_data_source');
c.set('params.filters.email', ’user_2@example.com ');
});
does not work

10. 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', 'user_2@example.com');
});

11. Practice 2: Apply search filter
require(['uiRegistry'], function(r) {
r.async("index=fulltext") (function (c) {
c.set('value', 'keyword');
});
});

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

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

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

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

16. Practice 4 (see UiWorkshop module)
Adding
‘goToFirstPage’
and ‘goToLastPage’
buttons to pager

17. Practice 5 (see UiWorkshop module)
Disable ’save’ button
in inline editor
unless something
has changed

18. Practice 6 (see UiWorkshop module)
Improving keyboard
navigation on
Categories selection
tree