Wizard Reference

Use the Wizard Pattern with ListRecords

1. Drag the Wizard Pattern into the screen.

2. In the Content placeholder, drag a ListRecords widget.

3. Set the Line Separator parameter of the ListRecords to None.

4. In the ListRecords widget, drag a WizardItem Pattern.

5. In the WizardItem Pattern, use expressions to display the database content you need.

6. Publish and test.

Create a wizard navigation

Use this example to create a three steps Wizard with continue and back buttons.

1. Drag the Wizard Pattern into the page. By default, it comes with three WizardItems.

2. Create a Local Integer Variable, named WizardStepIndex, to hold the current Wizard step.

3. Drag two Button widgets and set their names to Continue and Back.

4. Create a new Screen Action named WizardNavigation.

   

5. Create a mandatory boolean Input Parameter on this action named IsNext.

6. Drag an Assign and set WizardStepIndex, to If(IsNext, WizardStepIndex + 1, WizardStepIndex - 1).

   

7. Drag an AjaxRefresh to refresh your content container on the screen.

8. Set the OnClick of the Continue Button to the action WizardNavigation with Ajax Submit as the Method. Set the IsNext parameter to True.

9. Do the same for the Back button, but set the parameter to False.

   

10. In each WizardItem, add this If condition: If(WizardStepIndex = 1, Entities.Step.Active, If(WizardStepIndex = 0, Entities.Step.Next, Entities.Step.Past)) to the Step parameter.

11. Wrap the content containers in Ifs and set the condition to the respective step.

    
    

Custom style for active step

To implement this, you can use either method described below.

• Write the following CSS in the CSS editor and change the yourcolor.

  .wizard-item.active .wizard-item-icon {
      border: 2px solid #fff;
      background-color: yourcolor;
      color: #fff;
  }
  
  .wizard-item.active .wizard-item-icon::after {
      background-color: transparent;
      border-radius: 50%;
      border: 2px solid #fff;
      box-shadow: 0 0 0 1px yourcolor;
      content: '';
      height: 100%;
      position: absolute;
      width: 100%;
  }
  

• Use CSS variables like var(--color-yourcolor).

  .wizard-item.active .wizard-item-icon {
      border: 2px solid var(--color-neutral-0);
      background-color: var(--color-yourcolor);
      color: var(--color-neutral-0);
  }
  
  .wizard-item.active .wizard-item-icon::after {
      background-color: transparent;
      border-radius: 50%;
      border: 2px solid var(--color-neutral-0);
      box-shadow: 0 0 0 1px var(--color-yourcolor);
      content: '';
      height: 100%;
      position: absolute;
      width: 100%;
  }