This is a really exciting post, because I wasn’t sure how feasible it was going to be to add tabs to a Nintex Form. My first attempts at it weren’t very successful. I was trying to leverage an existing jQuery plugin for tabs – EasyTabs – but the structure wasn’t flexible enough for me to do what I needed to do.

So I decided to just wire the entire thing up myself. I’m going to walk you though a set of steps that will essentially produce custom Tabs within a Nintex Form, like you see here:

Cool right? Ok, let’s get started. I’m going to assume you already have a list setup with some default columns and you’re in the Edit mode for your Nintex Form. When you first enter the edit mode on any Nintex Form, you’ll have a default set of columns already added on the page. Let’s go ahead and remove them all, so you should have a blank canvas like this:

Next, we’ll need to add a reference to the jQuery library within Settings, Custom Javascript Includes. I’m also going to add a reference to a custom.js file where I’ll put my custom tab logic. This will be empty for now, but not to worry, we’ll populate it shortly.

IMPORTANT!: Replace someurl with the location of your custom.js file.

1
2

https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js
https://someurl/custom.js

Now I want my tabs to be styled nicely, so I’m going to include the bootstrap.css file. I choose bootstrap because we use it quite heavily in a lot of our projects and it looks really slick. However, you can style them whichever way you like. So within Settings, Custom CSS Includes, add the following entry:

1

https://someurl/bootstrap.css

IMPORTANT!: Replace someurl with the location of your bootstrap.css file.

So here’s where we should be at:

Alright, so let’s setup our tabs. On your form, you’ll want to add a Rich Text control. Double click the control and Edit the HTML Source. Add the following html:

1
2
3
4
5
6
7

<div id="twitter-bootstrap-tabs">
    <ul class="tabs">
        <li class="active" id="home"><a href="#" target="_blank">Home</a></li>
        <li id="profile"><a href="#" target="_blank">Profile</a></li>
        <li id="messages"><a href="#" target="_blank">Messages</a></li>
    </ul>
</div>

You can customize the tabs above to suit your needs, all you need to understand is that we’re going to setup a panel for each tab we’ve defined above.

Below your Rich Text control, add a new Panel control. This control should take up the entire height of the form. We are going to setup 3 nested Panels within this parent Panel in just a second. Double click on this parent Panel and within Appearance, set the CSS class to panels.

Ok now the heavy lifting. Add 3 panels to the parent Panel. Each one should be given a CSS class name that matches the id of the tab. So: home, profile and messages. Here is where we are at:

Now go ahead and add some list columns to each of the panels as required. Once again here is where we are at:

And now the javascript that we’ll need to add to our custom.js file:

1
2
3
4
5
6
7
8
9
10
11
12
13

$('.panels div.profile').addClass('hide');
$('.panels div.messages').addClass('hide');
$('.panels div.settings').addClass('hide');
 
$('.tabs li').click(function(event) {
    event.preventDefault();
    $('.tabs li.active').removeClass("active");
    $(this).addClass("active");
 
    $('.panels div.show').removeClass('show').addClass('hide');
    $('.panels div.' + $(this).attr("id")).removeClass('hide').addClass('show');
    return false;
});

It’s really important that the event.preventDefault() line is there, as it will prevent the default click event from firing.

Finally, add a couple of custom css classes that will maintain the show/hide logic for each panel. Within Settings, Custom CSS, add the following:

That’s it! Go ahead and test it out! You may notice a couple of odd ball things that are happening.

1. The home panel content does not hide when you first click another panel. What you’ll want to do here is add the show class to the home panel.

   

2. Now this is a bigger issue, the position of the panels are one below the other, so the experience is a bit off when switching between panels, to resolve this, you’ll want to override the top css property as follows:

   

That should do it! How awesome is that? Any problems just let me know!