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

  • 1
  • Idea
  • Updated 11 months ago
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.
Photo of Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 17,224 Points 10k badge 2x thumb

Posted 12 months ago

  • 1
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
If my memory serves Skuid Mobile panels functioned in much the same way.
Photo of Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 17,224 Points 10k badge 2x thumb
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.
Photo of John Dahlberg

John Dahlberg, Champion

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

<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" useviewportmeta="true" showheader="true">
    <models>
        <model id="ActiveTab" query="true" createrowifnonefound="true" datasource="Ui-Only" processonclient="true">
            <fields>
                <field id="ActiveTab" displaytype="TEXT" label="ActiveTab"/>
                <field id="Index" displaytype="TEXT" label="Index"/>
            </fields>
            <conditions/>
            <actions>
                <action>
                    <actions>
                        <action type="redirect" window="self" url="javascript:skuid.snippet.getSnippet('selectTab')('{{Index}}');"/>
                    </actions>
                    <events>
                        <event>row.created</event>
                    </events>
                </action>
            </actions>
        </model>
    </models>
    <components>
        <grid uniqueid="sk-LV8CD-2135">
            <divisions>
                <division behavior="flex" minwidth="100px" ratio="1">
                    <components>
                        <template multiple="false" uniqueid="sk-LUl80-1752" allowhtml="true">
                            <contents>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.
&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;</contents>
                        </template>
                        <navigation uniqueid="sk-L99n5-1084">
                            <navigationitems>
                                <navigationitem label="Tab1" uniqueid="sk-L99n5-1083">
                                    <actions>
                                        <action type="createRow" window="self" url="#Tab1" fieldmodel="ActiveTab" affectedrows="context" field="ActiveTab" enclosevalueinquotes="true" value="Tab1" model="ActiveTab" appendorprepend="prepend" defaultmodefornewitems="edit">
                                            <defaults>
                                                <default type="fieldvalue" field="ActiveTab" enclosevalueinquotes="true" value="Tab1"/>
                                                <default type="fieldvalue" field="Index" enclosevalueinquotes="true" value="0"/>
                                            </defaults>
                                        </action>
                                    </actions>
                                </navigationitem>
                                <navigationitem label="Tab2" uniqueid="sk-L9B44-1096">
                                    <actions>
                                        <action type="createRow" window="self" url="#Tab2" model="ActiveTab" appendorprepend="prepend" defaultmodefornewitems="edit" affectedrows="context">
                                            <defaults>
                                                <default type="fieldvalue" field="ActiveTab" enclosevalueinquotes="true" value="Tab2"/>
                                                <default type="fieldvalue" field="Index" enclosevalueinquotes="true" value="1"/>
                                            </defaults>
                                        </action>
                                    </actions>
                                </navigationitem>
                                <navigationitem label="Tab3" uniqueid="sk-L9B7N-1101">
                                    <actions>
                                        <action type="createRow" window="self" url="#Tab3" model="ActiveTab" appendorprepend="prepend" defaultmodefornewitems="edit" affectedrows="context">
                                            <defaults>
                                                <default type="fieldvalue" field="ActiveTab" enclosevalueinquotes="true" value="Tab3"/>
                                                <default type="fieldvalue" field="Index" enclosevalueinquotes="true" value="2"/>
                                            </defaults>
                                        </action>
                                    </actions>
                                </navigationitem>
                                <navigationitem label="Tab4" uniqueid="sk-L9B9u-1106">
                                    <actions>
                                        <action type="createRow" window="self" model="ActiveTab" appendorprepend="prepend" defaultmodefornewitems="edit" affectedrows="context">
                                            <defaults>
                                                <default type="fieldvalue" field="ActiveTab" enclosevalueinquotes="true" value="Tab4"/>
                                                <default type="fieldvalue" field="Index" enclosevalueinquotes="true" value="3"/>
                                            </defaults>
                                        </action>
                                    </actions>
                                </navigationitem>
                            </navigationitems>
                        </navigation>
                    </components>
                </division>
                <division behavior="flex" verticalalign="top" minwidth="100px" ratio="1">
                    <components>
                        <template multiple="false" uniqueid="sk-LV5-I-2126" allowhtml="true">
                            <contents>Or you can pretty up templates, buttons or other components to update the tab navigation:
&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
&lt;div class="bt" onclick="javascript:skuid.snippet.getSnippet('selectTab')(0);"&gt;Click Here for Tab1&lt;/div&gt;
&lt;div class="bt" onclick="javascript:skuid.snippet.getSnippet('selectTab')(1);"&gt;Click Here for Tab2&lt;/div&gt;
&lt;div class="bt" onclick="javascript:skuid.snippet.getSnippet('selectTab')(2);"&gt;Click Here for Tab3&lt;/div&gt;
&lt;div class="bt" onclick="javascript:skuid.snippet.getSnippet('selectTab')(3);"&gt;Click Here for Tab4&lt;/div&gt;</contents>
                        </template>
                    </components>
                </division>
            </divisions>
            <styles>
                <styleitem type="background" bgtype="none"/>
            </styles>
        </grid>
        <wrapper uniqueid="sk-LWIkP-2283">
            <components>
                <tabset rememberlastusertab="true" defertabrendering="true" uniqueid="TabSetTemplate" renderas="" cssclass="HideTabHeader">
                    <tabs>
                        <tab name="Tab1" uniqueid="Tab1" loadlazypanels="false">
                            <components>
                                <template multiple="false" uniqueid="sk-K-_mm-562" allowhtml="true">
                                    <contents>&lt;h1&gt;Tab1 Content&lt;/h1&gt;</contents>
                                </template>
                            </components>
                            <oninitialshowactions/>
                            <onshowactions/>
                        </tab>
                        <tab name="Tab2" loadlazypanels="false" uniqueid="Tab2">
                            <components>
                                <template multiple="false" uniqueid="sk-L02F2-615">
                                    <contents>&lt;h1&gt;Tab 2 Content&lt;/h1&gt;</contents>
                                </template>
                            </components>
                        </tab>
                        <tab name="Tab3" loadlazypanels="false" uniqueid="Tab3">
                            <components>
                                <template multiple="false" uniqueid="sk-L04QE-655">
                                    <contents>&lt;h1&gt;Tab 3 Content&lt;/h1&gt;</contents>
                                </template>
                            </components>
                        </tab>
                        <tab name="Tab4" loadlazypanels="false" uniqueid="Tab4">
                            <components>
                                <template multiple="false" uniqueid="sk-L06I6-692">
                                    <contents>&lt;h1&gt;Tab 4 Content&lt;/h1&gt;</contents>
                                </template>
                            </components>
                        </tab>
                    </tabs>
                </tabset>
            </components>
            <styles>
                <styleitem type="background"/>
                <styleitem type="border" borders="all" padding="all" margin="top,">
                    <styles>
                        <styleitem property="border" value="1px solid black"/>
                        <styleitem property="padding" value="10px"/>
                        <styleitem property="margin-top" value="25px"/>
                        <styleitem property="box-sizing" value="border-box"/>
                    </styles>
                </styleitem>
                <styleitem type="size"/>
            </styles>
        </wrapper>
    </components>
    <resources>
        <labels/>
        <javascript>
            <jsitem location="inlinesnippet" name="selectTab" cachelocation="false">var index = arguments[0],
$ = skuid.$;
skuid.component.getById('TabSetTemplate').element.tabs("option","active",index);</jsitem>
        </javascript>
        <css>
            <cssitem location="inline" name="TabSet" cachelocation="false">.HideTabHeader .ui-tabs-nav {
    display:none;
}</cssitem>
            <cssitem location="inline" name="button" cachelocation="false">.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;
}</cssitem>
        </css>
        <actionsequences uniqueid="sk-L1t-1-774"/>
    </resources>
    <styles>
        <styleitem type="background" bgtype="none"/>
    </styles>
</skuidpage>
Photo of Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 17,224 Points 10k badge 2x thumb
Thanks for digging into this, John. I’ll take a look at what you put together!