Nintex Forms – Working With Tabs

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!

16 Responses to “Nintex Forms – Working With Tabs”

  1. Morpheusse February 19, 2013 at 9:54 am #

    Hi ;)

    I have a problem with you guide, it don’t work on my sharepoint.

    You can see by yourself :

    http://sebastien.nocaudie.free.fr/Nintex%20Prob.png

    And i thought its was problem with the include file but i don’t know why because i add those lines :

    http://sebastien.nocaudie.free.fr/includefiles.png

    i wish you could help me with this error … :)

    Thank you ;) This is a great tutorial !

  2. shereen February 22, 2013 at 9:27 am #

    Can you send me a screenshot of your form designer?

  3. Bjones February 22, 2013 at 1:43 pm #

    I am having the same issue as Morpheusse. It does not hide the 3 child panels and when I click one of the “tabs” at the top it takes me to a new page. Has there been any updates on this problem?

  4. shereen February 26, 2013 at 3:00 pm #

    Hey guys, I can definitely help out with this, but I need a few screenshots:
    1. Send me a screenshot of your form builder view.
    2. Send me a screenshot of the nintex settings page.
    3. Send me a screenshot of the properties of each panel.
    4. Send me the contents of your files.

    You can email me at shereen at qumsieh.ca, or we can setup a gotomeeting and I can show you how it’s done :) Or perhaps I should put together a video??

  5. Eduardo March 18, 2013 at 11:13 am #

    Hi! Your post is fantastic, but I’m having the same problem. Can you help me? Should I create a specific type of list in SharePoint? My tabs turned links to another window.
    You can export a example file.xml and send me? Thanks!

  6. Eric May 8, 2013 at 2:25 pm #

    I’m having the same issue as Eduardo. Did anyone ever figure out the fix for this? Thanks.

  7. shereen May 8, 2013 at 6:22 pm #

    Hi Eric,

    Any chance you can send me screenshots? I’d like to help but need a bit more info.

  8. Brian Pulliam May 30, 2013 at 12:57 pm #

    How does this behave if you post the form to live? Since it won’t be able to talk to the custom.js, does this get loaded up along with everything else?

  9. shereen June 27, 2013 at 4:38 pm #

    Hi guys,

    I am going to be revising this post and I’ll address all questions like Brian’s about leveraging Nintex Live. I will post an update over the weekend so please check back!

  10. TOC September 6, 2013 at 11:37 am #

    Hey there Shereen,
    first of all: Great guide! There’s just one thing. The Pictures are gone. For example I can’t see the custom css classes, which are used to enable the Show/hide function. Is there any possibilty you could extract the informations on the Pictures into your guide? So even if the Pictures are gone, everyone’s able to get the informations out of the text.

    Thank you in advance :)

  11. Shereen Qumsieh September 6, 2013 at 5:55 pm #

    Hi TOC,

    I’m working on this! My blog was hacked and everything was deleted but I’ll be redoing this article :)

  12. Abhimanyu October 21, 2013 at 6:49 am #

    Hi the screenshots on ur posts are not visible. They are broken links shows a cross. Can you please look into it. since it will help in better understanding.

  13. Shereen Qumsieh October 28, 2013 at 8:18 pm #

    Hi Abhimanyu,

    My blog was hacked and I had to work on restoring what I could. I’ll have to redo this post and it’s on my list of things to get done. So sorry for the delay!

Trackbacks/Pingbacks

  1. Nintex Forms – Working With Tabs | SharePoint Development & Ops | ARB Security Solutions - SharePoint Security Integrators - January 21, 2013

    [...] Post From SharePoint Development – Google Blog Search: This post is the 4th in the Nintex Form series and will cover configuring tabs within a Nintex [...]

  2. Как прикрутить к Nintex Forms закладки (tabs) | Внедрение Sharepoint / ECM - April 30, 2013

    [...] Однако умельцы смогли прикрутить к ним это: http://blog.qumsieh.ca/2013/01/21/nintex-forms-working-with-tabs/ [...]

  3. jQuery-UI, Tabs and Nintex Forms. - June 3, 2013

    [...] was that it wasn’t a feature yet supported by Nintex Forms, but was on the future roadmap. Shereen Qumsieh did a great blog post some month backs about creating tabs using an additional jQuery [...]

Leave a Reply