Magento2 ui component in deep

mrtuvn

Tu Nguyen

Posted on February 3, 2020

Magento2 ui component in deep

From this tutorial i will show you how to get info from some main component in magento 2 by javascript

All components defined in below file
https://github.com/magento/magento2/blob/2.4-develop/app/code/Magento/Ui/view/base/ui_component/etc/definition.xml

If you work with components in magento you possible may related with uiregistry. This is ultility component allow you access to specific component.

Playground for work with component from browser

Go to product list page of magento in admin dashboard
Open chrome browser > Console tab

requirejs('uiRegistry').get('%componentName%');

componentName is string name of component.

1 Listing component

Source file
https://github.com/magento/magento2/blob/2.4-develop/app/code/Magento/Ui/view/base/web/js/grid/listing.js

There is alot place magento use this component such as: Product listing, Order listing, cms page listing

Example

var productrows = requirejs('uiRegistry').get('product_listing.product_listing.product_columns').rows

Above will return current object contain rows of products

[{product1},{product2},so on]

OR

var productrows = requirejs('uiRegistry').get('product_listing.product_listing_data_source').data['items']

var components = requirejs('uiRegistry').get('product_listing.product_listing.product_columns').elems()

2 Form component

Source file
https://github.com/magento/magento2/blob/2.4-develop/app/code/Magento/Ui/view/base/web/js/form/form.js

Continuing...

💖 💪 🙅 🚩
mrtuvn
Tu Nguyen

Posted on February 3, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Magento2 ui component in deep
magento2 Magento2 ui component in deep

February 3, 2020