Deep linking capabilities into a tab of a component in aem | Community
Skip to main content
Sai_Krishna_Kot
Sai_Krishna_Kot
Level 2
January 31, 2016
Solved

Deep linking capabilities into a tab of a component in aem

  • January 31, 2016
  • 8 replies
  • 3036 views

Hi,

Is there any way that, we can achieve deep linking capabilities into a particular tab of a component in a page in AEM?

Your help is much appreciated!

Thanks,

Sai

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 kautuk_sahni

Hi 

As mentioned by Kunal and Scott, we can achieve this by JavaScript or Jquery.

Option 1:-

Please find below the example for the same:

1. Menu 1 Tab selected.

Dynamic Tabs

Menu 1

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

 

2. Menu 3 Tab selected

Dynamic Tabs

Menu 3

Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

 

Copy the following code in any test file and rename it to .html

//

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Dynamic Tabs</h2>
  <ul class="nav nav-tabs">
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#menu1">Menu 1</a></li>
    <li><a href="#menu2">Menu 2</a></li>
    <li><a href="#menu3">Menu 3</a></li>
  </ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
    <div id="menu3" class="tab-pane fade">
      <h3>Menu 3</h3>
      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </div>
  </div>
</div>

<script>
$(document).ready(function(){
    $(".nav-tabs a").click(function(){
        $('.nav-tabs li:eq(3) a').tab('show')
    });
});
</script>

</body>
</html>

 

 

$('.nav-tabs li:eq(3) a').tab('show') in above code helps you select the tab that you would like to select by default.

change this 3 number to 2 to select menu 2.

 

Option 2:-

Create a OSGI Component that can dynamically change the default tab using some query parameters or HTTP header values.

 

Link:- http://www.w3schools.com/bootstrap/bootstrap_ref_js_tab.asp

 

I hope this would help you.

Thanks and Regards

KautuK Sahni

 

8 replies

edubey
edubey
Level 10
January 31, 2016

Can you elaborate why you want to achieve this?

Sai_Krishna_Kot
Sai_Krishna_KotAuthor
Level 2
January 31, 2016

Business want to achieve a deep linking capabilities into a tab of a component with in a page.Because, in the emails to customers, it would be handy.

smacdonald2008
smacdonald2008
Level 10
January 31, 2016

"Achieve a deep linking capabilities into a tab of a component with in a page"

Are you referring to a tab that belongs to a component dialog?

I am unclear what you want to do. 

Can you please explain your use case in detail. 

Kunal_Gaba_
Kunal_Gaba_
January 31, 2016
  I guess you have components on pages having tab ui and you want that the end users should see a particular tab when they click on a link of that page. The only way I can think this can be implemented in AEM is via JavaScript. In your email template you can create links to the pages with anchors for the tab name. And implement a JavaScript code on the page which will  read the anchor and show the corresponding tab passed in the anchor. For example - /content/site/en/page.html#tab1
Sai_Krishna_Kot
Sai_Krishna_KotAuthor
Level 2
January 31, 2016

As Kunal mentioned, is the exact scenario that is what, I am looking for.

smacdonald2008
smacdonald2008
Level 10
January 31, 2016

As kunal suggests -- "The only way I can think this can be implemented in AEM is via JavaScript"

What about using a JQeury plug-in to work with Tabs:

https://jqueryui.com/tabs/

Using the Tab Plug-in - you may be able to address your requirements. 

kautuk_sahni
Community Manager
kautuk_sahniCommunity ManagerAccepted solution
Community Manager
February 1, 2016

Hi 

As mentioned by Kunal and Scott, we can achieve this by JavaScript or Jquery.

Option 1:-

Please find below the example for the same:

1. Menu 1 Tab selected.

Dynamic Tabs

Menu 1

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

 

2. Menu 3 Tab selected

Dynamic Tabs

Menu 3

Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

 

Copy the following code in any test file and rename it to .html

//

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Dynamic Tabs</h2>
  <ul class="nav nav-tabs">
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#menu1">Menu 1</a></li>
    <li><a href="#menu2">Menu 2</a></li>
    <li><a href="#menu3">Menu 3</a></li>
  </ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
    <div id="menu3" class="tab-pane fade">
      <h3>Menu 3</h3>
      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </div>
  </div>
</div>

<script>
$(document).ready(function(){
    $(".nav-tabs a").click(function(){
        $('.nav-tabs li:eq(3) a').tab('show')
    });
});
</script>

</body>
</html>

 

 

$('.nav-tabs li:eq(3) a').tab('show') in above code helps you select the tab that you would like to select by default.

change this 3 number to 2 to select menu 2.

 

Option 2:-

Create a OSGI Component that can dynamically change the default tab using some query parameters or HTTP header values.

 

Link:- http://www.w3schools.com/bootstrap/bootstrap_ref_js_tab.asp

 

I hope this would help you.

Thanks and Regards

KautuK Sahni

 

Kautuk Sahni
A
atoht
March 7, 2024

Hi!

Can I get this aem deep link using java api?

 

Thank You!

Sai_Krishna_Kot
Sai_Krishna_KotAuthor
Level 2
February 3, 2016

Thank you for your response. It helps me.

Terms & ConditionsAccessibility statement

Loading footer...