Expand my Community achievements bar.

July 31st AEM Gems Webinar: Elevate your AEM development to master the integration of private GitHub repositories within AEM Cloud Manager.
SOLVED

How to customize Deeplinks for AEM tabs

Avatar

Level 2

Hi,

 

How can I customize the deeplinks for tabs in java? Instead of the auto generated id, I would like to make it more a meaningful to my current use case. Any code snippet or examples would help. Thank you

1 Accepted Solution

Avatar

Correct answer by
Level 2

For those who are wondering, this is the exact thing I needed. Check this forum post

View solution in original post

3 Replies

Avatar

Level 10

Hi @zmdeluyas ,

To customize deep links for tabs in Adobe Experience Manager (AEM), you typically need to work with Java and the Sling framework. Deep links in AEM are often handled through selectors, and you can customize them by creating components and using Sling Models. Below is a step-by-step guide on how to create customized deep links for tabs in AEM:

Step 1: Create a Custom Component for Tabs

  1. Create the Component Structure:

    • Create a new component in your AEM project, for example, under /apps/myproject/components/tabs.
    • Within this folder, create the necessary files like tabs.html, tabs.js, and tabs.css.
  2. Define the Component HTML (tabs.html):

 

<div class="tabs-component">
    <ul class="tabs">
        <li><a href="#tab1" data-deeplink="custom-tab-1">Tab 1</a></li>
        <li><a href="#tab2" data-deeplink="custom-tab-2">Tab 2</a></li>
        <li><a href="#tab3" data-deeplink="custom-tab-3">Tab 3</a></li>
    </ul>
    <div id="tab1" class="tab-content">Content for Tab 1</div>
    <div id="tab2" class="tab-content">Content for Tab 2</div>
    <div id="tab3" class="tab-content">Content for Tab 3</div>
</div>

 

JavaScript to Handle Deep Links (tabs.js):

 

document.addEventListener("DOMContentLoaded", function() {
    const tabs = document.querySelectorAll('.tabs a');
    const tabContents = document.querySelectorAll('.tab-content');
    
    function showTab(deeplink) {
        tabContents.forEach(content => {
            content.style.display = 'none';
        });
        const activeTab = document.querySelector(`#${deeplink}`);
        if (activeTab) {
            activeTab.style.display = 'block';
        }
    }

    tabs.forEach(tab => {
        tab.addEventListener('click', function(e) {
            e.preventDefault();
            const deeplink = this.getAttribute('data-deeplink');
            showTab(deeplink);
            history.pushState(null, null, `#${deeplink}`);
        });
    });

    const currentHash = window.location.hash.substring(1);
    if (currentHash) {
        showTab(currentHash);
    }
});

 

Step 2: Create a Sling Model for Tabs

  1. Java Sling Model (TabsModel.java):

 

package com.myproject.models;

import org.apache.sling.api.resource.Resource;
import org.apache.sling.models.annotations.Model;
import org.apache.sling.models.annotations.injectorspecific.ValueMapValue;

@Model(adaptables = Resource.class)
public class TabsModel {

    @ValueMapValue
    private String[] tabTitles;

    @ValueMapValue
    private String[] deeplinkIds;

    public String[] getTabTitles() {
        return tabTitles;
    }

    public String[] getDeeplinkIds() {
        return deeplinkIds;
    }
}

 

HTL Template to Render Tabs (tabs.html):

 

<div class="tabs-component">
    <ul class="tabs">
        <sly data-sly-use.tabs="${'com.myproject.models.TabsModel'}">
            <sly data-sly-list.tab="${tabs.tabTitles}">
                <li><a href="#${tabs.deeplinkIds[tabListIndex]}" data-deeplink="${tabs.deeplinkIds[tabListIndex]}">${tab}</a></li>
            </sly>
        </sly>
    </ul>
    <sly data-sly-use.tabs="${'com.myproject.models.TabsModel'}">
        <sly data-sly-list.tab="${tabs.tabTitles}">
            <div id="${tabs.deeplinkIds[tabListIndex]}" class="tab-content">Content for ${tab}</div>
        </sly>
    </sly>
</div>

 

Step 3: Define the Component Dialog

  1. Dialog Definition (tabs/.content.xml)

 

<jcr:root
    xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
    xmlns:cq="http://www.day.com/jcr/cq/1.0"
    xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:Component"
    jcr:title="Tabs Component"
    sling:resourceSuperType="core/wcm/components/commons/v1/default"
    componentGroup="My Project">
    <cq:dialog
        jcr:primaryType="nt:unstructured"
        xmlns:cq="http://www.day.com/jcr/cq/1.0"
        cq:dialogMode="floating"
        cq:templatePath="/libs/wcm/foundation/components/page/dialog">
        <content
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/coral/foundation/container">
            <items jcr:primaryType="nt:unstructured">
                <tabs
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/tabs">
                    <items jcr:primaryType="nt:unstructured">
                        <tab
                            jcr:primaryType="nt:unstructured"
                            jcr:title="Tab Titles">
                            <items jcr:primaryType="nt:unstructured">
                                <tabTitles
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
                                    fieldLabel="Tab Titles"
                                    name="./tabTitles">
                                    <field jcr:primaryType="nt:unstructured"
                                           sling:resourceType="granite/ui/components/coral/foundation/form/textfield"/>
                                </tabTitles>
                            </items>
                        </tab>
                        <tab
                            jcr:primaryType="nt:unstructured"
                            jcr:title="Deeplink IDs">
                            <items jcr:primaryType="nt:unstructured">
                                <deeplinkIds
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
                                    fieldLabel="Deeplink IDs"
                                    name="./deeplinkIds">
                                    <field jcr:primaryType="nt:unstructured"
                                           sling:resourceType="granite/ui/components/coral/foundation/form/textfield"/>
                                </deeplinkIds>
                            </items>
                        </tab>
                    </items>
                </tabs>
            </items>
        </content>
    </cq:dialog>
</jcr:root>
​

 

  • Component Structure: Create the necessary files for your tabs component.
  • HTML and JavaScript: Define the structure and behavior of your tabs. The JavaScript handles the deep linking by updating the URL and displaying the correct tab content.
  • Sling Model: Use a Sling Model to manage the data for your tabs, including the titles and deep link IDs.
  • HTL Template: Use HTL to dynamically render the tabs and their contents based on the data from the Sling Model.
  • Component Dialog: Define a dialog to allow authors to input tab titles and deep link IDs.

This setup allows you to customize the deep links for your AEM tabs, providing more meaningful URLs that reflect the tab content.

Avatar

Level 7

Thanks ChatGPT, I've been following you, and this is considered spamming, I am reporting you.

Avatar

Correct answer by
Level 2

For those who are wondering, this is the exact thing I needed. Check this forum post