How to create a custom url to link to a specific SKUID Tab

edited September 2018 in Questions
I would like to create a custom url which led users to a specific SKUID tab. The url is:
And I have tried making it:
Which is the tab I'm looking for. However, clicking on it sends you to the first tab in the tab set rather than to the tab indicated. When I inspect element, I get the following
<li data-tab="skuid-component-tab-17" data-rendered="true" class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="skuid-component-tab-17" aria-labelledby="ui-id-9" aria-selected="true" style=""><a href="#skuid-component-tab-17" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-9"><div class="nx-template" style="display: inline-block;">B Benchmarks</div></a></li>
<a href="#skuid-component-tab-17" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-12"><div class="nx-template" style="display: inline-block;">B Benchmarks</div></a>

Let me know if I could reference any of the elements in there in the URL, or whether I'm thinking about this the wrong way and there's a better solution. Thanks!


  • edited March 2017
    We recommend that you give your Tabs a Unique Id, which makes it much more easy to reliably send users to a tab via a URL.

    From the Page Composer, click on a particular Tab, and in its Advanced Properties there should be a "Tab Panel Unique Id" property. So say that this Tab should show Benchmarks. You can give it a Unique Id of "Benchmarks", then you could do this:

  • edited September 2018
    Thanks for the lightning fast reply. I did as you suggested, and indeed I can see from the HTML that the it is now that datatab=Benchmarks and href=Benchmarks. However, when I click on
    I'm still directed to the first tab in the tab set. Any thoughts on other approaches I could try?
  • edited December 2016
    Do you have Multiple Tab Sets in the page, or is this Tab Set nested within another Tab Set?
  • edited July 2014
    You are correct, the tab I need is in a tab set nested inside another tab set. I tried giving the tabs in the tab set above a unique id and the ensuing link worked well, its just linking to the nested tabs that seems not to work. 
  • edited December 2016
    We currently don't support using custom urls to link to nested tabs. In your scenario, will a certain top-level tab be open by default? (e.g. will the first tab always be open by default), and is the second-level tab you want to link to within the top-level tab that would be open by default? 
  • edited July 2014
    Got it. I am now able to create a link which leads to the correct top level tab, and I have rearranged the tabs in the nested tab set so that it opens the one we want by default (ie I made it the first tab in the set). This is fine for now, although it is not a very scalable solution since it precludes me from ever linking to the other tabs in the nested tab set. I really appreciate your help, and hope that custom urls to nested tabs will be supported at some point
  • Kaede HollandKaede Holland ✭✭
    edited November 2014
    How would I use this same idea of the Unique Id if I want to create a link on the current page that opens a tab on the current page?

    I have 5 boxes calling out data, and each one corresponds to a tab on that page. When the user clicks on a box, I want the corresponding tab to be opened. I was doing great by using the "data-tab="#ui-id-4" type stuff - but now, if I render tabs conditionally, things get all wonky. It will occasionally open the wrong tab, because some aren't rendering - so they are not longer in the same progression.

    Can I give the tabs fixed IDs and do the same type of thing?

    Is this making sense?
  • Rob HatchRob Hatch 🛠️ 
    edited September 2016
    Yes - you can give your tabs a unique ID and then have your boxes link to a skuid page with that particular tab.  What this does not do is open the a tab on the current page - it loads a new page on a specific tab. 
  • edited March 2017
    Just to revisit this one.. is there anyway with all of the fantastic new features that we can switch tabs without reloading a fresh page?
  • edited May 4
    Hello, fine folks. Is there anything that can be done to get this to work in Lightning? The urls aren't as friendly to work with anymore and throwing a reference to an id-tag on the page causes issues with the routing... unless I'm doing something dumb. Very likely.
Sign In or Register to comment.