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

Santiago Perez
edited September 5, 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!


  • Zach McElrath
    edited March 2, 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:

  • Santiago Perez
    edited September 5, 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?
  • Zach McElrath
    edited December 21, 2016
    Do you have Multiple Tab Sets in the page, or is this Tab Set nested within another Tab Set?
  • Santiago Perez
    edited July 16, 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. 
  • Zach McElrath
    edited December 21, 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? 
  • Santiago Perez
    edited July 17, 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 Holland
    Kaede Holland ✭✭✭✭
    edited November 19, 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 Hatch
    Rob Hatch 🛠️ 
    edited September 1, 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. 
  • David Forder
    David Forder ✭✭✭✭
    edited March 3, 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?
  • Louis Skelton
    edited May 4, 2020
    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.
  • Jack Sanford
    Jack Sanford San Antonio, TX 💎💎

    Also wondering if this is possible to link to a specific tab when you are using page assignments, as the url is a bit funky as well like in lightning

  • If you take them out of the tab sets and create a pseudo tab set by using a button set and components that render or hide based on URL parameters, then you can show certain components by default by passing in parameters and you can force them to show or hide using button sets, action sequences, or wrapper interactions.

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!