Nintex Forms – Tab like Functionality
Ever wanted to have a tab-like interface on your Nintex Form?
With some new functionality that was added to Nintex Forms, we can now simulate a tab control on our form. The functionality that was added, is a new setting for the Choice control called “Render as buttons”. This allows us to have a choice control on our form with a several options and rather than seeing them as a drop down or check boxes, the options will appear as buttons in a horizontal format.
Settings of the Choice Control
Control Settings
Tab Pages
Each page that appears under the tabs is created using a Panel control. A Panel is a control in Nintex Forms that allows you to group any number of controls.
Stack each panel under the previous panel. Then you have a Rule for each panel. All it each rule does, is Hide the selected panel if the button clicks in the choice control does not make the panel.
eg. if the button is “Add User to AD”, then it will show the appropriate panel for that and hide the other panels.
Rules
Rule Configuration
Now that you have the rules and the choice control, you can focus your attention to the design of each panel, showing the appropriate fields you want a user to fill in.
Conclusion
You can download the form that showcases the tab-style functionality in the downloads section below. But you will most likely want to extend it.
Firstly, I would recommend you enable/disable certain controls in each panel based on certain conditions. Again, this makes for a more dynamic and user friendly form and also makes sure that the user can only fill in the field they need to fill in.
Also, some of the controls on your form, you want to connect to fields in the SharePoint list you’re working on, so that’s a good idea also.
Finally, customize or brand the form so that it fits better into your corporate environment.
This is what it should look like :
Updates
I was just notified that if you want a tab to be the default tab open, then you can add the following JavaScript (where “General” is the name of the first tab you want to see):
NWF$(document).ready(function(){
NWF$(‘:radio[value=”General”]’).attr(‘checked’,true);});
Downloads
Download the Form – Download and import into Nintex Forms
