CREATING TABBED FORMS IN NINTEX FORMS FOR OFFICE 365

Document created by jeremy.jayaraj Employee on Sep 11, 2014
Version 1Show Document
  • View in full screen mode

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;
        cursor:pointer;
        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.

5 people found this helpful

Attachments

    Outcomes