Thanks for sharing, Matt. This is so cool!

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) &amp;&amp; (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 = argumentsr0].button;

var parentTabset = getTabset(clickedButton);

var tabToActivate = getNewTab(parentTabset, getCurrentTab(parentTabset), 1)

$(parentTabset).tabs("option", "active", tabToActivate);

},

'previousTab': function () {

var clickedButton = argumentsr0].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);