In this article I am going to explain how to re-use the Touch UI dialog tabs/fields. We already see that till now in AEM 5.6.1 version i.e., Classic UI we re-use the dialog tab by using xtype = cq:include by specifying the path i.e., ../path-of-the-tab/.infinity.json
For example, if you want to re-use the basic tab under page properties then you can do in the below way in Classic UI:
Now from AEM 6.x versions “xtype” property was replaced by sling:resourceType = granite/ui/components/foundation/include and following by specifying the path of the dialog tab i.e., ../path-of-the-tab and appending the .infinity.json is not required for Touch UI dialogs.
For example, if you want to re-use the basic tab under the page properties in your dialog, then you can do in the below way in Touch UI:ntent/items/tabs/items/basic
Illustration for re-using the dialog tabs in Touch UI:
As I said previously, if you want to re-use the dialog tab i.e., basic tab of Page properties under Out of the Box(OOTB) component, then you can do in the below way.
Here I created the Tab 2 i.e., Basic tab properties under the Hello world component and re-used the basic tab as shown below screenshot.
In the above illustration, if you want to re-use the tab, then create the tab called basic and create the node called basicTab under items for example: /apps/myHTL63/components/content/helloworld/cq:dialog/content/items/basic/items/column/items/basicTab and then add the below two properties to the basicTab node.
Below is the following output after re-using the dialog tab.
No related posts.
Myself Ratna Kumar, I am having 5.4 years of total IT experience and out of which 3 years of experience on AEM. I have worked on various versions of AEM i.e., CQ5.4, AEM 5.6.1, AEM 6.1 and AEM 6.2 versions. Also, I have vast experience in Java/J2EE technologies.
I am a quick learner and also used to help the community in Adobe HELPX and as well as in forums