Use the milestone component to show steps in a wizard.
Configure links for each step in the milestone so that the user can move forward or return to any step.
This design pattern is not recommended for offline interfaces because reflecting immediate changes in an interface based on user interaction requires a connection to the server.
This scenario demonstrates:
How to create a wizard using the showWhen parameter of a SAIL component
How to use a milestone field to show the current step of the wizard
How to show and change the style of buttons
Test it out
Click Next without entering a value in any of the fields. The user will stay on step 1 until all fields are entered.
Enter values for all the field. Click Next. Notice the milestone progress will move to step 2
Enter values for all required fields in step 2. Click Go to Review. Notice that all values entered will appear as a set of read only data and the milestone field progresses to 'Review'
Notable Implementation Details
The showWhen parameter is used extensively to conditionally show particular fields as well as set requiredness & read only setting.
Each "Next" button is configured to increment local!currentStep. Validate is set to true, which ensures all fields are required before continuing on to the next step.
Each "Go Back" button is not configured to enforce validation. This allows the user to go to a previous step even if the current step has null required fields and other invalid fields. This button also decrements local!currentStep by one.
The milestone field is configured without links, however links could be added that navigate a user back to a particular step.