Magento 2 UI components dependency

In most cases you are working with more than one UI components. If you open Magento 2 checkout you will notice that checkout contains very big amount of UI components.

Very often one component depends to other component. For example if first UI component is using data from second UI component then first component should be initialized after second component.

How to achieve it you will see below.

Let’s assume that we have two ui components which are defined in checkout_index_index.xml layout file.

  • testchild
  • testchildtwo

If you want to load testchild component before testchildtwo then you should configure it in xml config node. Inside config node we have to define node <deps>. Deps node is array and can contains more that one component. In our case we defined only one component checkout.testchild.

Deps name must contain full component name, in our case it is: checkout.testchild. Our component depends to component checkout.testchild.

If you want to see how exactly UI component is loaded and initialized please check JavaScript file on location: magento_root/vendor/magento/module-ui/view/base/web/js/core/renderer/layout.js and take a look on method: initComponent.

Chunk of code from layout.js file is below and you will see logic from jquery promise object.


Enjoy in modifications of Magento 2 UI components 😉


You may also like...

Leave a Reply