Step "onLoad" event or wizard "onNavigate" event?

  • 1
  • Question
  • Updated 2 years ago
  • Answered
Is there an event that I can bind to when the step of a wizard is loaded? Or any other way to make javascript execute when a given step is loaded?

I have some complex logic where I might need to automatically take the user to a future step if certain data is present. No matter how they get there, I'd like to execute some code whenever they arrive at that step. Instead of duplicating the code in each entry point, it would be nice if there was one place to put it.

Example:

Entry point 1: conditionally skip step 1 (on page load)


if(task.myField__c){
var wizard = skuid.component.getById('myWizard');
wizard.element.steps.step1.navigate('step2');

alert('welcome to step 2'); //common code
}else{
//continue with step1
}


Entry point 2: action button snippet


skuid.snippet.registerSnippet('toStep2',function(args) {
var params = arguments[0],
step = params.step;
step.navigate('step2');

alert('welcome to step 2'); //common code
});
Photo of Charlie Jonas

Charlie Jonas

  • 670 Points 500 badge 2x thumb

Posted 5 years ago

  • 1
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
Hi Charlie,

Yet another undocumented feature, there is such an event. The Wizard component itself fires a "stepchange" event whenever the step is changed, and hands you the current and former steps.

Here is an example Inline JavaScript resource that binds an on stepchange handler to a particular Wizard instance:



(function(skuid){

skuid.$(function($){

$('#MyWizard').on('stepchange',function(e,data){

console.log(data);

var currentStep = data.currentStep,
formerStep = data.formerStep;

if (currentStep.id === 'step2') {
if (formerStep.id === 'step1') {
alert('You just moved from Step 1 to Step 2! Can you believe it?');
} else {
alert('You just moved from '+formerStep.label+' to ' + currentStep.label);
}
}

});

});

})(skuid);





currentStep and formerStep are Step objects, containing as properties the Step id, label, and a reference to each Step's associated editor, allowing you to drill down to get the DOM element for each step as well.

Photo of Dennis Atwood

Dennis Atwood

  • 72 Points
We used this undocumented feature, and just discovered the javascript isn't working in our sandbox on version 9.3.3.  Did the wizard "stepchange" feature change with the Brooklyn release?
Photo of Charlie Jonas

Charlie Jonas

  • 670 Points 500 badge 2x thumb
Good stuff. Exactly what I was hoping; should help clean up my code a good bit.
Photo of Charlie Jonas

Charlie Jonas

  • 670 Points 500 badge 2x thumb
In case anyone is wondering a similar event exists for tab navigation called 'tabshow'
Photo of Simon Parker

Simon Parker

  • 420 Points 250 badge 2x thumb
This works fine when I have the wizard on a straight page, but when I put it as a Page Include in a pop-up it doesn't. How do I get the code to execute when the pop-up opens so that the wizard page change is picked up?
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
In the code above, Instead of putting your code inside of a jQuery document ready block, bind to Skuid's 'pageload' event that is fired whenever a page is loaded, whether it's a top-level page, or a page include:

Replace:  skuid.$(function($) {
With: skuid.$(document.body).one('pageload',function() {


In completeness:

(function(skuid){   
   var $ = skuid.$;
   skuid.$(document.body).one('pageload',function() {
      $('#MyWizard').on('stepchange',function(e,data){
         console.log(data);
         var currentStep = data.currentStep,
            formerStep = data.formerStep;
         if (currentStep.id === 'step2') {
            if (formerStep.id === 'step1') {
               alert('You just moved from Step 1 to Step 2! Can you believe it?');
            } else {
               alert('You just moved from '+formerStep.label+' to ' + currentStep.label);
            }
         }
      });
   });
})(skuid);
(Edited)
Photo of Kalyan Kuchi

Kalyan Kuchi

  • 176 Points 100 badge 2x thumb
Hi,

I tried to navigate from one step to other by doing the following in javascript but it doesnt seem to be working. Any ideas?

 $('#MyWizard').prototype.navigate( step2);

Thanks.

KR.
Photo of Zach McElrath

Zach McElrath, Employee

  • 48,984 Points 20k badge 2x thumb
Call navigate directly on a Wizard component instance:

skuid.$C('MyWizard').navigate('step2'); 
Photo of Kalyan Kuchi

Kalyan Kuchi

  • 176 Points 100 badge 2x thumb
This worked. Thanks.