cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Workflow Hero

Skip pages in multi page form based on multi-select choice field?

Jump to solution

So, following along with this tutorial: How to design a Multi-Step form with Nintex Forms for Office 365 , I got pretty far on my multi-page form! But, I want to show certain pages conditionally, which led me to this question: Skip pages in a multi-step form . 

My case is slightly different, however, as I'm not checking exactly a checkbox status, I'm seeing if a checkbox is checked in a multi-select choice control. As I'm AWFUL at Javascript (read: useless) I'm a bit stuck. I found this comment from Sean Fiene‌, https://community.nintex.com/message/25778#comment-26033  about identifying the multi-select checkbox bits, and I got his "showMe" function to work great, but I guess I'm stuck on putting the puzzle pieces together.

Right now my form looks a bit like this:

The "IT Request Information" should only show if "IT Request" is checked, and there are other panels that are the same way (ex there's a panel for "Mobile Device" and "Employee Transfer TO your team" etc). 

If anyone could also tell me, how to auto-check "IT Request" and "Facilities Access Request" if the user checks "New Hire," and not let them uncheck it, that'd be great. Or if there's a better way to force them to fill out those bits of the form if they select New Hire, that's fine too.

The final piece here is making sure they fill out each piece of the panels they're shown (not letting them advance "next" unless they've filled out all the parts of that panel). 

Whew! That's a lot. But this is my first Javascript adventure, so any help at all would be amazing!

Perhaps ‌, ‌, or ‌ can help this poor noob out?

Labels: (1)
0 Kudos
Reply
27 Replies
Workflow Hero

Re: Skip pages in multi page form based on multi-select choice field?

Jump to solution

Hi Courtney,

Can you upload your form somewhere so we can take a look at it? I might be able to help you get this bit sorted out.

Cheers!

Aaron

0 Kudos
Reply
Workflow Hero

Re: Skip pages in multi page form based on multi-select choice field?

Jump to solution

Hey Aaron! I've been kind of trial and erroring it, and here's the code I've got so far:

function goStep(step)
{
var hiddenTxtBox = NWF$("#"+hiddenTxtBoxId);
hiddenTxtBox.val(step);
NWF.FormFiller.Functions.ProcessOnChange(hiddenTxtBox);
}

var alreadyShown[];

function showMe() {
var c = [];
NWF$('#' + multiChoices + ' :checkbox:checked').each(function(i) {
c = NWF$(this).val();
console.log(c);
if(c=="IT Request"){
goStep(it);
alreadyShown.unshift(c);
}
else if(c=="Facilities Access Request")
{
goStep(facilities);
alreadyShown.unshift(c);
}
else if(c=="Request Mobile Device for Employee")
{
goStep(mobile);
alreadyShown.unshift(c);
}
else if(c=="Request SECU Client and Access for Employee")
{
goStep(secu);
alreadyShown.unshift(c);
}
else if(c=="Employee Transfer TO your team")
{
goStep(transferTo);
alreadyShown.unshift(c);
}
else if(c=="Employee Transfer FROM your team")
{
goStep(transferFrom);
alreadyShown.unshift(c);
}
else
{
goStep(turnover);
alreadyShown.unshift(c);
}
});
}

The plan here, is that the first Next button calls the showMe function, and then all subsequent next buttons call goStep(c[0]) and the previous buttons call goStep(alreadyShown[0])

But again, I know so little about js this might not work at all.

And here is a link to my form export: Microsoft OneDrive - Access files anywhere. Create docs with free Office Online. 

This is my first time sharing code or a form, so please let me know if I need to change it at all.

0 Kudos
Reply
Workflow Hero

Re: Skip pages in multi page form based on multi-select choice field?

Jump to solution

Your JS is breaking something on my end

I will have to step through it and get some more details, but you are in good hands with ‌!

0 Kudos
Reply
Workflow Hero

Re: Skip pages in multi page form based on multi-select choice field?

Jump to solution

Hey Jesse!

I made a quick change before posting it, which I realized afterwards, broke it D: Bad Courtney.

I've made a bit of progress and my current code looks like this:

function goStep(stepNumber)
{
var hiddenTxtBox = NWF$("#"+hiddenTxtBoxId);
hiddenTxtBox.val(stepNumber);
NWF.FormFiller.Functions.ProcessOnChange(hiddenTxtBox);
console.log(alreadyShown);
console.log(stepID);
}
var alreadyShown = [];
var stepID = [];
function showMe() {
var c = [];
NWF$('#' + multiChoices + ' :checkbox:checked').each(function(i)
{
c = NWF$(this).val();
console.log(c);
if(c=="IT Request")
{
goStep(2);
alreadyShown.unshift(c);
stepID.unshift(2);
}
else if(c=="Facilities Access Request")
{
goStep(3);
alreadyShown.unshift(c);
stepID.unshift(3);
}
else if(c=="Request Mobile Device for Employee")
{
goStep(4);
alreadyShown.unshift(c);
stepID.unshift(4);
}
else if(c=="Request SECU Client and Access for Employee")
{
goStep(5);
alreadyShown.unshift(c);
stepID.unshift(5);
}
else if(c=="Employee Transfer TO your team")
{
goStep(6);
alreadyShown.unshift(c);
stepID.unshift(6);
}
else if(c=="Employee Transfer FROM your team")
{
goStep(7);
alreadyShown.unshift(c);
stepID.unshift(7);
}
else if(c=="Employee Turnover")
{
goStep(8);
alreadyShown.unshift(c);
stepID.unshift(8);

}
else
{
goStep(9);
alreadyShown.unshift(c);
stepID.unshift(9);
}
});
}

This is *currently* not breaking anything on my end, but it is also not 100% working. I am somehow skipping whatever the second page ought to be. As in, I get the landing panel, then when I click next, it always skips the "first" thing that should be next, if that makes sense. Like, if I have selected "IT Requests" then that should be the next page, but it won't be, it gets skipped. And that's persistent across whichever ones I select. But I've made some progress!

The first "Next" button (on the landing page) is set to call showMe() and all subsequent "Next" buttons call gostep(stepID[0]) so I think something is screwy with my array. The "Previous" buttons all call goStep(stepID[1]) (except the "IT Requests" previous, since that should always go to the landing page, it just calls goStep(1))

0 Kudos
Reply
Workflow Hero

Re: Skip pages in multi page form based on multi-select choice field?

Jump to solution

Hey Aaron Labiosa‌, any luck? I'm trying a different method now, but I'm getting an error array.length does not exist, even though the array does contain content.

For reference, this is what I'm currently working with:

function goStep(stepNumber)
{
var hiddenTxtBox = NWF$("#"+hiddenTxtBoxId);
hiddenTxtBox.val(stepNumber);
NWF.FormFiller.Functions.ProcessOnChange(hiddenTxtBox);

}

var c =[];
var options = [];

function showMe() {

c = NWF$('#' + multiChoices + ' :checkbox:checked');
{
console.log(c);

var arrayLength = c.length();

for (var i = 0; i < arrayLength++; i++)
{
var arrayValue = (NWF$(c).val);
console.log(arrayValue);
options.push(arrayValue);
console.log(options);
}

if(options[0]== "IT Request")
{
goStep(2);
}
else if(options[0]== "Facilities Access Request")
{
goStep(3);
}
else if(options[0]== "Request Mobile Device for Employee")
{
goStep(4);
}
else if(options[0]== "Request SECU Client and Access for Employee")
{
goStep(5);
}
else if(options[0]== "Employee Transfer TO your team")
{
goStep(6);
}
else if(options[0]== "Employee Transfer FROM your team")
{
goStep(7);
}
else if(options[0]== "Employee Turnover")
{
goStep(8);

}
else
{
goStep(9);
}
}
}

function nextPage()
{
var arrayLength = options.length();
var currentPage = NWF$("#"+hiddenTxtBoxId);
console.log(currentPage);
var currentPageIndex = options.indexOf(currentPage);

if (arrayLength - 1 == currentPage)
{
goStep(9);
}
else
{
var nextPageIndex = currentPageIndex++;
var nextPage = options[nextPageIndex];
goStep(nextPage);
}

}

function prevPage()
{
var currentPage = NWF$("#"+hiddenTxtBoxId);
console.log(currentPage);
var currentPageIndex = options.indexOf(currentPage);
if (currentPageIndex == -1)
{
arrayLength = options.length();
prevPageIndex = arrayLength--;
}
else
{
var prevPageIndex = currentPageIndex--;
}

var prevPage = options[prevPageIndex];
goStep(prevPage);

}

0 Kudos
Reply
Workflow Hero

Re: Skip pages in multi page form based on multi-select choice field?

Jump to solution

Hi Courtney,

Apologies, I was sick over the weekend and did not really go online much. I am going to take a look at what you have this afternoon.

Cheers!

0 Kudos
Reply
Workflow Hero

Re: Skip pages in multi page form based on multi-select choice field?

Jump to solution

No worries, like I said before, I'm just starting out with JS so I'm sure it's something I'm missing or misunderstanding. I really appreciate any assistance you can provide! Hope you're feeling better 

0 Kudos
Reply
Workflow Hero

Re: Skip pages in multi page form based on multi-select choice field?

Jump to solution

So I have some ideas about how this could be done however, my tenant is pending an update and I need to wait for the IT team to come online to apply the update.... :\

That said, I would take a look at iterating the checkboxes and then attaching an onchange event to each that could then execute show()/hide() on the panels instead of using the built in validation (it just makes things simpler). To identify the panels with jquery, you could give them a css class like 'ntxITRequestPanel'. Once I have access to Forms again, I will mock something up for you to go off of.

Here is a quick summary of what I have worked up so far:

  1.     for (var item in NWF$('#' + multiChoices + ' :checkbox:checked')) {
  2.  
  3.         if (item.val() == "IT Request") {
  4.             item.onchange = function () {
  5.                 NWF$(".ntxITPanel").show()
  6.             }
  7.         }
  8.  
  9.     }
0 Kudos
Reply
Workflow Hero

Re: Skip pages in multi page form based on multi-select choice field?

Jump to solution

Hey Aaron,

Thanks for the lightning fast response! Perhaps I'm misunderstanding you, but wouldn't that show the panels as they checked the boxes, rather than when they click "Next," showing the next panel (based on which checkboxes they've selected)? Which, is similar to utilizing the built-in rules capability of Nintex Forms, no?

If so, and I'm understanding you correctly, would there be a way to leverage part of your solution still to achieve what I'm looking for? And while I'm at it, let me make sure I've fully illuminated my goal here:

At form start, the only visible panel is the one that ends with the Next button. Then there is a panel with controls in it for each of those checkbox options (ex IT Request has the fields for the stuff we need to know if they want to make an IT Request). I only want to show one panel at a time, flipping through them with the Next and Previous buttons I've put on each panel, and only showing the panels for which they've indicated they'd like to complete a request. The first panel will always be the "initial info" type panel you see at the top of my form screenshot, and there is also a final end panel  that will confirm submission and ask if there are any additional details. This final panel will have a Save and Submit, a Cancel, and a "Previous" button.

Does this make sense? Thanks again!

0 Kudos
Reply