Wizard Steps

-1
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?
asked
2 answers
2

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!

answered
3

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

https://academy.mendix.com/link/paths/56/Create-an-App-with-Advanced-Page-Building

 

Specifically this section.
https://academy.mendix.com/link/modules/184/lectures/1434/4.3-The-Wizard-Page-Template

answered