Magento 2 UI Components and using Imports, Exports and Links

If you are working with UI Componets in Magento 2 then you probably had situation where you want to update remote property in some other UI Component from local UI component property. In other words it is called linking property.

Magento 2 has three types of possible links to property:

  • imports
  • exports
  • links

We will explain it on next three example. For start we will have to create two UI components componentone and componenttwo.

For demonstration purposes we added two ui component to magento 2 checkout with layout xml file, example is below.

Our first component is below. You will notice that we defined (inside defaults) property “totala” with default value: 12, also we configured that “totala” property is observable (with key tracks inside defaults), also we set “imports” for local property “totala” to external UI Componnent “checkout.testchildtwo” and property “totalb“. In our case want that property “totala” to be updated when property “totalb” is changed or updated.

Name: checkout.testchildtwo is full name of second component. You can get component’s name if you call “this.name” inside component.

Example of second UI Component is below, in this component we defined property “totalb“. This property is also observable. On every change of property “totalb“, property “totala” in first component componentone will be updated.

Let assume that we want that property “totalb” to be updated when “totala” is changed. Then we have to define “exports” inside defaults in componentone. Below is our componnetone with local property “totala” and example with exports property. Inside exports key is name of local property (totala) and value contains remote component full name and remote property name (totalb).

Last options is links, if you define “links” then properties will update each other on every update. If property “this.totalb” is changed then “this.totala” will be updated also in opposite direction will work.

When you are defining object import, export or links syntax is next:
key:value
nameOfLocalProperty:’fullNameOfRemoteComponnet:nameOfRemoteProperty’.

Name of every ui component you can get if you inside component execute next code:

Inside initialize method we called “console.log(this.name)” and we get full name of component. I hope that example will be useful 😉 Enjoy in  Magento 2 coding…

You may also like...

Leave a Reply