Conditionally add tabs to page properties based on te...

[akaria]

Hi everyone,

Is it possible to add customized tabs to page properties (in Sites console) based on templates?

• We are currently modernizing 'old' static templates to 'new' editable templates
• AEM version is 6.5.0
• Using Touch UI

For example:

• Create a new page named 'page1' with template 'A'
• Create a new page named 'page2' with template 'B'
• Create a new page named 'page3' with template 'C'
• Page properties of 'page1' show customized tabs specific to template 'A', along with default tabs from the page component (basic, advanced, thumbnail, etc)
• Page properties of 'page2' show only default tabs
• Page properties of 'page3' show customized tabs specific to template 'C'

Is it possible to implement this?

If it's possible, where should we place the nodes for the customized tabs?
Do we need to create a certain template type for this?

Thanks in advance

[Vaibhavi_J]

Hi @akaria , 

It is possible with custom implementation with hide/show the tabs. But you need an identifier to choose while creating the page as it is a single template and page properties has to behave differently with page creation.  

One of the custom solution would be

1. Create a template with page property dialog has all the possible option. 

2. Customize the page creation widget where you provide an option to choose the behavior. (For ex: if you have 3 different behaviour for pageA B and C, provide some dropdown to choose the behavior while creating the page) 

3. Depending upon the value selected from step2(you can set the identifier based on values) hide the unwanted tabs and show the required once. 

Hope this helps

[Suraj_Kamdi · Accepted solution]

Yes, we can @akaria .

1. create a template-specific component and provide resourceSuperType as the main page component. 

2. inside a template-specific component create separate page properties cq:dialog based on your requirement.

3. now next part go to the respective template structure inside /conf directory 

   ex. 

    a. /conf/<project-name>/settings/wcm/templates/sample-template/initial/jcr:content  and set resourceType as template specific component path 

   b. same applies for /conf/<project-name>/settings/wcm/templates/sample-template/structure/jcr:content.

Note: do not create any additional files inside template specific component other than page-properties dialog (cq:dialog)

Hope this will help.

Please let me know if you need more help on this.

[akaria]

Hi @Suraj_Kamdi , I tried out your solution, and it worked! Thank you so much!! I might come back for further questions if you don't mind

[Suraj_Kamdi]

@akaria Never mind .I am Happy to help

[kautuk_sahni]

@Suraj_Kamdi, Good to see you back in action. AEM Community miss super users like you. Keep doing the great work.

[Jaideep_Brar]

You can also look into Granite show/hide functionality that allows show/hide of content based on properties: https://experienceleague.adobe.com/docs/experience-manager-65/developing/components/hide-conditions....

[Subbu_WCM]

Hi @akaria 

you can use the granite render condition.

<tab1>
    <items></items>
    <granite:rendercondition  
          jcr:primaryType="nt:unstructured"  
         sling:resourceType="<project>/components/graniteConditions/hide-tab"  
         templates="[/conf/<project>/settings/wcm/templates/<template2>" />
</tab1>
<tab2>
    <items></items>
    <granite:rendercondition  
          jcr:primaryType="nt:unstructured"  
         sling:resourceType="<project>/components/graniteConditions/hide-tab"  
         templates="[/conf/<project>/settings/wcm/templates/<template1>" />
</tab2>

in your project  create hide-tab.html (<project>/components/graniteConditions/hide-tab/hide-tab.html) and call sling modal with Sling request adaptable. In the sling modal you check the template of page is listed in the templates property or not.Based that you can set the render condition attribute for the request. You can get the page path from the request query string

 slingHttpServletRequest.setAttribute(RenderCondition.class.getName(), new SimpleRenderCondition(true/false));