Vadim Tabakman

Jump to bottom

Nintex Forms - Accordion Like Functionality

Accordion functionality in forms is a nice feature.  It makes for slicker usage of the form, since not everything needs to be displayed on a huge form, which can overwhelm a person filling in that form.

I recently had a question on how to get this type of functionality into a Nintex Form.  A big shout out goes to Daniel Kinal (@dktpm on Twitter) who came up with the idea behind what I'm posting here.  Daniel is a Nintex Forms guru.

To get the accordion style functionality, there is a little bit of work to be done, but if you want this type of functionality in your form, it's well worth it.

VIDEO

What Is Required for this Form Design?

This form will use a number of features that are part of Nintex Forms.  You will need some rules and also some JavaScript.  I go into some details of this in the video above, but it comes down to that there's no Toggle button yet in Nintex Forms.  The only way to simulate toggling is to use a check box.  But when it comes to an accordion, we want buttons, not check boxes.  For each section of the accordion, you will need to have a Yes/No control.  Then, you need to hide these Yes/No controls using a rule.  The rule I put in the form simply checks that if this form is a New/Edit/Display or Live form, I want to hide the Yes/No controls.

Next, we have a rule for each section.  Each section, being a Panel (groups a bunch of controls).  The rules for each section is based on the value of the Yes/No control that corresponds to it and hides that section if the yes/no is not checked.

Finally, we have a button for each section and the buttons are configured to be JavaScript button, each calling their own JavaScript function.

After clicking on a button

All the JavaScript is doing, is finding the appropriate Yes/No control and calling the click() function on it.  Simulating a button click or checking/unchecking the box.  This will cause the rules to re-evaluate and will then hide/show the appropriate section.

What does the Javascript look like?

var onlyOneSectionVisible = true;
var currentVisibleSection = -1;
 
NWF$(document).ready(function()
{
});

function fnShowSection(iSection)
{
  if(onlyOneSectionVisible == true)
  {
      if(currentVisibleSection != iSection)
      {
        var controlClass = NWF$('.cssCheckBoxSection' + iSection);
        var myInput = controlClass.find('input');
        myInput.click();
        if(currentVisibleSection != -1)
        {
          controlClass = NWF$('.cssCheckBoxSection' + currentVisibleSection);
          myInput = controlClass.find('input');
          myInput.click();
        }
      }
  }
  else
  {
    var controlClass = NWF$('.cssCheckBoxSection' + iSection);
    var myInput = controlClass.find('input');
    myInput.click();
  }

  currentVisibleSection = iSection;
}
 
function fnSectionOneClick()
{
  fnShowSection(1);
}

function fnSectionTwoClick()
{
  fnShowSection(2);
}

function fnSectionThreeClick()
{
  fnShowSection(3);
}

function fnSectionFourClick()
{
  fnShowSection(4);
}

function fnPreviousPage()
{
  if(currentVisibleSection == 1)
    return;
  if(currentVisibleSection == -1)
    fnShowSection(1);
  else 
    fnShowSection(currentVisibleSection-1);
}

function fnNextPage()
{
  if(currentVisibleSection == 4)
    return;
  if(currentVisibleSection == -1)
    fnShowSection(1);
  else 
    fnShowSection(currentVisibleSection+1);
}

Important Information

In the JavaScript, there is a variable at the very top that is called onlyOneSectionVisible and it's set to true.  This means that as you click on one of the other sections, it will close the previous one and open the new one.

If you want to allow for multiple sections to be open at one time, set that variable to false.

Downloads

Nintex Forms 2013

Download the 2013 Form - Download (unzip) and import it into the Form Designer Page (UPDATED - added Previous and Next Buttons)

Download the 2010 Form - Download (unzip) and import it into the Nintex Forms 2010 Designer Page

Download the 2010 Form (supports multiple open sections) - Download (unzip) and import it into the Nintex Forms 2010 Designer Page

Posted by Vadim Tabakman Wednesday, June 11, 2014 9:25:00 AM Categories: Accordion Javascript Nintex Forms Nintex Forms 2013 Rules
Copyright Vadim Tabakman
Rate this Content 0 Votes

Comments

Thursday, July 31, 2014 9:36:26 AM
Pat
Gravatar

re: Nintex Forms - Accordion Like Functionality

Took me awhile to figure it out, but make sure the css class of the checkbox buttons are "cssCheckBoxSection1" so the javascript for each button properly references them.

Friday, August 1, 2014 7:05:47 AM
Pat
Gravatar

re: Nintex Forms - Accordion Like Functionality

Additionally, set the control mode in the advanced section of both checkboxes to Edit mode. This will give functionality to the sections while also in Display mode.

Friday, August 1, 2014 3:09:54 PM

re: Nintex Forms - Accordion Like Functionality

Hi Pat,

thanks for those comments.

cheers,

Vadim

Sunday, August 24, 2014 4:34:24 PM
June
Gravatar

re: Nintex Forms - Accordion Like Functionality

Hi Vadim,

I'm trying to create a Nintex Form (2010) with multiple pages. Like a survey, that people can click "Back" and "Next" to move to another page. Do you know how can I implement this? Some ideas would be much appriciated.

Thanks,

June

Monday, August 25, 2014 3:06:47 PM

re: Nintex Forms - Accordion Like Functionality

Hi June,

I've updated the 2013 and 2010 downloads to have a next/previous button.  Hope that helps.

cheers,

Vadim

Wednesday, August 26, 2015 10:23:24 PM
Abhi
Gravatar

re: Nintex Forms - Accordion Like Functionality

Hi Vadim

Do you have anything that I can use to toggle between tabs? e.g. next and previous button but going forward and back between tabs

I have created a form, using tab like functionality and now want to add next and previous buttons

Thanks

Abhi

Thursday, August 27, 2015 8:55:32 AM

re: Nintex Forms - Accordion Like Functionality

Hi Abhi,

I'm afraid I don't.  I've been meaning to put something like that together, but haven't had time.

cheers,

Vadim

Tuesday, September 8, 2015 4:17:38 PM
div
Gravatar

re: Nintex Forms - Accordion Like Functionality

Vadim,

Can you please provide step by step instructions on how to implement this?

Tuesday, September 8, 2015 10:28:29 PM

re: Nintex Forms - Accordion Like Functionality

Hi Div,

I don't understand what you mean. I have explained how to implement this in the text above, also in the video and I've even provided the examples of the form to download.

What else do you need?

cheers,

Vadim

Tuesday, October 6, 2015 8:48:31 PM
Dee
Gravatar

re: Nintex Forms - Accordion Like Functionality

Hi Vadim,

When I apply the section visibility and hide checkbox rules on my nintex form that has 5 panels and do a preview publish,  it displays a blank form.

I've copied your code above and inserted into custom Javascript and also configured the Client click function as shown in the video.

Could you please let me know if I've missed any steps?

Thanks in advance

Cheers,

Dee

Wednesday, October 7, 2015 8:53:10 AM

re: Nintex Forms - Accordion Like Functionality

hi Dee,

rules are basically JavaScript. If there's a syntax error, that would result in breaking all the JavaScript and breaks the form.

cheers

vadim

Sunday, October 11, 2015 2:47:06 AM
Dee
Gravatar

re: Nintex Forms - Accordion Like Functionality

Hi Vadim,

There was a typo in my customcss, I managed to fix the issue. Thanks for your help.

Cheers

Dee

Monday, October 12, 2015 1:42:42 PM

re: Nintex Forms - Accordion Like Functionality

That's awesome Dee.  Well done.!!

Thursday, December 10, 2015 8:43:03 AM
Dave
Gravatar

re: Nintex Forms - Accordion Like Functionality

When I try to import the 2013 file into the designer, it fails and gives me a dialog "Locate a Nintex Forms export file (.xml) to upload. Looks like it doesn't see the "FormAccordian4.xml" ?

Thursday, December 10, 2015 9:25:56 AM

re: Nintex Forms - Accordion Like Functionality

did you unzip the file first?

vadim

Friday, March 25, 2016 9:45:45 AM
Amaresh Lele
Gravatar

re: Nintex Forms - Accordion Like Functionality

It doesn't work in Display mode? I tried changing the Control Mode for the check boxes to Display or Edit mode, but it still didn't work and the edit function also got screwed. I put it back to Auto and Edit is fine now but the display still shows blank. Any tips for this fix?

You must sign in to this site to post comments.
Already Registered?
Sign In
Not Yet Registered?
Register
  • RSS





 

Statistics

  • Entries (235)
  • Comments (1721)

Categories