Overview

The wizard allows completion of a long or unfamiliar task by dividing it into steps and guiding people through it.

Look and feel

When to Use

1
do
false

Recommended

  • Create an entity which has a complex structure or many attributes related to it.
  • Create an entity which attributes are dependent on previous choices (branching paths).
  • Guide a person through long or unfamiliar task.
1
dont
false

Not Recommended

  • Avoid creating an entity in two steps or less. Consider using a dialog instead.
  • Avoid creating an entity in nine steps or more. Consider simplifying or automating parts of the flow itself.
  • Avoid editing of entities. Use a dialog or in-place editing instead.

Anatomy

Image
1
18.24; 84.56
Modal Dialog
The outermost container to hold the wizard.
2
21.02; 17.69
Dynamic Page
Placed inside the dialog. Used for header and footer.
3
21.02; 20.94
Dynamic Page Title
Contains the title of the dialog.
4
78.93; 62.19
Dynamic Page Footer
Contains all wizard navigation actions
5
35.10; 17.69
Wizard
Takes care of steps, their states and the content of each step.

In technology products, wizards are displayed inside of modal dialogs. As wizards typically take time to complete, they should block the UI until a task is complete or canceled. A modal dialog allows blocking of the interface without using page context. Dialogs have the benefits of being called from any part of the product, making the wizard highly reusable. In addition, dialogs allow for easy and fast negative path navigation since they close as soon as a person cancels the wizard.

When setting up the dialog for displaying wizards consider the following properties and their recommended values. Adjust the values if needed to best fit your scenario.

<div> <div>Property</div> <div>Recommended Value</div> <div>Notes</div> </div> <div> <div>Width</div> <div> <p>min-width: 18rem;</p> <p>width: 80%;max-width: 60rem;</p> </div> <div>Do not change min-width value to ensure proper size on mobile devices.</div> </div> <div> <div>Height</div> <div>height: 70%;</div> <div></div> </div>

See also:

Modal Creation

Modal Editing

Fiori Design Guideline - Dialog

Dynamic Page

To make the wizard consistent with the Fiori floorplan, a dynamic page layout is placed inside the dialog. The dynamic page is used to provide a consistent and standards-compliant look. In addition, it also provides the title and footer to ensure proper wizard function.

When setting up a dynamic page for displaying wizards consider the following properties and their recommended values. Adjust the values if needed to best fit your scenario.

<div> <div>Property</div> <div>Recommended Value</div> <div>Notes</div> </div> <div> <div>toggleHeaderOnClick</div> <div>false</div> <div>Disables expand/collapse header functionality.</div> </div> <div> <div>class</div> <div>sapUiNoContentPadding</div> <div>Removes all paddings from content area.</div> </div> <div> <div>showFooter</div> <div>true</div> <div>Shows the floating footer and actions.</div> </div> <div> <div>height</div> <div>100%</div> <div>Stretches the content to the entire dialog height.</div> </div>

See also:

Fiori Design Guideline - Dynamic Page

Wizard

The wizard is the bread and butter of this floorplan. It will contain the content of your guided procedure or complex task. When constructing it consider the flow you are creating and follow the rules below to achieve proper navigation and actions.

<div> <div>Property</div> <div>Recommended Value</div> <div>Notes</div> </div> <div> <div>showNextButton</div> <div>false</div> <div>Hides Next Step button from the content area.</div> </div> <div> <div>renderMode</div> <div>Page</div> <div>Sets each wizard step in its own page.</div> </div>

Wizard Actions

The footer contains the wizard actions which allow people to navigate it. The following table describes their usage.

<div> <div>Button</div> <div>Type</div> <div>Description</div> </div> <div> <div>Next Step</div> <div>Emphasized</div> <div>Required. Moves the wizard one step forward. Do not display on last step.</div> </div> <div> <div>Previous</div> <div>Ghost</div> <div>Required. Moves the wizard one step back. Do not display if on first step.</div> </div> <div> <div>Cancel</div> <div>Transparent</div> <div>Required. Cancels the wizard and closes the dialog.</div> </div> <div> <div>Finish</div> <div>Emphasized, Ghost</div> <div>Optional. Use as emphasized if on the last step of the wizard. Use as standard to skip optional steps and finalize wizard.</div> </div> <div> <div>Review</div> <div>Emphasized</div> <div>Optional. Display on the last but one step only if a review page is present.</div> </div>

Wizard Steps

When constructing the wizard steps consider the content and make sure the steps contain logical pieces of information.

1
do
false

Recommended

  • Have a clear title for each step. If possible make sure that step titles are present in the application UI.
  • Use Forms for creating logical groups of inputs. Use multiple forms sparingly as it affects performance.
  • Favor vertical form layout over horizontal form layout.
  • Use appropriate input controls for the data type you are working with.
1
dont
false

Not Recommended

  • Avoid using lists and tables in wizards unless they are needed for selection.
  • Avoid master-detail patterns. If possible use branching paths instead or simplify the flow.
  • Avoid nested dialogs or wizards. If possible use popups.

Writing Wizard Steps

When using the wizard floorplan, formulate the texts for each step as follows:

See also:

Fiori Design Guideline - Wizard Floorplan

Fiori Design Guideline - Form / Simple Form

Resources

See also:

UI5 DemoKit Sample - Wizard Page Mode