Hide AEM page tabs for specific page templates

[ViaVu]

Hi, our content authoring team would like to hide the following unused AEM page tabs for specific page templates.
Cloud Services
Permissions
Preview
Progressive Web App

Can you please recommend the best approach to accomplish this for AEM as a cloud service?
Also, please let me know if there is any risk in removing these tabs.

Will it break any existing functionality? If no, will this customization be impacted by future upgrades to the product?

Thanks!

[SantoshSai]

Hi @ViaVu,

Recommended Approach to Hide Tabs for specific page templates, use the editable templates framework and override the page properties dialog only under the template structure - this ensures the changes apply only to selected templates and are safe for upgrades.

You can also use a granite:rendercondition if you want to conditionally hide a tab rather than delete it. (Optional)

Will It break existing functionality?

No, it will not break existing functionality as long as:

• Your implementation does not rely on the removed tabs programmatically.

• Features like Cloud Services config, Permissions, or PWA support are not actively being used.

Will it be impacted by future AEMaaCS upgrades?

No, if you:

• Avoid overlaying /libs dialogs

• Make changes under /conf within the editable template structure

Adobe explicitly supports customizing cq:dialog under /conf for editable templates. This is considered an upgrade-safe and best practice approach.

General considerations before removal

• Check if any custom workflows or scripts depend on the data in these tabs (e.g., inherited cloud config paths).

• Ensure no components read page-level properties set via these tabs.

• If you're unsure about full usage, consider hiding the tab conditionally (e.g., using granite:rendercondition) rather than fully removing it.

Hope that helps!

[ViaVu]

Hi Santosh Sai,

Based on your suggestion, I would like to use the granite:rendercondition to conditionally hide unused AEM tabs.

Can you please point me to any online document that has sample implementation of hiding AEM tabs such as "Cloud Services" and/or "Progressive Web App" etc using granite:rendercondition? 

Thank you!

[SantoshSai]

@ViaVu 

To conditionally display or hide tabs in the Page Properties dialog based on the page template, follow these steps:​

1. Overlay the Dialog: Navigate to your editable template's structure and overlay the cq:dialog node if it doesn't already exist. This is typically located at:

   /conf/<your-site>/settings/wcm/templates/<your-template>/structure/jcr:content/cq:dialog

2. Identify the Tab to Hide: Within the dialog, locate the tab you wish to conditionally hide (e.g., cloudservices, pwa)​

3. Add granite:rendercondition: Under the tab node, add a granite:rendercondition node to specify the condition under which the tab should be displayed.​

Example: Hiding the "Cloud Services" tab for specific templates

Here's how you might configure the granite:rendercondition to hide the "Cloud Services" tab for templates other than /conf/my-site/settings/wcm/templates/landing-page:​

<cloudservices
    jcr:primaryType="nt:unstructured"
    jcr:title="Cloud Services"
    sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
    <granite:rendercondition
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/renderconditions/simple"
        expression="${requestPathInfo.suffix == '/conf/my-site/settings/wcm/templates/landing-page'}"/>
    <!-- Tab contents go here -->
</cloudservices>

In this example, the "Cloud Services" tab will only be displayed when the page being edited uses the specified template.

For more detailed guidance and examples, consider the following resources:

• https://blogs.perficient.com/2024/07/29/mastering-page-properties-with-granite-render-conditions-and...
• https://julkar-naim.com/aem/render-condition/
• ​https://www.linkedin.com/pulse/understanding-graniterendercondition-aem-deep-dive-experts-goyal-thgq...

[ViaVu]

@SantoshSai , thank you for the details and the links provided. It looks like I may need an OSGi service implementation as recommended in the blog, without which the Overlay the Dialog properties configuration would not work. Can you please confirm?

[SantoshSai]

@ViaVu - That's right!

[aanchal-sikka]

@ViaVu 

Option:-1:

You could also control it by defining multiple page components.

Each page component has its own cq:dialog. You can show or hide resources (Tabs) in this dialog. https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/implementing/dev...

Option-2: Control Tabs via Page policy

- Define properties in Design Mode of dialog where you configure which tabs to show or hide.

- On template, configure policy of the page component to show/hide

- Use these configs, to show/hide tabs 

Notice Step-5 & 6 on https://kiransg.com/2023/11/05/accessing-component-policies-in-aem-at-the-component-dialog-level/

[ViaVu]

@aanchal-sikka Not sure if this is applicable to AEMaaCS but I don't see /apps/core/wcm/components/....

Somehow I don't see core folder under my /apps folder in the CRXDE

However, thank you for your post. 

[aanchal-sikka]

@ViaVu 

We shouldn't be editing /apps/core/wcm/components/. I had just shared a snapshot from 6.5 for understanding.

You would need to extend the component in apps directory of your project. And then add configs to it for show/hide etc.

Please check once, you might already be extending page component in project-specific /apps directory

[ViaVu]

@aanchal-sikka yes, any updates under /apps should be part of the code base. Thank you!

[AmitVishwakarma]

Hi @ViaVu ,

Recommended & Upgrade-Safe Approach: Use granite:rendercondition

This lets you conditionally show/hide tabs in the Page Properties dialog based on template path without deleting or overlaying product code.

1.Go to your template's structure dialog:

/conf/your-site/settings/wcm/templates/<template-name>/structure/jcr:content/cq:dialog

2. Find the tab node to hide, like:

<cloudservices
    jcr:primaryType="nt:unstructured"
    jcr:title="Cloud Services"
    sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">

3. Add this under the tab node:

<granite:rendercondition
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/renderconditions/simple"
    expression="${requestPathInfo.suffix == '/conf/your-site/settings/wcm/templates/landing-page'}"/>

Replace the template path as needed.

Regards,
Amit

[ViaVu]

@AmitVishwakarma do you think it would work without a service or servlet implementation as suggested in this blog?  

[MatthewDa19]

@ViaVu LOL No way - his all answers are copy pasted from ChatGpt!

[ViaVu]

OK, good to know @MatthewDa19

[aanchal-sikka]

@ViaVu Did you find the suggestions helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!

[ViaVu]

@aanchal-sikka After doing some research, I was fortunate to find a doc that was referring to 

sling:hideChildren. After trying this configuration, it worked for hiding the tabs that I was trying to hide for specific page templates, except for preview on AEMaaCS environments. The same works fine on my local. The preview tab on AEMaaCS sets a preview URL and probably cannot be hidden. Not sure about the mystery behind why "preview" tab alone cannot be hidden in the cloud environment. I tried trouble shooting using the Developer Console / Repository Browser, however, I could not locate where the "preview" tab is coming from. I searched under libs, apps and config paths and could not locate "preview" tab. I could locate other tabs such as "cloudservices", "blueprint" and "livecopy" but not "preview".  If anyone can shed some insight into the mystery behind why "preview" tab cannot be hidden in AEMaaCS environment, that would be nice to know. Thank you!

[SantoshSai · Accepted solution]

@ViaVu 

Preview Tab Can’t Be Hidden

1. Preview Tab is Injected Dynamically by the Editor Framework
   The "Preview" tab isn't a typical child node under /libs or /apps like other page properties tabs. Instead, it's dynamically injected by the Page Editor Shell based on the editor context in AEMaaCS. That’s why:

   • It doesn’t appear in /libs/wcm/foundation/components/page/cq:dialog/... or similar places.

   • It’s not controlled by sling:hideChildren.

2. Cloud-Specific feature
   In AEMaaCS, the preview tab is part of the authoring experience enhancements provided by Adobe. It supports preview URLs that integrate with externalized domains (like preview publishers). This feature is tightly coupled with AEMaaCS environments and not present in the same way on local SDKs.

3. Cannot be hidden via sling:hideChildren
   Since it's not a child resource under the dialog node (i.e., not a node like tabs/preview), sling:hideChildren doesn't affect it. The tab is rendered based on editor config metadata or runtime context, not statically defined dialogs.

4. Why you can hide other tabs but not preview
   Tabs like cloudservices, blueprint, and livecopy exist as JCR nodes, so hiding them with sling:hideChildren works. Since Preview is UI-generated, it bypasses this mechanism.

[ViaVu]

@SantoshSai Thanks for the clarification.