Wizard Reference
Layout and classes
CSS selectors
Element | CSS Class | Description |
---|---|---|
.wizard | .wizard.wizard-vertical | When the wizard orientation is vertical |
.wizard-item | .wizard-item.active | Defines the current active step |
.wizard-item | .wizard-item.past | Defines the previous step |
.wizard-item | .wizard-item.next | Defines the next step |
Advanced use case
Use the Wizard Pattern with ListRecords
-
Drag the Wizard Pattern into the screen.
-
In the Content placeholder, drag a ListRecords widget.
-
Set the Line Separator parameter of the ListRecords to None.
-
In the ListRecords widget, drag a WizardItem Pattern.
-
In the WizardItem Pattern, use expressions to display the database content you need.
-
Publish and test.
Create a wizard navigation
Use this example to create a three steps Wizard with continue and back buttons.
-
Drag the Wizard Pattern into the page. By default, it comes with three WizardItems.
-
Create a Local Integer Variable, named WizardStepIndex, to hold the current Wizard step.
-
Drag two Button widgets and set their names to Continue and Back.
-
Create a new Screen Action named WizardNavigation.
-
Create a mandatory boolean Input Parameter on this action named IsNext.
-
Drag an Assign and set WizardStepIndex, to
If(IsNext, WizardStepIndex + 1, WizardStepIndex - 1)
. -
Drag an AjaxRefresh to refresh your content container on the screen.
-
Set the OnClick of the Continue Button to the action WizardNavigation with Ajax Submit as the Method. Set the IsNext parameter to True.
-
Do the same for the Back button, but set the parameter to False.
-
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. -
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%; }