Tab-based Layout Solution

This asset demonstrates how a tab-based layout can be achieved through the use of a choice control, rules, panels, and a little magic(CSS).



Author Patrick Abel
Long Description When used and implemented correctly, a tab-based layout can be an excellent addition to a Nintex form in regards to usability and content organization. This asset demonstrates how a tab-based layout can be achieved through the use of a choice control, rules, panels, and a little magic (CSS). See below for some additional notes on the components (controls) that comprise this solution: Choice Control (tabsChoiceControl):This is the control which is rendered a our tabs. To do this:Add options for each of your needed tabs (i.e. Panel A, Panel B, etc.)Ensure that the display mode is set to Edit in the advanced settings.Ensure that the display format is set to option buttons in the advanced settings.Ensure that a CSS class is give to the choice control so that styling can be applied to give the tabular look and feel. Panels & Rules:Panels and rules are used in tandem to show/hide zones of your form. To do this, you’ll simply need to:Add a rule to each of your panels (tabs) configured with the following:The Condition formula needs to evaluate to true if your Choice Control (i.e. tabsChoiceControl) does not equal the option value you’re associating with this tab : tabsChoiceControl!=’Panel A’Check the Hide check box.With the above configuration, your panel will now be hidden until your panel is selected (i.e. Panel A). Now you’ll just want to migrate any fields/controls you need into these panels. Magic (CSS):Now that your form is fully configured, you’ll just need to include the neccissary CSS to style the tabs correctly:.tabsChoiceControl { 
    float: left; 

.tabsChoiceControl tr { 
    float:left; 

.tabsChoiceControl label { 
    background: #d13239; 
    padding: 7px 3px; 
    border: 1px solid #ccc; 
    margin-left: -1px; 
    position: relative; 
    left: 1px; 
    border-radius:5px 5px 0px 0px; 
    cursor:pointer; 
    border-bottom:none; 
    text-align:center; 
    color: white;

.tabsChoiceControl [type=radio] { 
    display: none; 

[type=radio]:checked ~ label { 
    background:white; 
    border-bottom: 1px solid white; 
    z-index: 2; 
    color: black;
}
.invisible .nf-textbox-wrapper input[type=text], .invisible .nf-textbox-wrapper .ms-inputBox {
    border: 0;
    background: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Dependencies The creation of a custom SharePoint List (i.e. TABBED LAYOUT ASSET) with the following columns:TitleSome Text ColumnAnother Text Column
Support Info Patrick Abel | Summit 7 Systems | patrick.abel@summit7systems.com
Compatibility Nintex Forms 2013
Platform SharePoint Server 2013
Screenshots
Additional Information Components included in the Asset:Sample form (.xml file) showcasing a tabbed layout in action.CSS code snippet which is embedded in the form to provide the tab styling to the choice control.

Nintex Xchange Terms of Use Policy

Nintex makes no warranty or guarantee about the reliability, performance, quality, or functionality of any assets, and any assets you install are therefore provided as is. By downloading this asset, you agree to the terms of use.

Leave a Reply

Your email address will not be published. Required fields are marked *