cancel
Showing results for 
Search instead for 
Did you mean: 
aaron_labiosa
Nintex Newbie

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

Jump to solution

Hi Courtney,

Ahhh, yes you are correct! In that case instead of doing the show/hide in the onchange event, you could have it throw those values into an array and then iterate the array on the button press and call show/hide in the button press function. Again, I would probably pull the logic for show/hide out of the built in validations and just use js for it since you are building the rest of your logic there (it just makes things easier).

As soon as I get access to my environment I will check this out more as well.

Cheers!

Aaron

Sent from Mail<https://go.microsoft.com/fwlink/?LinkId=550986> for Windows 10

0 Kudos
Reply
courtney_shelto
Nintex Newbie

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

Jump to solution

Hey Aaron,

So I tried this:

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

function showMe() {

{
console.log(c);

for (var item in NWF$('#' + multiChoices + ' :checkbox:checked'))
{
     switch(item.val())
     {
          case "IT Request":
               options.push(1);
               break;
          case "Facilities Access Request":
               options.push(2);
               break;
          case "Request Mobile Device for Employee":
               options.push(3);
               break;
          case "Request SECU Client and Access for Employee":
               options.push(4);
               break;
          case "Employee Transfer TO your team":
               options.push(5);
               break;
          case "Employee Transfer FROM your team":
               options.push(6);
               break;
          case "Employee Turnover":
               options.push(7);
     }
}
}
}

To try to create the "options" array through which I could move, as my nextPage() and prevPage() functions look like this:

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);
     
}

goStep() is the same as the tutorial. 

But when I try all this code, the first "Next" button throws out an error of " item.val is not a function":

0 Kudos
Reply
aaron_labiosa
Nintex Newbie

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

Jump to solution

Try wrapping the item in jquery: NWF$(item).val()

Does that work?

Sent from Mail<https://go.microsoft.com/fwlink/?LinkId=550986> for Windows 10

0 Kudos
Reply
aaron_labiosa
Nintex Newbie

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

Jump to solution

I see the issue I believe,

Try setting up the following for your iteration:

var items = NWF$('#' + multiChoices + ' :checkbox:checked');

for (var item in items) {

 switch(items[item].val())
 {

 }

}

0 Kudos
Reply
courtney_shelto
Nintex Newbie

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

Jump to solution

Unfortunately, I'm getting essentially the same error:

items[item].val is not a function

0 Kudos
Reply
aaron_labiosa
Nintex Newbie

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

Jump to solution

Strange, that works for me. Try doing the NWF$(items[item]).val() in there.

Sent from Mail<https://go.microsoft.com/fwlink/?LinkId=550986> for Windows 10

0 Kudos
Reply
courtney_shelto
Nintex Newbie

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

Jump to solution

Like this?

This gives me

Also, gotta ask, are you working in 365? And am I missing something somewhere else, possibly? Do I need to be including anything here?

0 Kudos
Reply
courtney_shelto
Nintex Newbie

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

Jump to solution

Made some progress, but the var item (the array of the multi-select boxes) are storing random-ish things and they end with _0 for the first _1 for the second, etc. 

And the middle part (between ctl14 and the _0) changes every time. So I was trying to evaluate what it ends with, but I think I'm doing something wrong with that:

function showMe() {
{
var items = NWF$('#' + multiChoices + ' :checkbox:checked');
console.log(items);
for (var item in items)
{
     var currentValue = NWF$(item).val();
     console.log(currentValue);

     if (currentValue.endsWith(0))
     {
     options.push(1);
     }
     else if (currentValue.endsWith(1))
     {
     options.push(2);
     }

Because currentValue is empty, and so we can't check the .endsWith against that.

0 Kudos
Reply
courtney_shelto
Nintex Newbie

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

Jump to solution
var currentLocation = 1;
var dict = {};
dict["Landing Page"] = 1;
dict["IT Request"] = 2;
dict["Facilities Access Request"] = 3;
dict["Request Mobile Device for Employee"] = 4;
dict["Request SECU Client and Access for Employee"] = 5;
dict["Employee Transfer TO your team"] = 6;
dict["Employee Transfer FROM your team"] = 7;
dict["Employee Turnover"] = 8;
dict["Final Page"] = 9;
var chosenOptions;


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


function showMe() {
    var i = 1;
    chosenOptions = [];
    console.log("Adding option " + i + ": " + "Landing Page");
    chosenOptions[i++] = dict["Landing Page"];
    NWF$('#' + multiChoices + ' :checkbox:checked').each(function(index) {
        var value = NWF$(this).val();
        console.log("Adding option " + i + ": " + value);
        chosenOptions[i++] = dict[value];
    });
    console.log("Adding option " + i + ": " + "Final Page");
    chosenOptions[i] = dict["Final Page"];
    console.log(chosenOptions);
    goStep(chosenOptions[++currentLocation]);
}


function nextPage() {
    goStep(chosenOptions[++currentLocation]);
    console.log("Nexting to page " + currentLocation + ": " + chosenOptions[currentLocation]);
}


function prevPage() {
    goStep(chosenOptions[--currentLocation]);
    console.log("Preving to page " + currentLocation + ": " + chosenOptions[currentLocation]);
}

This is the final working javascript; it doesn't validate the required fields prior to them clicking "Next," that's the next step for me. But, this allows me to go between pages based on the checkboxes that are checked.

View solution in original post

0 Kudos
Reply
thomas_xu
Nintex Newbie

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

Jump to solution

Hi Courtney Vargo‌ ! 

Great work. Seems like you have sorted out most of your questions already. The only missing piece I am seeing here is the validation on "Next" or "Previous" button click.  With the fact that button action is configured to fire a javascript function it would be very messy as we will have to maintain a variable for each panel as I presume you have mandatory fields in side each panel. And then we will need to have very customised function to validate fields within each panel based on that panel validation variable. Personally I wouldn't go down that messy path although it is doable...   

Just a thought, it seems you have configured your panels to show automatically based on checkbox values. Do you still need the next or previous buttons?  What I am picturing (and this is how I would tackle this scenario) is have only one submit button that is configured to Save and Submit. And then have some generic javascript validation functions that only validates when fields are visible bound to those mandatory fields in your form. This way when a user clicks submit it will always validate them for the mandatory fields in those visible panels. 

See my example below on validating a textbox field. 

javascript function that can be applied to all your text fields

function validateText(source, arguments) {
arguments.IsValid = false;


// Ensure field is visible (not hidden by form Rules)
var fieldDisplayed = NWF$("#" + source.controltovalidate).is(":visible");

//auto skip validation when fields not visible
if (!fieldDisplayed) {
arguments.IsValid = true;
return;
}

if (arguments.Value === undefined || arguments.Value === null || arguments.Value === "") {
arguments.IsValid = false;
return;
}
else {
arguments.IsValid = true;
}
return;
}

Let me know your thoughts on this. Happy to discuss and assist further

0 Kudos
Reply