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

edited March 2, 2017 in Questions
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  });  

Comments

  • edited March 2, 2017
    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.
  • edited January 29, 2014
    Good stuff. Exactly what I was hoping; should help clean up my code a good bit.
  • edited April 9, 2014
    In case anyone is wondering a similar event exists for tab navigation called 'tabshow'
  • edited November 18, 2014
    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?
  • edited March 2, 2017
    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 March 2, 2017
    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.
  • edited December 21, 2016
    Call navigate directly on a Wizard component instance:

    skuid.$C('MyWizard').navigate('step2'); 
  • edited September 24, 2015
    This worked. Thanks.
  • edited April 5, 2019
    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?
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!