How to Re-use dialog tabs for Touch UI in AEM 6.x versions

 

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.

                                                                                re-usetab

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.

path:  foundation/components/page/cq:dialog/content/items/tabs/items/basic
sling:resourceType: granite/ui/components/foundation/include

Below is the following output after re-using the dialog tab.

                                                                                              basictabproperties