Can I use branching with the Wizard Component?

edited February 22, 2016 in Questions
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.
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!