Re-use properties as set of classes name in multiple components



I understand that is possible re-use tab in cq:dialog in multiple components, using sling:resourceType: granite/ui/components/foundation/include

For example:

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

My question is if is also possible to re-use the properties value also in multiple component in the HTL code?

For example in the re-usable tab, it will generate value for ${properties.item1}, ${properties.item2}, ${properties.item3}… up to item6 and in the component HTL, I will use to value as classes name eg <div class=“${properties.otherItemClass} ${properties.item1} ${properties.item2} ${properties.item3}”></div>

For the ease of maintenance, I want to re-use the same set of classes name for all the other component. Is there a way to achieve this? Is it possible to use data-sly-include for only classes name? Something like <div class=“${properties.otherItemClass} data-sly-include=“path/to/tabClassesName”“>Unique component HTL codes</div>

Thanks in advance.







If you want to reuse some field of dialog you can do it by using inheritance(sling:resourceSuperType). But in page you need to store value saparately until you don't write custom code to check and get value from other nodes.

If you want to use same value across the template, you can create design dialog instead dialog and get design dialog value inside any components.

Hope this would help.




Thanks for your quick response.

Since the component already has a reference to inheritance(sling:resourceSuperType), I could not use that.

The properties value will be independent per page so would not set it as design dialog.

Maybe I can use the same JS Use API as suggested in cq5 - Multiple properties from cq-dialog to dom template AEM - Stack Overflow ?