Wizard Steps

Hello,   I am using WizardStep widget. I did all the steps mentioned in the documentation. Created overview pages for WizarsStep and WizardStepList entity. In Navigation used this pages and configured the steps.  But I don’t know how to use this wizardstep widget in actual page, which I have created. I am using mendix version 9.24.4 Can you please guide me?
2 answers

Hi there,


Using wizard steps can be tedious but can result in a rewarding user experience. You have a couple of approaches you can follow:

  1. Multiple pages, in this approach you create a page per step
  2. Single page, in this approach you create a single page and control what is visible using dynamic classes.

Personally, I prefer the first scenario.


Looking at the step container

And then the individual step containers

The important thing with the step containers is the classes assigned to them. There are 3 classes:

  • wizard-step
  • wizard-step-active
  • wizard-step-visited

The class ‘wizard-step’ is required for all the step containers of your wizard step, to render a similar UI. The combination of ‘wizard-step wizard-step-visited’ (as shown above) is used to indicate the steps already visited. The combination of ‘wizard-step wizard-step-active’ is used to indicate the step you are currently on.


Depending on you need (and assuming you are following the multipage approach), you can also set-up the step containers to navigate to that step’s page. If you require to commit your progress when continuing, you can invoke either a Microflow or a Nanoflow of your choice (just remember to add the show page activity in your flow!). Also remember to close your current page when navigating to a new step wizard page, as it will result in a couple of open pages which will make for a poor user experience.


Lastly, the buttons on the bottom of the page can be configured just as the step containers mentioned above.


Hope it helps!


You can find a good example in the following Learning Path: 



Specifically this section.