The Wizard’s pretty snazzy, but how would you use a field’s value to determine which step to show next? Well, keep reading. First, create a new Skuid page and paste in the following XML (save the page, scroll to the bottom and click “View/Edit XML”):

<skuidpage showsidebar="true" showheader="true"> <resources> <labels/> <javascript> <jsitem location="inlinesnippet" name="wizardLogic" url="">var $ = skuid.$; // retrieve the model var model = skuid.model.getModel('LeadData'); // get the first row var row = model.getFirstRow(); // check the value of the field var fieldToCheck = row.Watched_a_Demo__c; // get the reference to the wizard component // through the dom element's object value var wizard = $('.nx-wizard').data('object'); // save the model model.save({callback: function(result){ // if the save was successful... if (result.totalsuccess) { // check our field value if(fieldToCheck) { // if true, navigate to step3 wizard.skooWizard('navigate','step3'); } else { // if false, navigate to step2 wizard.skooWizard('navigate','step2'); } } else { // something may have gone wrong console.log(result.insertResults); console.log(result.updateResults); console.log(result.deleteResults); } }});</jsitem> </javascript> <css/> </resources> <models> <model id="LeadData" limit="100" query="true" createrowifnonefound="false" sobject="Lead"> <fields> <field id="LastName"/> <field id="FirstName"/> <field id="Watched_a_Demo__c"/> </fields> <conditions> <condition type="param" value="id" field="Id" operator="=" enclosevalueinquotes="true"/> </conditions> </model> </models> <components> <wizard> <steps> <step stepid="step1" steplabel="Step One"> <components> <basicfieldeditor showheader="true" showsavecancel="false" model="LeadData" mode="read"> <columns> <column width="50%"> <sections> <section title="Name"> <fields> <field id="FirstName"/> <field id="LastName"/> </fields> </section> </sections> </column> <column width="50%"> <sections> <section title="Checky Stuff"> <fields> <field id="Watched_a_Demo__c"> <label>Skip step two?</label> </field> </fields> </section> </sections> </column> </columns> </basicfieldeditor> </components> <actions> <action type="custom" label="Next Step" icon="ui-silk-arrow-right" window="self" snippet="wizardLogic"/> </actions> </step> <step stepid="step2" steplabel="Step Two"> <components/> <actions> <action type="navigate" label="Back to Step One" window="self" stepid="step1"/> </actions> </step> <step stepid="step3" steplabel="Step Three"> <components/> <actions> <action type="navigate" label="Back to Step One" window="self" stepid="step1"/> </actions> </step> </steps> </wizard> </components> </skuidpage> 

Here’s what the page looks like in the builder. And that’s pretty much it. I know, kind of anti-climactic. But there’s really not much to it. Here’s the skinny… We’re using a custom javascript snippet triggered by an action button within the wizard’s first step to call a snippet that does a few things:

1. It retrieves the current value of the page’s model (therefore the value of the checkbox we’re interested in)
2. It saves that model’s state to the database
3. It checks the value of the field
4. And lastly, based on the value of the field, it will navigate the wizard to the appropriate step (step3 if true, step2 if false)

var $ = skuid.$; // retrieve the model var model = skuid.model.getModel('LeadData'); // get the first row var row = model.getFirstRow(); // check the value of the field var fieldToCheck = row.Watched_a_Demo__c; // get the reference to the wizard component // through the dom element's object value var wizard = $('.nx-wizard').data('object'); // save the model model.save({callback: function(result){ // if the save was successful... if (result.totalsuccess) { // check our field value if(fieldToCheck) { // if true, navigate to step3 wizard.skooWizard('navigate','step3'); } else { // if false, navigate to step2 wizard.skooWizard('navigate','step2'); } } else { // something may have gone wrong console.log(result.insertResults); console.log(result.updateResults); console.log(result.deleteResults); } }}); 

Important note: I used a custom field for my checkbox, so you’ll need to replace that with a field that exists in your org for this example to work.