Wizard

v1.0.0-rc.10
@ui5/webcomponents-fiori
<ui5-wizard>

Wizard

1. Product Type
The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with.
Sed fermentum, mi et tristique ullamcorper, sapien sapien faucibus sem, quis pretium nibh lorem malesuada diam. Nulla quis arcu aliquet, feugiat massa semper, volutpat diam. Nam vitae ante posuere, molestie neque sit amet, dapibus velit. Maecenas eleifend tempor lorem. Mauris vitae elementum mi, sed eleifend ligula. Nulla tempor vulputate dolor, nec dignissim quam convallis ut. Praesent vitae commodo felis, ut iaculis felis. Fusce quis eleifend sapien, eget facilisis nibh. Suspendisse est velit, scelerisque ut commodo eget, dignissim quis metus. Cras faucibus consequat gravida. Curabitur vitae quam felis. Phasellus ac leo eleifend, commodo tortor et, varius quam. Aliquam erat volutpat.
Step 2
2. Product Information
Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien
Name
Weight
Manifacturer Apple Samsung Huawei
5 years guarantee included
3. Options
Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with.
Manifacture date
Availability In stock In depot Damaged Out of stock
Size Small Medium Large
4. Pricing
Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with.
Price
Quantity
Vat included
Finalize
<ui5-wizard id="wiz">
	<ui5-wizard-step icon="product" heading="Product type" selected>
		<ui5-title>1. Product Type</ui5-title>

		<!-- Move to step 2 -->
		<ui5-button id="toStep2">Step 2</ui5-button>
	</ui5-wizard-step>

	<ui5-wizard-step icon="hint" heading="Product Information" disabled>
		<ui5-title>2. Product Information</ui5-title>

		<div>
			<ui5-label>5 years guarantee included</ui5-label>
			<ui5-switch id="sw"></ui5-switch>
		</div>

		<!-- Move to step 3 -->
		<ui5-button id="toStep3" hidden>Step 3</ui5-button>
	</ui5-wizard-step>

	<ui5-wizard-step icon="action-settings" heading="Options" disabled>
		<ui5-title>3. Options</ui5-title><br>

		<ui5-segmentedbutton id="sb">
			<ui5-togglebutton icon="employee" pressed>Small</ui5-togglebutton>
			<ui5-togglebutton>Medium</ui5-togglebutton>
			<ui5-togglebutton>Large</ui5-togglebutton>
		</ui5-segmentedbutton>

		<!-- Move to step 4 -->
		<ui5-button id="toStep4" hidden>Step 4</ui5-button>
	</ui5-wizard-step>

	<ui5-wizard-step icon="lead" heading="Pricing" disabled>
		<ui5-title>4. Pricing</ui5-title><br>
		<ui5-button id="finalize">Finalize</ui5-button>
	</ui5-wizard-step>
</ui5-wizard>

<script>
	// The code shows how the users can manipulte the ui5-wizard-step API (selected and disabled)
	// to go through the wizard steps.
	const moveToStep = idx => {
		const step = getStep(idx); // where "step" is an instance of ui5-wizard-step
		step.selected = true;
		step.disabled = false;
	}
	const getStep = idx => {
		return Array.from(wizard.children)[idx];
	}
	const deselectAllSteps = () => {
		Array.from(wizard.children).forEach(function(step) {
			step.selected = false;
		});
	}

	// Move to Step 2
	toStep2.addEventListener("click", function () {
		deselectAllSteps();
		moveToStep(1);
	});

	// Move to Step 3
	toStep3.addEventListener("click", function () {
		deselectAllSteps();
		moveToStep(2);
	});

	// Show the "step to 3" button after "validation"
	sw.addEventListener("change", function () {
		toStep3.removeAttribute("hidden");
	});
</script>
	

Overview

The ui5-wizard helps users complete a complex task by dividing it into sections and guiding the user through it. It has two main areas - a navigation area at the top showing the step sequence and a content area below it.

Structure

Navigation area

The top most area of the ui5-wizard is occupied by the navigation area. It shows the sequence of steps, where the recommended number of steps is between 3 and 8 steps.
  • Steps can have different visual representations - numbers or icons.
  • Steps might have labels for better readability - heading and subheding.
  • Steps are defined by using the ui5-wizard-step as slotted element within the ui5-wizard
Note: If no selected step is defined, the first step will be auto selected.
Note: If multiple selected steps are defined, the last step will be selected.

Content

The content occupies the main part of the page. It can hold any type of HTML elements. It's defined by using the ui5-wizard-step as slotted element within the ui5-wizard.

Scrolling

The component handles user scrolling by selecting the closest step, based on the current scroll position and scrolls to particular place, when the user clicks on the step within the navigation area.

Important: In order the component's scrolling behaviour to work, it has to be limited from the outside parent element in terms of height. The component or its parent has to be given percentage or absolute height. Otherwise, the component will be scrolled out with the entire page.

For example:

<ui5-dialog style="height: 80%">
<ui5-wizard></ui5-wizard>
</ui5-dialog>

Moving to next step

The ui5-wizard-step provides the necessary API and it's up to the user of the component to use it to move to the next step. You have to set its selected property (and remove the disabled one if set) to true. And, the ui5-wizard will automatically scroll to the content of the newly selected step.

The Fiori 3 guidelines recommends having a "nextStep" button in the content area. You can place a button, or any other type of element to trigger step change, inside the ui5-wizard-step, and show/hide it when certain fields are filled or user defined criteria is met.

Usage

When to use:

When the user has to accomplish a long set of tasks.

When not to use:

When the task has less than 3 steps.

Responsive Behavior

On small widths the step's heading, subheading and separators in the navigation area will start truncate and shrink and from particular point they will hide to free as much space as possible.

ES6 Module Import

import @ui5/webcomponents-fiori/dist/Wizard.js"; (includes )

Slots

This Element provides slot(s). This means it can display its child nodes.
Unless targeting the default slot, use the slot attribute to define the destination slot for each child.
Text, along with HTML Elements with no slot attribute, goes the the default slot.

Slot
Type
Description
default
HTMLElement [0..n]
Defines the steps.

Note: Use the available ui5-wizard-step component.

Events

This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as addEventListener.

Name
Description
selection-change
Fired when the step selection is changed by user interaction - either with scrolling, or by clicking on the steps within the component header.
selectedStep
type: HTMLElement
description: the newly selected step
previouslySelectedStep
type: HTMLElement
description: the previously selected step
changeWithClick
type: Boolean
description: the selection changed due to user's click on step within the navigation

WizardStep

Overview

A component that represents a logical step as part of the ui5-wizard. It is meant to aggregate arbitrary HTML elements that forms the content of a single step.

Structure

  • Each wizard step has arbitrary content
  • Each wizard step might have texts - defined by the heading and subheading properties
  • Each wizard step might have an icon - defined by the icon property
  • Each wizard step might display a number in place of the icon, when it's missing

Usage

The ui5-wizard-step component should be used only as slot of the ui5-wizard component and should not be used standalone.

Properties/Attributes

You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.

Name
Type
Default Value
Description
branching
boolean
false
When branching is enabled a dashed line would be displayed after the step, meant to indicate that the next step is not yet known and depends on user choice in the current step.

Note: It is recommended to use branching on the last known step and later add new steps when it becomes clear how the wizard flow should continue.
disabled
boolean
false
Defines if the step is disabled. When disabled the step is displayed, but the user can't select the step by clicking or navigate to it with scrolling.

Note: Step can't be selected and disabled at the same time. In this case the selected property would take precedence.
heading
String
""
Defines the heading of the step.

Note: the text is displayed in the ui5-wizard navigation header.
Note: the text will hide on small sizes (about 559 px).
icon
String
""
Defines the icon of the step.

Note: the icon is displayed in the ui5-wizard navigation header.

The SAP-icons font provides numerous options. See all the available icons in the Icon Explorer.
selected
boolean
false
Defines the step's selected state - the step that is currently active.

Note: Step can't be selected and disabled at the same time. In this case the selected property would take precedence.
subheading
String
""
Defines the subheading of the step.

Note: the text is displayed in the ui5-wizard navigation header.
Note: the text will hide on small sizes (about 559 px).

Slots

This Element provides slot(s). This means it can display its child nodes.
Unless targeting the default slot, use the slot attribute to define the destination slot for each child.
Text, along with HTML Elements with no slot attribute, goes the the default slot.

Slot
Type
Description
default
Node [0..n]
Defines the step content.
Theme: Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White Belize High Contrast Black High Contrast White
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel