Breadcrumb

    About

    Wizards can be very useful in simplifying complex flows into smaller, more manageable steps. This page describes full page Wizards, modal dialog Wizards, and the Wizard Progress list template.

    Modal Dialog Wizard

    A modal dialog wizard can be used to perform a complex flow while maintaining context of the page.

    Step 1. Use the Create Page wizard and select Wizard.

    Step 2. Enter the number of pages you want in the wizard, and then set Page Mode to Modal Dialog

    Step 3. Follow the rest of the steps in the wizard to completion.

    Now you have a modal dialog wizard created with the page numbers you specified in the creation wiard.

    Full Page Wizard

    A full page wizard is useful when you want to maximize on screen realestate and a modal dialog is not appropriate. In order to create a full page wizard shown below, you will use Wizard Container region template for your Wizard Progress list, and as the container for your form regions.

    Step 1. Set Wizard Container as Region Template.

    Step 2. Set Wizard Steps as List Template.

    Step 3. Create a sub-region within the Wizard Container to store your form items and other content to be place in your wizard body.

    Use the Create Wizard page wizard to create a set of pages which have the same user interface. Simply set Page Mode to Normal and follow the steps.

    Example 1

    Wizard

    Current Progress

    • Step 1
    • Step 2
    • Step 3
    • Step 4

    Sub Region with Form Items

    Region Template Options

    • Use DefaultYes
    • Hide Steps ForSmall Screens (Tablet)

    List Template Options

    • Use DefaultYes
    • Label DisplayCurrent Step Only

    Example 2

    Wizard Title

    Current Progress

    • Step 1
    • Step 2
    • Step 3
    • Step 4

    Sub Region with Form Items

    Region Template Options

    • Use DefaultYes
    • Show TitleYes
    • Hide Steps ForX Small Screens (Mobile)

    List Template Options

    • Use DefaultYes
    • Label DisplayCurrent Step Only

    Template Options

    • General

      • Use Template Defaults
      • Show Title

    • Hide Steps For

      • X Small Screens (Mobile)
        Hides the wizard progress steps for screens that are smaller than 768px wide.
      • Small Screens (Tablet)
        Hides the wizard progress steps for screens that are smaller than 768px wide.
    • Advanced

      Item Padding

      Sets the padding around items within this region.

      • Default
      • Slim Padding
        Reduces form item padding to 4px.
      • Remove Padding
        Removes padding between items.
    • Advanced

      Item Size

      Sets the size of the form items within this region.

      • Default
      • Large
      • X Large
    • Advanced

      Item Width

      Sets the width of the form items within this region.

      • Default
      • Stretch Form Fields
    • Advanced

      Label Alignment

      Set the label text alignment for items within this region.

      • Right
      • Left
        Align form labels to left.
    • Advanced

      Label Position

      Sets the position of the label relative to the form item.

      • Inline - Default
      • Show Form Labels Above
        Show form labels above input fields.
    • Advanced

      Top Margin

      Set the top margin for this region.

      • Default
      • None
        Removes the top margin for this region.
      • Small
        Adds a small top margin to the region.
      • Medium
        Adds a medium top margin to the region.
      • Large
        Adds a large top margin to the region.
    • Advanced

      Bottom Margin

      Set the bottom margin for this region.

      • Default
      • None
        Removes the bottom margin for this region.
      • Small
        Adds a small bottom margin to the region.
      • Medium
        Adds a medium bottom margin to the region.
      • Large
        Adds a large bottom margin to the region.
    • Advanced

      Left Margin

      Set the left margin for this region.

      • Default
      • None
        Removes the left margin from the region.
      • Small
        Adds a small left margin to the region.
      • Medium
        Adds a medium right margin to the region.
      • Large
        Adds a large right margin to the region.
    • Advanced

      Right Margin

      Set the right margin for this region.

      • Default
      • None
        Removes the right margin from the region.
      • Small
        Adds a small right margin to the region.
      • Medium
        Adds a medium right margin to the region.
      • Large
        Adds a large right margin to the region.

    Button Positions

    Wizard Region With Buttons

    Current Progress

    • Step 1
    • Step 2
    • Step 3
    • Step 4

    Sub Region with Form Items

    Wizard Progress List

    The Wizard Progress List Template is used to display the total steps of a wizard along with a marker of the current step the user is on. This list has several options, and can be used in both horizontal or vertical orientations.

    Set Wizard Progress as the List Template

    The completed steps are marked with a green check mark where as the active step is indicated in the theme's accent color.

    Default Example

    Current Progress

    • Step 1
    • Step 2
    • Step 3
    • Step 4

    List Template Options

    • Use DefaultYes
    • Label DisplayAll Steps

    Simple Example

    Current Progress

    • Step 1
    • Step 2
    • Step 3
    • Step 4

    List Template Options

    • Use DefaultYes
    • Label DisplayHide Labels

    Vertical Example

    Current Progress

    • Step 1
    • Step 2
    • Step 3
    • Step 4

    List Template Options

    • Use DefaultYes
    • Vertical OrientationYes
    • Label DisplayAll Steps

    Template Options

    • General

      • Use Template Defaults
      • Vertical Orientation
        Displays the wizard progress list in a vertical orientation and is suitable for displaying within a side column of a page.

    • Label Display

      • All Steps
      • Current Step Only
      • Hide Labels