CREATING TABBED FORMS IN NINTEX FORMS FOR OFFICE 365

[#1]

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

Tab2: Emergency Contact

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.

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

Panel 2: EmergencyContactPanel

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.

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.

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.

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.

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.

Click OK once done.

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

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.

Click OK once done.

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

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;
        cursorointer;
        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.

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.

[kk89]

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?

[robin]

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

[#4]

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

[robin]

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

[#6]

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?

[robin]

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

[#8]

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

[#9]

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

[#10]

Hi John/Jeremy

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