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 modal, 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 (add 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:

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 [[]]

  • Wizard Layout Direction: Controls how the wizard’s steps are displayed.

    • Horizontal
    • Vertical

  • Vertical Layout on smaller screens: If checked, when Wizard Layout Direction is set to Horizontal, but the user’s screen is too narrow to display all the steps, the steps will stack vertically.

  • Hide step labels: If checked, Skuid does not display the clickable progress indicator labels that appear at the top of the Wizard component. Users must navigate the Wizard using the builder-defined Step buttons at the bottom of the wizard.

    Note

    This option is only available with horizontal Wizard Layout Direction.

  • Disable step buttons: If checked, disables the clickable progress indicator buttons. These buttons can then be conditionally enabled using display logic.

  • Unique Id (optional): Skuid automatically generates an alphanumeric Id for the component; if preferred, give it a practical name.

Display Logic tab [[]]

Standard display logic options allow you to display or hide the Wizard component, based on defined data conditions.

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.
  • Align Buttons: Determines the location of the step buttons within the Wizard. Options include:
    • Left: All step buttons are clustered on the left.
    • Right: All step buttons are clustered on the right.
    • Center: All step buttons are centered.
    • Separated: Step buttons are spaced out along the length of the Wizard.

Tooltip tab [[]]

A floating box that displays when the user hovers over a button, the tooltip provides guidance usage.

  • Text: The tooltip’s content.

  • Position: This field determines the alignment of the tooltip relative to the button:

    • Top (default): Above the button.
    • Bottom: below the button.
    • Left: to the left of the button.
    • Right: to the right of the button.

    Note

    The Position settings are contingent upon available space. For example, if the Button Set is at the top of the page, and the tooltip position is set to Top, the tooltip cannot display above the button: there’s not space. So it will display below the button.

  • Tooltip Style:

    • Dark (default): The tooltip box is a black.
    • Light: The tooltip box is white, with a drop shadow.

  • Compact Size: Reduces the amount of padding around the text in the tooltip box.

Button properties

The properties available on Wizard buttons are the same as those for Button Set buttons.