Tab-based Layout Solution

Document created by Patrick Abel Champion on May 17, 2016Last modified by Patrick Abel Champion on Jun 3, 2016
Version 9Show Document
  • View in full screen mode

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).

 

AuthorPatrick 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):

  1. This is the control which is rendered a our tabs. To do this:
    1. Add options for each of your needed tabs (i.e. Panel A, Panel B, etc.)
    2. Ensure that the display mode is set to Edit in the advanced settings.
    3. Ensure that the display format is set to option buttons in the advanced settings.
    4. 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:

  1. Add a rule to each of your panels (tabs) configured with the following:
    1. 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'
    2. 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:

  1. Title
  2. Some Text Column
  3. Another Text Column
Support Info

Patrick Abel | Summit 7 Systems | patrick.abel@summit7systems.com

Compatibility

Nintex Forms 2013

Platform

SharePoint Server 2013

Screenshots

tabbed_layout_demo.gif

Additional Information

Components included in the Asset:

  1. Sample form (.xml file) showcasing a tabbed layout in action.
  2. 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.

Outcomes