Idea: Action for setting tab in tabset & hide tab menu

Think of the component rendering action. If there was a similar action where you could choose the unique ID of a tabset and the set the tab that displays, you could create wizards with virtually unlimited formatting options. A wizard is basically a tabset with a hidden tab menu and buttons that navigate to other tabs of the tabset. So if there was an option in the tabset to hide the tab menu, you could create any manner of button anywhere on the page that could navigate the “wizard”. Use case would: think of a smart phone. You have a “Home” screen and it has icons or tiles of different shapes and sizes (depending on your smartphone). You click an icon and the menu disappears and just the content you want appears. Then you can go back to the home screen. This can be accomplished through rendering of components but that process would be streamlined if it could be don’t in a tabset instead of recreating a tabset like functionality through rendering components. Also, when you have a page include loaded on a page in a tabset and you navigate to another tab, the page include remains in memory so when you navigate back to the tab with the page include, it is exactly as you left it. If you recreate this through rendering components, when you hide the page include, it dumps it from memory and reloads it when you show it again. This causes you to lose your place if you were in the middle of something on the page include.

If my memory serves Skuid Mobile panels functioned in much the same way.

Your memory does serve, Pat! Yes, that is essentially what I am talking about. Per a previous post of mine, having the option to minimize the tab menu to a hamburger menu (like mobile builder) would be great too.

I mocked up a page this evening that I believe is directionally what you’re looking to do. The key is to hide the tab’s native navigation component and provide an alternative method for navigating through different tabs to provide greater flexibility with the styling and experience.

I have a few concepts on the page that may be of interest.

  • First, there's a parameter driven snippet that is used to activate the tab of interest so there's flexibility to invoke it from many places. This is a really simple script.
  • Second, I'm using a ui only model to accept updates from the action framework (in the navigation component example) and it in turn executes the snippet with parameters based on the data values in the model.
  • The snippet is driven off of the skuid.snippet.getSnippet() method, which I've become a huge fan of because it provides a lot of flexibility with passing parameters into the snippet and you can keep specific business rule outside of the code. The template example illustrates this.
  • Finally, there's simple CSS to hide the native tab navigation
Here you go: row.created Use a Navigation component to trigger a new row on a UI only model, which in turn runs a snippet to update the active tab. <br/><br/><br/> Or you can pretty up templates, buttons or other components to update the tab navigation: <br/><br/><br/> <div class="bt" onclick="javascript:skuid.snippet.getSnippet('selectTab')(0);">Click Here for Tab1</div> <div class="bt" onclick="javascript:skuid.snippet.getSnippet('selectTab')(1);">Click Here for Tab2</div> <div class="bt" onclick="javascript:skuid.snippet.getSnippet('selectTab')(2);">Click Here for Tab3</div> <div class="bt" onclick="javascript:skuid.snippet.getSnippet('selectTab')(3);">Click Here for Tab4</div> <h1>Tab1 Content</h1> <h1>Tab 2 Content</h1> <h1>Tab 3 Content</h1> <h1>Tab 4 Content</h1> var index = arguments[0], $ = skuid.$; skuid.component.getById('TabSetTemplate').element.tabs("option","active",index); .HideTabHeader .ui-tabs-nav { display:none; } .bt{ display:inline-block; min-width:10px; padding:5px 7px; font-size:18px; line-height:1; color:#fff; text-align:center; white-space:nowrap; vertical-align:middle; background-color:#034D70; margin:3px; border-radius:5px; box-shadow: 0 2px 2px 0 #6D6E70; width:95%; transition-timing-function: ease; transition-duration: 2s; transition-property: width height background-color font-size left top transform -webkit-transform color; } .bt .nx-fieldtext{ color:#fff; font-size:12px; }

Thanks for digging into this, John. I’ll take a look at what you put together!