navigate to tab using window.location.hash without refreshing

  • 1
  • Question
  • Updated 4 years ago
Is this possible? I have of small tidbits of data that don't need their own page. These records are part of what makes up a quote in construction. To accommodate the structure, I use a lot of tabs. I'd like to be able to quickly navigate to them without refreshing the page. Is this possible with window.location.hash and javascript?
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,674 Points 20k badge 2x thumb

Posted 4 years ago

  • 1
Photo of Zach McElrath

Zach McElrath, Employee

  • 48,984 Points 20k badge 2x thumb
Yes, this is possible, as long as your Tab Set and each of the Tabs all have Unique Ids (configurable through the properties of the Tab Set and of each Tab).

Here's a simple page example that has a "Jump to Tab" button, which runs a JavaScript Snippet called "Jump to Tab", that lets you enter the Unique Id of the Tab Panel you want to jump to, and then

(1) Updates window.location.hash with this Tab Panel's Unique Id
(2) Navigates to that Tab using jQuery UI's Tab navigation API


<skuidpage unsavedchangeswarning="yes" showsidebar="true" showheader="true" tabtooverride="Case">   
   <models>
      <model id="Case" limit="1" query="false" createrowifnonefound="true" sobject="Case">
         <fields>
            <field id="CaseNumber"/>
            <field id="Status"/>
            <field id="Subject"/>
         </fields>
         <conditions/>
         <actions/>
      </model>
   </models>
   <components>
      <pagetitle model="Case">
         <maintitle>
            <template>New {{Model.label}}</template>
         </maintitle>
         <subtitle>
            <template>{{Model.labelPlural}}</template>
         </subtitle>
         <actions>
            <action type="custom" label="Jump to Tab" snippet="JumpToTab" icon="fa-bolt"/>
         </actions>
      </pagetitle>
      <tabset rememberlastusertab="true" defertabrendering="true" renderas="" uniqueid="MyTabSet">
         <tabs>
            <tab name="Deviled Eggs" icon="fa-ambulance" uniqueid="DeviledEggs">
               <components/>
            </tab>
            <tab name="Tagliolini Bolognese" loadlazypanels="true" icon="fa-cutlery" uniqueid="Tag">
               <components/>
            </tab>
            <tab name="French Onion Soup" loadlazypanels="true" icon="fa-bank" uniqueid="FrenchOnion">
               <components/>
            </tab>
         </tabs>
      </tabset>
   </components>
   <resources>
      <labels/>
      <css/>
      <javascript>
         <jsitem location="inlinesnippet" name="JumpToTab" cachelocation="false">var tabUniqueId = prompt('Which Tab do you want to jump to?','FrenchOnion');
var $ = skuid.$;
var tabset = $('#MyTabSet');
var tabPanels = tabset.children('.ui-tabs-panel');
var tabIndex;
$.each(tabPanels,function(i,tabPanel){
   if ($(tabPanel).prop('id')===tabUniqueId) {
       tabIndex = i;
       return false;
   } 
});
if (tabIndex &lt; 0) {
    alert('Could not find a Tab called \'' + tabUniqueId + '\'');
} else {
    // Update the hash
    var scrollmem = $('html,body').scrollTop();
    window.location.hash = tabUniqueId;
    $('html,body').scrollTop(scrollmem);
    // Navigate to a particular tab
    tabset.tabs( "option", "active", tabIndex );
}
</jsitem>
      </javascript>
   </resources>
</skuidpage>



Here is a screenshot of the page:




And here is the JavaScript Snippet by itself:

var tabUniqueId = prompt('Which Tab do you want to jump to?','FrenchOnion');
var $ = skuid.$;
var tabset = $('#MyTabSet');
var tabPanels = tabset.children('.ui-tabs-panel');
var tabIndex;
$.each(tabPanels,function(i,tabPanel){
   if ($(tabPanel).prop('id')===tabUniqueId) {
       tabIndex = i;
       return false;
   } 
});
if (tabIndex < 0) {
    alert('Could not find a Tab called
' + tabUniqueId + '');
} else {
    // Update the hash
    var scrollmem = $('html,body').scrollTop();
    window.location.hash = tabUniqueId;
    $('html,body').scrollTop(scrollmem);
    // Navigate to a particular tab
    tabset.tabs( "option", "active", tabIndex );
}
(Edited)
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,674 Points 20k badge 2x thumb
Something wonky with the post for stuff in pre.
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,674 Points 20k badge 2x thumb
Hells yes though! Certainly going to take advantage of this.

Don't suppose popups can be automatically opened since they tabs as well?
Photo of Zach McElrath

Zach McElrath, Employee

  • 48,984 Points 20k badge 2x thumb
Yeah the pre-formatted text is really wonky right now, not sure why.

How is the popup in question normally opened?
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,674 Points 20k badge 2x thumb
Row action. 
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,674 Points 20k badge 2x thumb
Any text missing from what you pasted?