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
Solved! Go to Solution.
Views
Replies
Total Likes
For those who are wondering, this is the exact thing I needed. Check this forum post
Views
Replies
Total Likes
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:
Create the Component Structure:
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);
}
});
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>
<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>
This setup allows you to customize the deep links for your AEM tabs, providing more meaningful URLs that reflect the tab content.
Views
Replies
Total Likes
Thanks ChatGPT, I've been following you, and this is considered spamming, I am reporting you.
Views
Replies
Total Likes
For those who are wondering, this is the exact thing I needed. Check this forum post
Views
Replies
Total Likes
Views
Likes
Replies
Views
Likes
Replies
Views
Likes
Replies
Views
Likes
Replies