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
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.
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
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
- 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.
