Vadim Tabakman

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

Choice Tabs

Control Settings

Tab 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

Rules

Rule Configuration

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.

You can try the form out here: http://ntx.lv/1ggf1Gl

This is what it should look like :

Live Form

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

Nintex Forms 2013

Download the Form - Download and import into Nintex Forms

Gravatar
Posted by Vadim Tabakman Monday, February 10, 2014 11:24:00 AM Categories: Nintex Forms Nintex Forms 2013 Rules Tabs
Copyright Vadim Tabakman
Rate this Content 0 Votes

Comments

Wednesday, February 19, 2014 3:54:39 AM
frans

re: Nintex Forms - Tab like Functionality

Hi Vadim,

I am trying to make use of this feature in all my forms. I imported your form but get formatting issues. Big spaces appear when I switch through the buttons. But when i look at your url your form looks perfect in terms of formatting. What cab be wrong with my setup then ?

 

Thursday, February 20, 2014 8:20:04 AM
frans

re: Nintex Forms - Tab like Functionality

Hi Vadim,

It was my browser, IE 9 on Windows 7 causing all the formatting issues.

Regards

 

Saturday, February 22, 2014 9:15:39 AM

re: Nintex Forms - Tab like Functionality

Hi Frans,

glad you found the issue.  I had no idea IE9 would be an issue.

cheers,

Vadim

Wednesday, March 5, 2014 10:15:07 PM
Bhuti

re: Nintex Forms - Tab like Functionality

Hi Vadim,

Nifty feature on Nintex forms man. Thanks for sharing these things. I can see many places where I can use that.

 

Regards

Bhuti

Monday, March 17, 2014 1:47:06 PM
Amanda

re: Nintex Forms - Tab like Functionality

Hi Vadim,

What if you wanted to make a show all button or tab? To allow users to view all there entries as listed in the Designer view.

Thanks,

Amanda

Monday, March 17, 2014 11:23:00 PM

re: Nintex Forms - Tab like Functionality

Hi Amanda,

are you saying you want to be able to show all the tab pages at once in the form?

I think you'd need a button or checkbox and then have a rule run against that that shows all the panels.

At the same time, the existing rules would need to be tweaked to cater for that situation.

cheers,

Vadim

Tuesday, March 18, 2014 8:40:03 AM
Amanda

re: Nintex Forms - Tab like Functionality

Hi Vadim,

I was thinking of something similar but I'm not sure of the best way to tweak the rules to cater to the situation. Would you use and AND or the OR function? Or is there another way of applying rules in NINTEX that I am unware of?

Thanks for your help,

Amanda

Thursday, May 8, 2014 7:58:26 PM
Dee
Gravatar

re: Nintex Forms - Tab like Functionality

Hi Dima,

Presuming this functionality isn't available in Forms for 365 yet? Looks like the Render as button option isn't there.

Thursday, May 8, 2014 8:14:19 PM

re: Nintex Forms - Tab like Functionality

Hey Dr Dee, you're right. Not supported in O365 yet. cheers, Dim
Friday, May 9, 2014 8:37:40 AM
Stef
Gravatar

re: Nintex Forms - Tab like Functionality

Hi Vadim,

This is cool, but how do you make it work in the display form? The 'tabs' (choices) become read only, so you can't switch panels when viewing properties, only editing (I'm customizing a form on a document library).

Thanks,

Stef

Thursday, May 15, 2014 5:05:46 AM
Anand
Gravatar

re: Nintex Forms - Tab like Functionality

Hello,

Great post. Thanks.

I want users to navigate across the tabs using a Next/Previous button. How can I do that?

Thanks in advance.

Monday, June 2, 2014 4:04:05 AM
Micael
Gravatar

re: Nintex Forms - Tab like Functionality

Hi , Vadim

I'm using tabs , but when i go to DispForm in nintext the buttons doesn't work. It's normal or I'm missing someting?

Thanks,

Micael

Monday, June 2, 2014 11:32:05 PM

re: Nintex Forms - Tab like Functionality

Hi Micael,

open the choice control, expand the Advanced section.  Then change the Control Mode to Edit.

Publish your form and it should work better now.

cheers,

Vadim

Wednesday, June 4, 2014 7:43:10 PM
Sam
Gravatar

re: Nintex Forms - Tab like Functionality

Hi Vadim, I don't see the option "Render as buttons", is this specific to any recent build.

Friday, June 27, 2014 3:52:11 AM
Anand
Gravatar

re: Nintex Forms - Tab like Functionality

Hi Vadim,

Thanks for the post.

However, can I change tabs on button click (say Next)? If yes, can you please guide?

Thanks in advance.

Anand

Friday, June 27, 2014 7:51:13 AM

re: Nintex Forms - Tab like Functionality

Hi Sam,

yeah that should be available in the latest build.  If you don't have it, contact Nintex Support.

Hi Anand,

I believe you'd need to do that with some JavaScript.  I'm afraid I don't have any examples at this stage.

cheers,

Vadim

Sunday, July 6, 2014 1:56:18 PM
Andy Bradley
Gravatar

re: Nintex Forms - Tab like Functionality

Hi Vadim,

Great write-up and it really helped explain how to put everything together and get tabs to function.

It was mentioned before that this does not work in display mode - only edit mode.

Do you know if there are any plans or any workaround to this?  I have a library that has about half the users with read-only permissions and with the Nintex Form as the default they cannot see all of the information as the buttons in the choice field are not active.  I also verified this with some rules tied to a yes/no button, this also does not work unless the user is in edit mode.

This is a pretty serious limitation for those of us with some security restrictions on the list - any ideas?

Thanks and great work with your blog, it has been extremely helpful!

Andy

Tuesday, July 8, 2014 10:12:06 AM

re: Nintex Forms - Tab like Functionality

Hi Andy,

open the choice control, expand the Advanced section.  Then change the Control Mode to Edit.

Publish your form and it should work better now.

cheers,

Vadim

Sunday, July 13, 2014 6:09:55 PM
Stefen Hasselberg
Gravatar

re: Nintex Forms - Tab like Functionality

Hi Vadim,

I'm sure this is a easy question yet i haven't found a answer on the web, but how to you find out which tab someone has selected using Javascript ?

Thanks

Stefen

Monday, July 14, 2014 8:14:47 AM

re: Nintex Forms - Tab like Functionality

Hi Steven,

You should be able to go into the Advanced section in the settings of the Choice control and store the ID in a JavaScript variable.

Then, in the JS, use something like vary myObj = NWF$('#' + varChoiceID);

Then get at the selection with myObj val() or myObj.selectionItem;

Hope that helps as I don't have access to an environment to try this out today.

Vadim

Monday, July 14, 2014 2:54:01 PM
Stefen Hasselberg
Gravatar

re: Nintex Forms - Tab like Functionality

Hi Vadim,

I tried your suggestion but it either comes back as underfined if i used selectionItem or blank if i used val().  here is my code


NWF$("#" + vOptions).change(function () {
var tabObj = NWF$("#" + vOptions);
var selectedTab = tabObj.selectionItem;
console.log(selectedTab);
});

Monday, July 14, 2014 5:57:09 PM
Stefen Hasselberg
Gravatar

re: Nintex Forms - Tab like Functionality

Hi Vadim,

I finally managed to get the selected tab now,  I was looking at it wrong..  i been looking that the jQuery UI documentation on Tabs but I should of been looking at documentation on buttons..  hope that makes sense..  any how this is how i got the selected item.

NWF$("#" + vOptions).change(function () {
var selectedButton = NWF$("#" + vOptions + " :radio:checked");
console.log(selectedButton.val());
});

Wednesday, July 30, 2014 2:51:03 AM
Jan Munkholm
Gravatar

re: Nintex Forms - Tab like Functionality

Hi Vadim

I am not able to get the form to show the default tab when opening the form!

Any suggestions?

Jan

Thursday, October 2, 2014 12:28:37 PM
Dorinda Reyes
Gravatar

re: Nintex Forms - Tab like Functionality

Has this functionality beed added to O365 or is there a way to get this to work at all in 365 I am having a hard time with a large form and would like to break it out in sections and have them click on a title or something and have the form show the specific fields.

Any help would be appreciated

 

Dorinda

Monday, November 3, 2014 10:52:23 AM
Mike
Gravatar

re: Nintex Forms - Tab like Functionality

Hi Vadim,

This is awesome, thank you!

Our last issue was solved with your point about changing the Control Mode of the Tabs control to Edit.

It now works perfectly.

Best regards,

Mike

Tuesday, November 18, 2014 7:38:44 AM
Robin
Gravatar

re: Nintex Forms - Tab like Functionality

Hi Vadim,

i have a form with the tabs working fine bot in display and edit modes but i want them to be duplicated at the bottom of my form, and to work whichever set of buttons you choose - is this possible and what would be the most effieicent way to achieve it?

thansk

 

Wednesday, November 19, 2014 8:35:46 AM

re: Nintex Forms - Tab like Functionality

Hi Robin,

I'm not sure what you mean.  You want another Tab control a the bottom of the form?

Can you copy the control and panels to the bottom of your form ?

cheers,

Vadim

Tuesday, November 25, 2014 7:03:14 AM
Henning Eiben
Gravatar

re: Nintex Forms - Tab like Functionality

Hi,

nice post - but what puzzles me: when I swith the tabs and then save and close the item; when I re-open the form, the previously selected tab will be shown instead of the first tab. I guess this is due to the fact, that Nintex Forms also persists data that is not connected. Is there some way to prevent this? I already tried setting the value from javascript, but at least in the console I fail :(

Wednesday, May 27, 2015 1:05:53 PM
Jason Blair
Gravatar

re: Nintex Forms - Tab like Functionality

Amanda, if you want to show multiple Tabs, a simple rule as follows works:  If(TabButton!='Tab Name'||TabButton!='Show All') will do the trick. I had to do this recently to aggregate all tabs to a single view for printing purposes.

Thursday, May 28, 2015 10:54:39 AM
Kel
Gravatar

re: Nintex Forms - Tab like Functionality

 
Hey Vadim,

 

Per Amanda's question above about a "Show All Panels" button on the tabs ribbon, you mentioned the rule conditions on the panels would need to be tweaked. 

Would the correct tweak be to add an OR in the condition for the Show All choice?  Formula below:

(Tabs!='Start') || (Tabs!='Summary') which should show the Start Panel whenever the choice field is equal to Start or Summary, correct?

 

Thanks!

Thursday, May 28, 2015 10:59:46 AM

re: Nintex Forms - Tab like Functionality

Hi Kel.

So if you want a button called "Show All Panels", select all the panels, then add a rule that says Hide if : Tabs != 'Show All Panels'

cheers,

Vaddim

Friday, May 29, 2015 11:13:50 AM
Kel
Gravatar

re: Nintex Forms - Tab like Functionality

Vaddim,

 

I added the Tab != 'Show All Panels' rule with all panels selected and now no panels show even when their choice option is picked. 

Monday, June 1, 2015 8:32:26 AM

re: Nintex Forms - Tab like Functionality

Hi Kel,

new idea :).  If you have 3 tabs, eg. Tab1, Tab2 and All Tabs.  You need only two rules.

1. Rule of Tab1 that will look like this

  Tabs!='Tab1' && Tabs!='All Tabs'

2. Rule for Tab2 that will look like this

  Tabs!='Tab2' && Tabs!='All Tabs'

That should work as I just tried it out.

cheers,

Vadim

Tuesday, June 2, 2015 7:44:00 AM
Kel
Gravatar

re: Nintex Forms - Tab like Functionality

Thanks Vadim!  I was using || instead of &&.

Tuesday, June 2, 2015 7:44:52 AM

re: Nintex Forms - Tab like Functionality

Glad you got it working Kel.  I get caught out with that also.

cheers,

Vadim

Friday, June 12, 2015 1:29:41 AM
Renske
Gravatar

re: Nintex Forms - Tab like Functionality

Hi Vadim,

I have created a tab form with tabs at the top. Now the requirement is to add a next button at the bottom to go the next panel.

Do you have any javascript for this?

Regards,

Wednesday, July 1, 2015 7:23:58 AM
Amanda
Gravatar

re: Nintex Forms - Tab like Functionality

Vadim,

I am trying to use panels to create different form views much like this Tab functionality. I am having an issue when the controls that appear in more than one panel are not actually storing any data in the list column. So say I have 2 different panels set up to hide under 2 different conditions. Both panels contain a copy of a control field called 'Name' and are both connected to the same list column. When I publish the form and test, the information that I enter into that 'Name' field does not get populated into the list column. I have the rules on the panels set to hide and disable the panels. Please please please tell me there is a solution. Thanks.

Sunday, July 19, 2015 10:35:21 PM
Abhi
Gravatar

re: Nintex Forms - Tab like Functionality

Hi

I have followed your instructions and been able to create multiple tabs, however, when I edit and existing item no tabs are displayed and I have to click on the first tab but when I add a new item it shows first tab automatically. Please advise.

 

Thanks

Monday, July 20, 2015 8:37:48 AM

re: Nintex Forms - Tab like Functionality

Hi Abhi,

I'm afraid I don't know why the tabs aren't displaying in edit mode.  They definitely should.  I just updated the downloadable form, so you might want to try that.

I added an option so that the tabs are available even if you are just displaying the current item (not editing).

cheers,

Vadim

Monday, July 20, 2015 8:38:45 AM

re: Nintex Forms - Tab like Functionality

Hi Amanda,

the issue with multiple controls linked to the same field is known and the Nintex development team is looking into it.

cheers,

Vadim

Sunday, October 11, 2015 2:54:21 AM
Dee
Gravatar

re: Nintex Forms - Tab like Functionality

Hi Vadim,

How can I implement a drop down navigation to the tab styled nintex form? 

something similar to this: 

http://osvaldas.info/examples/drop-down-navigation-touch-friendly-and-responsive/

Thanks

Dee

Monday, October 12, 2015 1:39:12 PM

re: Nintex Forms - Tab like Functionality

Hi Dee,

I've never done that I'm afraid.  It would require some JS trickery.

vadim

Tuesday, October 27, 2015 11:32:32 AM
Darryl Coleman
Gravatar

re: Nintex Forms - Tab like Functionality

Hi Vadim,

I've just implemented this, I love it! Quick question though, is the tab like functionality only available on edit mode? It appears that users can only get to all tabs when in edit mode. Minor issue, but I think it would be beneficial if users could view all tabs and information without actually being in edit mode.

Is this possible?

Thanks,
Darryl

Tuesday, October 27, 2015 11:37:33 AM
Darryl Coleman
Gravatar

re: Nintex Forms - Tab like Functionality

Nevermind on my last post, I read the comments section on this one and found my answer, my apologies! Great Post!

Thanks again, I look forward to your SharePoint sessions in Chicago in December!

Darryl

Tuesday, November 24, 2015 1:20:32 PM
Susan Fosse
Gravatar

re: Nintex Forms - Tab like Functionality

I was wondering how I could change the font color and background color of the active and inactive tabs created from radio buttons and rendered as buttons.

Tuesday, November 24, 2015 1:42:42 PM

re: Nintex Forms - Tab like Functionality

Although I haven't tried this, I'd look at the HTML/CSS behind the control and see if there's some CSS already out there that you can use to accomplish this.

Vadim

Friday, November 27, 2015 6:48:05 AM
Leif Frederiksen
Gravatar

re: Nintex Forms - Tab like Functionality

Hi Vadim,

 

Yet another great article from your pen - thanks.

 

Two questions:

1) When I select a tab, I get a lot of blank space from the panels above the selected tab's associated panel. It does not seem to be browser related (as per one of the eralier comments). What should I look for?

2) In the Choice control that defines the tabs, I want some of them to be hidden or disabled based on some rule. (My case is that an "Administrator" tab should only be accesible to users who are member of a certain group). How can I accomplish this?

 

Thanks in advance,

Leif

Saturday, November 28, 2015 9:11:19 AM

re: Nintex Forms - Tab like Functionality

Hi Leif,

Make sure you have at least a tiny (1 pixel) gap between the panels.  I think if there's an overlap, there is a chance that is won't clean up the white space.

I don't believe there's an easy way to hide the tabs themselves.  Maybe with some JavaScript.  That's just a guess.

cheers,

Vadim

Monday, November 30, 2015 4:31:17 AM
Leif Frederiksen
Gravatar

re: Nintex Forms - Tab like Functionality

Hi,

Answering the first of my own questions: I managed to get rid of the blank space, by adding some space between the panels. 

Still hoping for some input on the other question regarding setting some of the tabs to disabled or hiding them. 

 

Regards

Leif

Monday, November 30, 2015 6:52:22 AM
Leif Frederiksen
Gravatar

re: Nintex Forms - Tab like Functionality

Hi Vadim,

Ok, that's noted - thanks a lot for your input :-)


Regards

Leif

Wednesday, March 2, 2016 5:17:18 AM
Ryan
Gravatar

re: Nintex Forms - Tab like Functionality

Thanks! I was able to get it set up without any issues. My question is on the display form, I change the tab control to edit mode and work fine. But when the form loads it always goes to the last tab instead of the first tab. The default value on the choice control is the first tab and works on the new form, but edit and display it defaults to the last tab.

Friday, March 4, 2016 9:20:04 PM

re: Nintex Forms - Tab like Functionality

That's weird Ryan.  Have you reached out to Support about this?

Vadim

Friday, March 11, 2016 2:15:22 PM
Ivan
Gravatar

re: Nintex Forms - Tab like Functionality

Hi Vadim, 

 

I am having an issue where the display view is not displaying the Default tab, it does not display any information. I changed the control mode on the choice to "Edit" but when i click on the list, i have to click on the actual tab to display information from the form. Please let me know if you know of a resolution. 

Thanks, 

Ivan

Monday, March 14, 2016 8:24:24 AM
Sheila
Gravatar

re: Nintex Forms - Tab like Functionality

Wonderful feature!  Thanks for sharing!   My question is - can you use an IF statement to set the default tab based on mode?   If the mode is New Item, then I want Tab1 to be the default.  If the mode is Edit Item, then I want Tab2 to be the default.

Monday, March 14, 2016 8:54:47 AM

re: Nintex Forms - Tab like Functionality

Hi Sheila,

I believe that should be do-able with the rules.  But there's need to be something special in the rule also, so that it knows this is the first time rule is being run.  Not sure how you'd do that though.

You'd need this, so that it only sets the first tab and not just stay on that tab even if you try to switch.

Vadim

Wednesday, April 27, 2016 2:38:51 PM
bhashwar bhattarai
Gravatar

re: Nintex Forms - Tab like Functionality

Hello Vadim,

Thank you for the great post. 

I was able to successfully implement the tab feature. My question is after you submit the form and go ahead and view the form from the list you will have to edit the form to view everything that is inside other hidden tab.

Is there anyway we can preview submitted items without editing.

Thank you.

Wednesday, April 27, 2016 3:00:18 PM

re: Nintex Forms - Tab like Functionality

Hi Bhashwar,

I think there's a setting on the Choice control, under Advanced, for the behavior.  You should be able to change that.

Vadim

Thursday, May 5, 2016 1:48:43 AM
Benj
Gravatar

re: Nintex Forms - Tab like Functionality

I tried to use NWF$(':radio[value="Document Status"]').attr('checked',true);}); to default my view on first tab.

But my panel will not show up. It is not changing.

 

Please help

Monday, May 9, 2016 11:14:04 PM
June
Gravatar

re: Nintex Forms - Tab like Functionality

Hi Vadim,

 

Just wondering if there is a way of getting the selected tab value in javascript.

 

Thanks

Sunday, May 29, 2016 10:31:55 PM
Vinay
Gravatar

re: Nintex Forms - Tab like Functionality

Is the Nintex Tab functioniality still available? I am not seeing the option 'Render as buttons'. 

Sunday, May 29, 2016 10:32:56 PM
vinay
Gravatar

re: Nintex Forms - Tab like Functionality

Is the Nintex Tabs functionality still avaialble? I am not seeing tje option 'Render as Buttons' in the choice controls. Is something changed in the latest versions.?

Tuesday, May 31, 2016 8:32:26 AM

re: Nintex Forms - Tab like Functionality

Yes it is.  Make sure you set your choice control to Option buttons.  Then the Render as Buttons appears.

Vadim

Tuesday, May 31, 2016 9:04:29 AM
Sean
Gravatar

re: Nintex Forms - Tab like Functionality

I have the same question as Benj. JavaScript you provided above changes the tab order but panel does not get updated.

Wednesday, January 31, 2018 8:20:19 AM

re: Nintex Forms - Tab like Functionality

Hi Vladim,

I have created a Nintex form with tabs like functionality. Does each tab require to have a Save/Submit button? Or do I only need two buttons Save/Submit for the entire form? 

 

 

Wednesday, January 31, 2018 10:04:18 AM

re: Nintex Forms - Tab like Functionality

Hi Natalie, You just need the one save/submit because it'll save the entire form. Cheers, Vadim
You must sign in to this site to post comments.
Already Registered?
Sign In
Not Yet Registered?
Register

Statistics

  • Entries (279)
  • Comments (1769)

Categories