cancel
Showing results for 
Search instead for 
Did you mean: 
Not applicable

CREATING TABBED FORMS IN NINTEX FORMS FOR OFFICE 365

Tabs are a graphical control element that allow multiple panels to be contained within a single window, so you can easily switch between panels. It is an interface style most commonly associated with most modern web forms.

In this exercise, We are going to design a basic Employee Details forms with two tabs.

You will need to create a SharePoint list with the following columns for this tutorial.

  1. Title (Default SharePoint Column)
  2. First Name
  3. Last Name
  4. Emergency Contact Name
  5. Emergency Contact No

Tab1: Details

1.jpg

Tab2: Emergency Contact

2.jpg

Step 1:

In the Nintex Forms Designer, we will first change our canvas height to 900 so that we have some space for us to work and rearrange our controls. To change the canvas height go to Layout Settings and change the value of Canvas Height in the General Section.

3.jpg

Clear all controls from the canvas.

Step 2:

Drag two panels onto the canvas. Name the panels as DetailsPanel & EmergencyContactPanel. Change background colour of both the panels to white

Add controls into the panel from the list column section. This will ensure you do not lose the Connected to settings for the input controls. Arrange the controls based on your requirement on which tab you would like your controls to appear. For this exercise, I have arranged the controls as shown below

Panel 1:  DetailsPanel

4.jpg

Panel 2: EmergencyContactPanel

5.jpg

Step 3

Add a choice control at the top of the canvas. Name the choice control as TabButton.It is compulsory to name the choice control as we will be referencing the control in the Rules section later.

6.jpg

Then double click on the choice control to change the Setting properties.

Go to General Sections, do the following:

  • Change the Display Format to Option Buttons.
  • Add values in the Choices field. In this exercise I have added Details, and Emergency Contact as the two choices. This values will appear as your Tab title during runtime.
  • Set the Default Value as Details to ensure the first Tab is selected when the form loads during runtime.

7.jpg

In Formatting section, do the following:

  • Set the Control CSS class to customtab. This class name will be used to style our Choice control as a tab in our custom CSS section later.

8.jpg

In Advanced section, do the following

  • Set the Control Mode to Edit. This is to ensure our tabs are clickable on all form modes during runtime.

9.jpg

Step 5

Now we will add two rules, to show and hide the panels based on the value of the choice controls.

Rule 1: Hide DetailsPanel when choice value is not equal to Details.

  • Select DetailsPanel from Controls in use. Click on Add Rule. Click Formula Button  to add a formula.
  • Add the formula as shown below.

10.jpg

Click OK once done.

Then check the hide checkbox. The final results should look like below.

11.jpg

Rule 2: Hide EmergencyContactPanel when choice value is not equal to Emergency Contact

  • Select EmergencyContactPanel from Controls in use. Click on Add Rule. Click Formula Button to add a formula.
  • Add the formula as shown below.

12.jpg

Click OK once done.

Then check the hide checkbox. The final results should look like below.

13.jpg

Step 6

The next step is to add our Custom CSS to achieve a tabbed look and feel of the choice control. To achieve that, go to Form Settings > Custom CSS.

Copy and paste the CSS below into the Custom CSS section:


.customtab {


    float: left;


}


.customtab tr {


        float:left;


}


.customtab label {


        background: #eee;


        padding: 7px 3px;


        border: 1px solid #ccc;


        margin-left: -1px;


        position: relative;


        left: 1px;


        border-radius:5px 5px 0px 0px;


        cursorSmiley Tongueointer;


        border-bottom:none;


        text-align:center;


}


.customtab [type=radio] {


        display: none;


}


[type=radio]:checked ~ label {


    background:white;


    border-bottom: 1px solid white;


    z-index: 2;


}





Click Save once done.

Step 7

Finally place the EmergencyContactPanel below the DetailsPanel as shown below. Make sure there is some space between the Choice Control and the DetailsPanel. The final result is shown below.

14.jpg

Step 8

Publish the form. The published form is now ready to be used. The form should look exactly as shown in the beginning of this post.

Comments and ideas are most welcome.

Thank You.

Reply
45 Replies
kk89
Nintex Newbie

Re: CREATING TABBED FORMS IN NINTEX FORMS FOR OFFICE 365

Thanks for this wonderful article. This works great on office 365 forms. I tried to put your CSS on a separate file and include that file in includes CSS but it didn't work. This solution only works if I put CSS in a custom CSS as you described above. Do you know why it doesn't work from a separate file?

0 Kudos
Reply
robin
Nintex Newbie

Re: CREATING TABBED FORMS IN NINTEX FORMS FOR OFFICE 365

I am using Office 2010 and can get most of the above to work but it loads with the radio button next to the text instead of as per your diagram at the top of the page. Is this due to it not being office 365? Is there any way this can be done in 2010?

Thanks

0 Kudos
Reply
Not applicable

Re: CREATING TABBED FORMS IN NINTEX FORMS FOR OFFICE 365

Hey Robin, you can achieve the same functionality in Nintex Forms 2010 using rules and the choice control, instead of CSS. Vadim Tabakman‌ has recorded a short video demonstrating how this works Create Tab like functionality on your Nintex Forms

0 Kudos
Reply
robin
Nintex Newbie

Re: CREATING TABBED FORMS IN NINTEX FORMS FOR OFFICE 365

Thanks Emily, I used that post to set it up in the first place but what I want to do is change the colouring of the buttons as well as maybe the hover over colour and the selected colour to something over than grey! I know I can use css to do this but can't get it to do what I want, do you know if anyone else has done something similar?

Regards

0 Kudos
Reply
Not applicable

Re: CREATING TABBED FORMS IN NINTEX FORMS FOR OFFICE 365

Hey Robin, I'm not so familiar with that area. I've posted a question in the Learn More‌ area, so more of the community will see it Nintex Forms - How can I change the button and hover color with CSS?

0 Kudos
Reply
robin
Nintex Newbie

Re: CREATING TABBED FORMS IN NINTEX FORMS FOR OFFICE 365

many thanks Emily, i think that if i knew more about CSS i would have cracked it by now!

0 Kudos
Reply
Not applicable

Re: CREATING TABBED FORMS IN NINTEX FORMS FOR OFFICE 365

Hello Jeremy,

This has been very helpful for one of my requirement. Thank you.

I'm facing one problem. I'm using Nintex form 2013. When i click on the second tab "Emergency Contact', the corresponding panel doesn't show up. It works properly when i click on Details tab. Please see below.

I think there is some problem with adding multiple rules in Nintex forms 2013. Can you point out what might be the cause of this error here.

Thanks again.

John King

Capture.PNG

0 Kudos
Reply
Not applicable

Re: CREATING TABBED FORMS IN NINTEX FORMS FOR OFFICE 365

Hi John,

    Could you please check if your rule to hide the Emergency Contact panel is correct. From the screenshot, your tab is Emergency Contact with the space between y and C, so please ensure your rule has the space as well. The comparison is based on that string. Hope this helps

0 Kudos
Reply
Not applicable

Re: CREATING TABBED FORMS IN NINTEX FORMS FOR OFFICE 365

Hi John/Jeremy

Are you able to fix your problem.... Even I am facing the same problem which you faced.....

0 Kudos
Reply