Can I use branching with the Wizard Component?

  • 1
  • Question
  • Updated 5 years ago
  • Doesn't Need an Answer
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)



Here's a closer look at the snippet:


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.
Photo of John Nelson

John Nelson, Product Manager

  • 3,234 Points 3k badge 2x thumb

Posted 5 years ago

  • 1

Be the first to post a reply!