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.

Good stuff. Exactly what I was hoping; should help clean up my code a good bit.

In case anyone is wondering a similar event exists for tab navigation called ‘tabshow’

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?

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){&nbsp; &nbsp;<br>&nbsp; &nbsp;var $ = skuid.$;<br>&nbsp; &nbsp;skuid.$(document.body).one('pageload',function() {<br>&nbsp; &nbsp; &nbsp; $('#MyWizard').on('stepchange',function(e,data){<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;console.log(data);<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var currentStep = data.currentStep,<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; formerStep = data.formerStep;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;if (currentStep.id === 'step2') {<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (formerStep.id === 'step1') {<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;alert('You just moved from Step 1 to Step 2! Can you believe it?');<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;alert('You just moved from '+formerStep.label+' to ' + currentStep.label);<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}<br>&nbsp; &nbsp; &nbsp; });<br>&nbsp; &nbsp;});<br>})(skuid);

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.

Call navigate directly on a Wizard component instance:

skuid.$C(‘MyWizard’).navigate(‘step2’); 

This worked. Thanks.

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?