How to customize Deeplinks for AEM tabs

Question

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

zmdeluyas · Accepted Answer

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

HrishikeshKagne · Answer

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 TabsCreate 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.Define the Component HTML (tabs.html):

Tab 1
Tab 2
Tab 3

Content for Tab 1

Content for Tab 2

Content for Tab 3

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 TabsJava 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):

${tab}

Content for ${tab}

Step 3: Define the Component DialogDialog Definition (tabs/.content.xml) 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.

Step 1: Create a Custom Component for Tabs

Step 2: Create a Sling Model for Tabs

Step 3: Define the Component Dialog

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded