Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

Applies only to Mobile Apps and Reactive Web Apps

 

 

OutSystems

Wizard

Template:OutSystems/Documentation_KB/ContentCollaboration
  • Edit
    Collaborate with us
    Edit this page on GitHub
  • You can use the Wizard UI Pattern to split large complex tasks and processes into smaller manageable steps. A wizard presents a series of steps or conditions that the user needs to complete in order to accomplish a goal. Additionally, wizards usually include explicit button navigation to move a step forward or backward. Some wizard examples include software installation wizards and sign-up screens.

    How to use the Wizard UI Pattern

    The following example demonstrates how you can create a four step Wizard with navigation buttons. The example is made up of the following steps:

    • Creating a wizard
    • Adding content to the wizard
    • Creating the wizard navigation

    Create a wizard

    1. In Service Studio, in the Toolbox, search for Wizard.

      The Wizard and Wizard Item widgets are displayed (both of which are required to use this pattern).

    2. From the Toolbox, drag the Wizard widget into the Main Content area of your application's screen.

      By default, the Wizard widget contains three Wizard Item widgets. Each Wizard Item represents a step. You can add or delete Wizard Items as required.

    3. From the Toolbox, drag another Wizard Item into your Wizard Pattern.

    4. Drag the Text widget into the Icon placeholders, and enter the numbers 1-4 consecutively.

    5. Enter the following text to each of the Label placeholders:

      • Shopping Details
      • Payment Details
      • Review Order
      • Confirm Order

    6. From the Element tree, create an Input Parameter by right-clicking on your screen, and from the drop-down, select Add Input Parameter.

      The input parameter controls which Wizard step is shown to the user.

    7. On the Properties tab, set the Input Parameter properties as follows:

      • Name: CurrentStep
      • Data Type: Integer
      • Is Mandatory: No
      • Default Value: 1

      By setting the Default Value to 1, you ensure that the Wizard always starts on step 1.

    8. To create the logic that defines the status of each Wizard Item (as an active step, a past step, or a next step), select the first Wizard Item (step 1), and on the Properties tab, from the Status drop-down, select Expression Editor.

    9. In the expression editor, enter the following expression and click DONE:

      If(CurrentStep = 1, Entities.Steps.Active,If(CurrentStep > 1, Entities.Steps.Past, Entities.Steps.Next))

      This logic has the following meaning:

      • If the user is on step 1, the step is displayed as the active step in the wizard.
      • If the user is on a step greater than step 1, step 1 is displayed as a step that is in the past (completed).
      • If the user is on a step less than 1, the step is displayed as an upcoming (next) step.
    10. Repeat steps 8 and 9 for all of the Wizard Items. Replace the number 1 in the expression with 2, 3, and 4 respectively.

    Add content to the wizard

    1. From the Toolbox, drag the If widget onto the main content area of your application's screen, just below the Wizard Pattern.

    2. On the Properties tab, from the Condition dropdown, select Expression Editor, enter the following logic and click DONE:

      CurrentStep = 1

      You have now created a condition that controls what's displayed on screen when the step is active.

    3. Repeat steps 1 and 2 for all of the Wizard Items. Replace the Condition logic with 2, 3, and 4 respectively.

    4. In the top section (True) of the If widget, create the relevant content for each of the steps.

      The following example shows a Shipping Details step that contains labels and input boxes.

    Create the wizard navigation

    1. From the Toolbox, drag two Button widgets onto your screen.

    2. On the Properties tab, in the Name property, enter a name for each of the buttons (in this example, Previous and Next).

    3. To ensure that all of the information the user enters is passed from step to step, create a screen action by selecting the Next button, and on the Properties tab, from the OnClick drop-down, select New Client Action.

    4. From the Toolbox, drag the Assign block onto your screen and set the Variable property to CurrentStep and the Value property to CurrentStep + 1. This ensures that user inputs are passed from step to step.

    5. Repeat steps 3 and 4 for the Previous button, setting the Variable property to CurrentStep and the Value property to CurrentStep - 1.

    6. To display the Next button when applicable, select the Next button, right-click, and select Enclose in If.

    7. On the Properties tab, in the Condition property, enter the following:

      CurrentStep < 4

      You have now created a condition that ensures that the user can never go above the number of steps in the wizard.

    8. Repeat steps 6 and 7 for the Previous button. Enter CurrentStep > 1 as the Condition logic. This ensures the Previous button is only displayed when applicable, and the user can never go below the number of steps in the wizard.

    After following all of the steps in each of the sections, you can publish the module, and test the Wizard in your app.

    Properties

    Wizard

    Property Description
    IsVertical (Boolean): Optional If True the wizard is displayed vertically. If False, the wizard is displayed horizontally. This is the default.
    ExtendedClass (Text): Optional

    Add custom style classes to the Wizard UI Pattern. You define your custom style classes in your application using CSS.

    Examples

    • Blank - No custom styles are added. This is the default.
    • "myclass" - adds the myclass style to the Wizard UI styles being applied
    • "myclass1" "myclass2" - Adds the myclass1 and myclass2 styles to the Wizard UI styles being applied.

    Wizard Item

    Property Description
    Status (Step Identifier): Mandatory

    Set the status of the Wizard Item relative to the current step of the Wizard. You can customize an expression to set the status of the Wizard Item or you can use the predefined values Active, Next, and Past.

    Examples

    • Entities.Step.Active - Sets the Wizard Item to active, that is, the current step the user is on.
    • Entities.Step.Next - Sets the Wizard Item to incomplete, that is, a step that is yet to be completed by the user.
    • Entities.Step.Past - Sets the step to inactive, that is, a step that has already been completed by the user.
    UseTopLabel (Boolean): Optional If True, the label (text descibing the step) is placed above the icon. If False, the label is placed below the icon. This is the default.
    ExtendedClass (Text): Optional

    Add custom style classes to the Wizard Item UI Pattern. You define your custom style classes in your application using CSS.

    Examples

    • Blank - No custom styles are added. This is the default.
    • "myclass" - Adds the myclass style to the Wizard Item UI styles being applied.
    • "myclass1" "myclass2" - Adds the myclass1 and myclass2 styles to the Wizard Item UI styles being applied.
    • Was this article helpful?