Wizard Navigation generic javascript

  • 3
  • Idea
  • Updated 3 years ago
  • Not Planned
You can run the following inline javascript snippets from pagetitle component buttons anywhere within a wizard to navigate with javascript.

Let me know if there's a more elegant way to accomplish this!

//Next Step
var button = arguments[0].button,
$ = skuid.$;
var wizard = $(button).closest('.nx-wizard').data('object'),
currentStep = wizard.steps[wizard.currentstep],
stepKeys = Object.keys(wizard.steps),
currentIndex = stepKeys.indexOf(wizard.currentstep);
if (stepKeys[currentIndex + 1]) {
currentStep.navigate(stepKeys[currentIndex + 1]);
}

//Previous Step
var button = arguments[0].button,
$ = skuid.$;
var wizard = $(button).closest('.nx-wizard').data('object'),
currentStep = wizard.steps[wizard.currentstep],
stepKeys = Object.keys(wizard.steps),
currentIndex = stepKeys.indexOf(wizard.currentstep);
if (stepKeys[currentIndex - 1]) {
currentStep.navigate(stepKeys[currentIndex - 1]);
}
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb

Posted 3 years ago

  • 3
Photo of mB Roman Melnik

mB Roman Melnik

  • 2,802 Points 2k badge 2x thumb
Hey Matt, thanks for posting this snippet. Very useful.

I've noticed that when I try to use this snippet in a button that "Runs Multiple Actions", I get the following error:
"Uncaught TypeError: Cannot read property 'steps' of undefined"

Please see the images below:





Would you happen to know how to tweak the code to avoid this? Thanks.

Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
It looks like when skuid runs the snippet as part of a "Run multiple actions" framework, it's not passing "button" to the snippet as a parameter.

I recommend adjusting your jQuery selector. You would give your wizard an unique id, and select it with:

var wizard = $('MyUniqueWizardId).data('object');
Photo of mB Roman Melnik

mB Roman Melnik

  • 2,802 Points 2k badge 2x thumb
Thanks for pointing me in the right direction Matt, greatly appreciated!

For those interested in running Matt's snippet on a button with Multiple Actions, this worked for me:
var button = arguments[0].button,	
$ = skuid.$;
var wizard = $('#MyUniqueWizardId').data('object');
var currentStep = wizard.steps[wizard.currentstep];
var stepKeys = Object.keys(wizard.steps),
currentIndex = stepKeys.indexOf(wizard.currentstep);
if (stepKeys[currentIndex + 1]) {
currentStep.navigate(stepKeys[currentIndex + 1]);
}
(Edited)
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Glad you got it working. if you're not going to use the reference to 'button', feel free to eliminate it like so:
var $ = skuid.$;
var wizard = $('#MyUniqueWizardId').data('object');
var currentStep = wizard.steps[wizard.currentstep];
var stepKeys = Object.keys(wizard.steps),
currentIndex = stepKeys.indexOf(wizard.currentstep);
if (stepKeys[currentIndex + 1]) {
currentStep.navigate(stepKeys[currentIndex + 1]);
}
Photo of Christopher Johnson

Christopher Johnson

  • 694 Points 500 badge 2x thumb
This seems like a great solution for greater button placement flexibility - thanks for sharing! One clarification - does this approach pick up all the configuration for a given button? eg if it is run multiple actions or if it has settings for model save.
Photo of mB Roman Melnik

mB Roman Melnik

  • 2,802 Points 2k badge 2x thumb
Hey Chris, yes it works for multiple actions - which is exactly the kind of functionality i was looking for (being able to run a snippet, as well as standard Skuid button actions).
Photo of Christopher Johnson

Christopher Johnson

  • 694 Points 500 badge 2x thumb
Ok, so I gave this a try but I don't quite understand the logic of how to match up the buttons on wizard with these. In my case I have 3 buttons on most pages (back, save and exit, next). I was able to get the back and next buttons to work but couldn't figure out how to make a button to match the "save and exit" (which is a model save and redirect to url action).

Also, to clarify, my understanding is this approach requires one JS snippet for each type of button (ie one for back, one for next, ...). Is that correct?

Thanks!
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
The save and exit button should not require a snippett. The only reason the back and next buttons need js is because we have not exposed the navigation process more widely than just the wizard component.  So items that are IN the wizard can't affect the wizard step.