Turn your tabset into a 'wizard.'

  • 1
  • Idea
  • Updated 3 years ago
We often have a use case where we'd like to be able to use a wizard, except that users occasionally need to jump around between screens. So we use tabsets, and add a Pagetitle component at the top of each tab, with Next Tab and Previous Tab buttons that run a snippet called 'nextTab' and 'previousTab', respectively.

Here's the generic inline javascript to make it work:

// Tabs
(function (skuid){
//Shortcuts
var $ = skuid.$;
//Helper Functions
// Given the button that was clicked, find the parent tabset.
var getTabset = function (button) {
return $(button).closest('.ui-tabs-panel').parent();
}
// Given the active tabset, find the active tab.
var getCurrentTab = function (tabset) {
return $(tabset).tabs("option", "active");
}
//Build Snippets
var snippets = {
'nextTab': function () {
var clickedButton = arguments[0].button;
var parentTabset = getTabset(clickedButton);
$(parentTabset).tabs("option", "active", getCurrentTab(parentTabset) + 1);
},
'previousTab': function () {
var clickedButton = arguments[0].button;
var parentTabset = getTabset(clickedButton);
var currentTab = getCurrentTab(parentTabset);
if (currentTab > 0) {
$(parentTabset).tabs("option", "active", currentTab - 1);
}
}
};
//Register Snippets
$.each(snippets,function(name,func){ skuid.snippet.registerSnippet(name,func); });
})(skuid);


You could accomplish something similar with a single pagetitle component above the tabset, instead of one within each tab. You would just have to modify the jQuery to find the right tabset and tab. For our use case this method is better.

(Thanks to Barry for some awesome jQuery help with a few other problems. In a round-about way, you're responsible for this!)
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb

Posted 3 years ago

  • 1
Photo of Anna Wiersema

Anna Wiersema

  • 10,890 Points 10k badge 2x thumb
Thanks for sharing, Matt. This is so cool!
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
UPDATE:

Ran into some problems with the initial code with conditional rendering of tabs. Here's an updated version.

Also note that your pagetitle buttons for Next Tab and Previous Tab have to be Run a Skuid javascript snippet. This won't work if you try to call nextTab or previousTab from the action framework under a button that runs multiple actions... because .button isn't passed into the arguments in that case.

// Tabs (function (skuid){
//Shortcuts
var $ = skuid.$;
//Helper Functions
// Given the button that was clicked, find the parent tabset.
var getTabset = function (button) {
return $(button).closest('.ui-tabs-panel').parent();
}
// Given the active tabset, find the active tab.
var getCurrentTab = function (tabset) {
return $(tabset).tabs("option", "active");
}
// Given the active tabset and current tab, find the next rendered tab before/after the current tab.
// tabset: the jQuery wrapped tabset DOM element
// current: the number of the current tab (as returned by getCurrentTab)
// direction: 1 or -1 for next or previous tab, respectively
var getNewTab = function (tabset, current, direction) {
// Get all children DOM elements of the tabset.
var setkids = $(tabset).children();
// The first element in setkids array is the list of tabs
//  and each successive element is a tab panel,
//  so the actual tab number corresponds to setkids[tab + 1].
for (var t = current + direction; (t < setkids.length) && (t >= 0); t = t + direction) {
if ($(setkids[t+1]).attr("data-rendered")) return t;
}
// If the for loop does not find a rendered tab panel before reaching its limit,
//  return the current tab.
return current;
}
//Build Snippets
var snippets = {
'nextTab': function () {
var clickedButton = arguments[0].button;
var parentTabset = getTabset(clickedButton);
var tabToActivate = getNewTab(parentTabset, getCurrentTab(parentTabset), 1)
$(parentTabset).tabs("option", "active", tabToActivate);
},
'previousTab': function () {
var clickedButton = arguments[0].button;
var parentTabset = getTabset(clickedButton);
var currentTab = getCurrentTab(parentTabset);
if (currentTab > 0) {
var tabToActivate = getNewTab(parentTabset, currentTab, -1);
$(parentTabset).tabs("option", "active", tabToActivate);
}
}
};
//Register Snippets
$.each(snippets,function(name,func){ skuid.snippet.registerSnippet(name,func); });
})(skuid);