Wizard

The Wizard component allows you to create multi-step processes that move users through screens in a specified order. Users can execute complex business processes in a straightforward step-by-step fashion, without getting confused or overwhelmed.

Before you build a Wizard

The Wizard component is a powerful tool, but with great power comes great responsibility. Built thoughtfully, a Wizard can make the navigation of complex processes faster and less confusing; built without insight into the needs of users, a Wizard can simply become one more thing that slows them down.

Start by asking yourself the following questions:

  • What do users need to accomplish at the end of the Wizard?
  • Look at the way users currently work on this task:
    • Where is there confusion?
    • Where are the pitfalls?
    • Are there opportunities to make mistakes or overlook part of the process?
  • How many steps does it take reach desired end result?
    • In what order (and why that order?)
  • For each step, what’s the best way for them to complete the tasks for that part of the process?

Now, sketch out a loose flow chart of the steps needed within the Wizard, and look it over for any of those areas of confusion mentioned above. Only then build.

Using the Wizard Component

Configuring a Wizard consists of several stages:

Add the Wizard Component [[]]

Drag and drop a Wizard component into a page, a popup, or a sliding panel, and set the Wizard’s properties.

Build the steps [[]]

The Wizard component breaks up a process into steps. Each step is like a separate “mini-page” that you can configure with components and buttons. Add as many steps as needed (fa-plus-circle Add New Step), but configure them one step at a time by first adding components, then adding and configuring buttons.

Add and configure components [[]]

Add one (or more) components to each step, set their properties, and add any necessary elements (such as fields)

Component best practices

  • Streamline each component as much as possible by removing any unnecessary features, such as search boxes or Save/Cancel buttons.
  • In general, use Edit as the Default Mode when using Tables and Field Editors. This lets users quickly enter relevant information and tab through forms without needing to open the field with a double click.

Add and configure Step buttons [[]]

Other buttons

In addition to navigating through the wizard, users may need to to save, cancel, or perform other tasks. Build these buttons as you would in a Button Set or Page Title component, using the Action Framework. For example:

  • Create a Refresh button that returns users to the first step, cancels changes in all models and creates a new row in the appropriate model(s).
  • Include a Skip to Step 3 button in Step 1 if users don’t always to fill out Step 2 information.
  • Use display logic so users see only the buttons they need to use.

Button best practices

  • Give buttons helpful labels (and perhaps icons), so it’s clear to the user what they need to do.
  • Use the Step Id listed in the Step properties for the Step Id required on Wizard navigation buttons.

Note

Want to see a Wizard in action? For a specific use case that uses a wizard to create new records, see Create a New Account Wizard.

Using the Wizard with the File Upload component

If using the File Upload component in a Wizard that creates new records, the File Upload component can not attach a file to a record until the record is saved. Best practice:

  • In the Wizard properties pane, select Defer Rendering of Step Contents. By checking this property, all steps of the Wizard process render in order. This prevents the File Upload component from rendering before its record is created in a previous step.
  • Then, make sure to save the File Upload’s model in a step that precedes the one where users upload files using the component. Once the model saves, the record exists, and the file can be attached to it.

To see a use case, see File Upload in Wizards.

Best Practices

  • Wizard users are often creating and editing multiple objects, so an error when saving can lead to data disruption. When creating a Save Model Changes action on more than one model, check Roll back entire save on any error. This prevents the save (and any subsequent actions in the sequence) from happening until the user corrects the error.
  • Want to create conditional paths in the Wizard? (For example, if a user selects Option A from a picklist in Step 1, move to Step 2. But, if they select a Option B from that same picklist in Step 1, jump from Step 1 to Step 4, skipping Steps 2 and 3.) Use branch actions with the navigation buttons to create separate, conditional paths based on if/else statements. Or conditionally render buttons on the Wizard so that they only appear when they are relevant to the process.

Properties

Wizard properties

Basic tab [[]]

  • Defer Rendering of Step Contents: When checked, keeps the contents of each step from loading until users have navigated to that step. (This dramatically decreases load time for complex Wizards with lots of steps and components.)
  • Buttons Location: Locate Wizard buttons at top or bottom of the wizard.
  • Unique Id (optional): Skuid automatically generates an alphanumeric Id for the component; if preferred, give it a practical name.
  • CSS Class (optional): Assign a CSS class to the component’s DOM element.

Display Logic tab [[]]

Standard display logic options are available.

Step Properties

Basic tab [[]]

  • Step Id: How the step is identified for button navigation.
  • Step Label: A plain language label that tells user what the button is for and why they might want to click it.
  • Load Lazy Include Panels when Step is first shown: Check this box if the step includes a Page Include component that’s set to Lazy Load.

Button Properties

Most properties available on Wizard buttons are the same as those for Button Set buttons, with the following addition:

Basic tab [[]]

  • Action Type: Choose the type of action that the button will initialize:
    • Run multiple actions: The best option to create a series of actions initialized by the button using the Action Framework.
    • Cancel: The button cancels all on-screen changes.
    • Custom: The button runs a Skuid snippet.
    • Navigate: The button navigates to the step designated by the Step Id.
      • Step Id: The Id of the step to navigate to.
    • Save: The button saves all updates made in the current step.