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

  • 1
  • Question
  • Updated 2 years ago
  • Answered
  • (Edited)
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!

Photo of Santiago Perez

Santiago Perez

  • 362 Points 250 badge 2x thumb

Posted 5 years ago

  • 1
Photo of Zach McElrath

Zach McElrath, Employee

  • 54,014 Points 50k badge 2x thumb
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:

Photo of Santiago Perez

Santiago Perez

  • 362 Points 250 badge 2x thumb
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?
Photo of Zach McElrath

Zach McElrath, Employee

  • 53,974 Points 50k badge 2x thumb
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? 
Photo of Santiago Perez

Santiago Perez

  • 362 Points 250 badge 2x thumb
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
Photo of Kaede Holland

Kaede Holland

  • 3,166 Points 3k badge 2x thumb
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?
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,968 Points 20k badge 2x thumb
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. 
Photo of David Forder

David Forder

  • 2,624 Points 2k badge 2x thumb
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?
Photo of Louis Skelton

Louis Skelton

  • 5,626 Points 5k badge 2x thumb
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.