page policies customization - adding new tabs | Community
Skip to main content
K
Kummari_DilipKu
Level 2
June 5, 2024
Solved

page policies customization - adding new tabs

  • June 5, 2024
  • 3 replies
  • 745 views

Hi All,

 

I had requirement to add the custom tags under head tag. what is best approach to maintain these  in AEM. 

As the tags changes for each page. please suggest.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by gkalyan

@kummari_dilipku 

You can override cq:dialog of your page component and add a new tab.

 

Refer to the documentation about sling resource merger

https://experienceleague.adobe.com/en/docs/experience-manager-65/content/implementing/developing/platform/sling-resource-merger

 

Here is a tutorial for customizing page properties 

https://experienceleague.adobe.com/en/docs/experience-manager-learn/sites/developing/page-properties-technical-video-develop

 

 

3 replies

gkalyan
Community Advisor and Adobe Champion
gkalyanCommunity Advisor and Adobe ChampionAccepted solution
Community Advisor and Adobe Champion
June 5, 2024

@kummari_dilipku 

You can override cq:dialog of your page component and add a new tab.

 

Refer to the documentation about sling resource merger

https://experienceleague.adobe.com/en/docs/experience-manager-65/content/implementing/developing/platform/sling-resource-merger

 

Here is a tutorial for customizing page properties 

https://experienceleague.adobe.com/en/docs/experience-manager-learn/sites/developing/page-properties-technical-video-develop

 

 

    HrishikeshKagne
    Community Advisor
    HrishikeshKagneCommunity Advisor
    Community Advisor
    June 6, 2024

    Hi @kummari_dilipku ,

    To manage custom tags under the <head> tag in Adobe Experience Manager (AEM) effectively, especially when the tags can vary for each page, you can use several approaches depending on your specific needs and the flexibility required. Here are some approaches you might consider:

    1. Page Properties and Template Configuration

    1. Custom Page Properties: Add a custom field in the page properties where authors can enter the custom tags. This can be achieved by extending the page properties dialog.

      • Steps:
        1. Create a new dialog for the page component.
        2. Add a text field or textarea field in the dialog to input custom tags.
        3. Use this input to inject the tags into the <head> section of the page.

    2. Template and Component Inheritance: Ensure that your templates and components can read these properties and render them in the <head> tag.

      • Steps:
        1. Modify the page component's HTML file (.html) to include a placeholder for custom tags.
        2. Use a Sling Model or a Use API class to fetch the custom tags from the page properties.
        3. Insert these tags into the <head> section of the page.

    2. Using AEM Context-Aware Configurations

    1. Context-Aware Configuration: This feature allows for defining configurations at different levels (site, page, etc.) and can be used to manage head tags.

      • Steps:
        1. Define a configuration that includes a field for custom head tags.
        2. Create a context-aware configuration specific to each page or section where the custom tags will differ.
        3. Use Sling Models or WCMUsePojo to read these configurations and inject them into the head section.

    3. Client Libraries and JavaScript

    1. Client Libraries: Use AEM's client library system to inject dynamic head content via JavaScript.

      • Steps:
        1. Create a client library that contains a JavaScript file.
        2. In the JavaScript file, read the custom tags from a data attribute or JSON object embedded in the page.
        3. Dynamically append these tags to the <head> section.

    4. Sling Dynamic Include (SDI)

    1. Sling Dynamic Include (SDI): Use SDI to dynamically include content in the head section.

      • Steps:
        1. Configure SDI to use specific selectors or resource types to include head tag content.
        2. Create a component that outputs the custom head tags based on the page properties.
        3. Ensure the component is invoked in the head section of your page templates.

    Example Implementation (Page Properties Approach)

    1. Extend Page Properties Dialog:

      • In your AEM project, add a new field in the page properties dialog.
      • For example, in the dialog XML

     

    <dialog> ... <items> <tab> <items> <customTags jcr:primaryType="cq:Widget" fieldLabel="Custom Head Tags" name="./customHeadTags" xtype="textarea"/> </items> </tab> </items> </dialog>

     

    2. Modify the Page Component HTML:

    • In your page component's HTML file (e.g., page.html), include a placeholder for custom head tags:

     

    <head> ... <meta charset="UTF-8"> <title>${properties.pageTitle}</title> ${properties.customHeadTags @ context='unsafe'} ... </head> ​

     

    Fetch Properties Using Sling Models:

    • Create a Sling Model to fetch the custom tags from page properties:
       

     

    @Model(adaptables = Resource.class) public class CustomHeadTagsModel { @ValueMapValue @Default(values = "") private String customHeadTags; public String getCustomHeadTags() { return customHeadTags; } }

     

    Include the Model in the HTML:

    • Use the model in the HTML file to render the custom tags:

     

    <head> ... <meta charset="UTF-8"> <title>${properties.pageTitle}</title> ${customHeadTagsModel.customHeadTags @ context='unsafe'} ... </head> ​

     

    By using these approaches, you can effectively manage custom head tags in AEM, providing flexibility for content authors to define tags on a per-page basis.


    Hrishikesh Kagane
      kautuk_sahni
      Community Manager
      kautuk_sahniCommunity Manager
      Community Manager
      June 10, 2024

      @kummari_dilipku Did you find the suggestions from users 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!

      Kautuk Sahni
      Terms & ConditionsAccessibility statement

      Loading footer...