How to create a parent template and then two child templates?

[Vodjakxa]

the goal is to create a template with two tabs in the page properties and then create two template children of which one inherits both tabs, while the other child only inherits one tab. Possibly from code. I don't have the slightest idea how to do it, I can't find any resources that can help me do it from start to finish.

[Tethich · Accepted solution]

Hi @Vodjakxa 

Lets consider we have a Home page and a Contact page.

1. I believe what you can try to do is to create two editable templates first. Let's say template-home and template-contact.

2. Once the templates are in place and working, you can try to extend the ootb page.

3. Then create two structures that extend the custom page you just created. Let's call them page-home and page-contact

4. Then create two structures, one for each tab. Lets call them tab-common and tab-specific.

Your pages and structures will look something like:

Note: Please ignore their location. There are better practices about how to store them (organized in better folders, add versions, maybe in different project the ui.apps etc)

5. In each of the page structures include the tabs that you need:

6. Tabs structures can contain whatever elements you need. For this example I simply added two text fields :

7. Then final step is to go in the template definitions and refer the two new page structures you just created: page-home and page-contact

Please be aware that I have not tested this on my local. I just quickly sketched it on paper, just to underline the concept. I hope I haven't omitted anything.

[aanchal-sikka]

@Vodjakxa 

AEM does not support Template Inheritance. 

You would need to visit your use-case from perspective of Component Inheritance. 

Things to consider:

• If Tab-1 is to be used for all templates, Tab-2 is to be used on only 1 template? If yes,
  • extend OOTB page component (lets call it page-home component). Add tab-1 to page-home component
  • Extend page-home to create page-contact component. Add tab-2 to it.
  • Use page-home component in Template-1 & page-contact in Template-2
• If a tabs is not part of all templates, please use the approach of defining a common component to hold all such reusable tabs. And then include the reusable pieces in page-home / page-contact component as presented by @Tethich 

@Tethich has put in a lot of effort in presenting the details with screenshots. Thank you !

[VeenaVikraman]

@Vodjakxa As @aanchal-sikka  and @Tethich  mentioned you will have to create two separate templates . You can use the concept of Sling Resource Merger to show and hide what fields you need from the parent template.