Table of Contents

Description

...

Element	Details	Images
Header	The header describes the wizard’s purpose / expected results.	In case of a dialog box:
Steps navigation panel	Shows all of the steps in the wizard. Indicates which step the user is currently on, and the steps which have already been covered. Enables jumping between steps. This differs between Create and Edit modes. See Interaction below.
Step content area	Displays relevant content for the selected step, including a step header, input fields, and content to support decisions. The content area contains a form which can include all input fields types, such as Radio Buttons, Check Boxes, and Drop-down Menus.
Actions Row	Contains Back and Next Dialog Buttons. In the first step, the Back button will be disabled. In the last step, the Next button will change to show the final action which will occur. For example, Create statistic Set. Additional action buttons may be included. If one of the fields contains an error, the Next button will be disabled and a guiding message will be shown.

...

By default, the wizard will show the first step, with the first field in focus.

Internal Logic

Step = Inner sub page

...

The user can cancel and exit the wizard at any time before pressing the last confirmation in the last step. All selections and actions inside the wizard will be canceled.

...

in focus.

States

Step navigation states:

Currently selected step
Last step selected
Previous steps which have already been covered
Uncompleted steps
Hover	Coming soon…
Active	Coming soon…
Selected Hover	Coming soon…
Focus	Coming soon…
Focus Hover	Coming soon…
Focus Selected	Coming soon…

Interaction

1. First step

In Edit mode, any step can be selected from the left-hand navigation panel.

...

Validations are shown inside each step, both for individual fields and the entire step as a whole. See Field Validation.

Transitions

When moving between steps, a transition will be used in the navigation panel, if technically possible.

...

between steps, a transition will be used in the navigation panel, if technically possible.

Best practices

Use where:

object creation or editing may be complex and needs to be divided into steps.
users needs guided help.
steps are dependant on each other in a complex way.

Don’t use where:

the overall task isn’t complex.
users are advanced and might be frustrated by a wizard, which can be rigid and limiting.

General

The number of steps should be between 3 and 7, for readability and ease easy of use.
Provide the user with enough information to make decisions and act on them.
The title of each step should be short and clear, and describe the step’s purpose.
Each step should present a brief explanation of its purpose at the beginning.
Use defaults or predefined values where possible.

Use where:

object creation or editing may be complex and needs to be divided into steps.
users needs guided help.
steps are dependant on one another in a complex way.

Don’t use where:

the overall task isn’t complex.
users are advanced and might be frustrated by a wizard, which can be rigid and limiting.

Accessibility compliance

...

Zeplin link	Screen thumbnail
https://zpl.io/bW6oWKa

Code

Html macro

sanitize	false

<link rel="stylesheet" href="https://ux.verint.com/fonts/css/verint_lux.css">
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/js/bootstrap.bundle.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/accessibility.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism.min.js"></script>
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism-coy.min.css">


<div class="card">
			<div class="card-header">Wizard <button id="toggleMarkup" type="button" class="btn btn-sm btn-outline-primary btn btn-fixed-width float-right m-0" onclick="$('pre' ).toggle()">Toggle Markup</button></div>
			<div class="card-body">
				<div class="form-group row">
					<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Wide Example</label>
					<div class="col-lg-4">
						<button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="modal" data-target="#wideModal">Wide Wizard</button>
						<!-- Modal -->
						<div class="modal fade" id="wideModal" tabindex="-1" role="dialog" aria-labelledby="wideModalLabel" aria-hidden="true">
							<div class="modal-dialog modal-dialog-sm modal-wide modal-dialog-centered modal-wizard" role="document">
								<div class="modal-content">
									<div class="modal-header">
										<h5 class="modal-title" id="wideModalLabel">Wizard Name</h5>
										<button type="button" class="close" data-dismiss="modal" aria-label="Close">
											<span aria-hidden="true">×</span>
										</button>
									</div>
									<div id="collapseOne" class="collapse show" data-parent="#wideModal">
										<nav aria-label="breadcrumb">
										  <ol class="breadcrumb">
										    <li class="breadcrumb-item active" aria-current="page">First Wizard Step with some more</li>
										    <li class="breadcrumb-item">Second Wizard Step with some</li>
										    <li class="breadcrumb-item">Last Wizard Step with some more</li>
										  </ol>
										</nav>
										<div class="modal-body">
											<h5>First Wizard Step Header</h5>
											<p>Morbi in faucibus lorem. Aliquam sollicitudin, mi tincidunt volutpat semper, neque nibh pulvinar sapien, nec vehicula sapien odio et mi. Curabitur volutpat nunc non magna porta, eu pellentesque eros porttitor. Sed imperdiet mollis massa in hendrerit. Nullam sed nunc auctor, sollicitudin odio nec, auctor tortor. Nulla facilisi. Vestibulum mattis elit quis tristique viverra. Aliquam accumsan enim velit, eget dictum leo tristique et. Proin varius mauris erat, in molestie ligula ut.</p>
											<form>
												<div class="custom-control custom-control-sm custom-checkbox">
												  <input type="checkbox" id="customCheckbox1" name="customCheckbox" class="custom-control-input">
												  <label class="custom-control-label" for="customCheckbox1">Morbi in faucibus lorem</label>
												</div>
												<div class="custom-control custom-control-sm custom-checkbox">
												  <input type="checkbox" id="customCheckbox2" name="customCheckbox" class="custom-control-input">
												  <label class="custom-control-label" for="customCheckbox2">Aliquam sollicitudin</label>
												</div>
												<div class="custom-control custom-control-sm custom-checkbox">
												  <input type="checkbox" id="customCheckbox3" name="customCheckbox" class="custom-control-input">
												  <label class="custom-control-label" for="customCheckbox3">Curabitur volutpat nunc non magna</label>
												</div>
												<div class="custom-control custom-control-sm custom-checkbox">
												  <input type="checkbox" id="customCheckbox4" name="customCheckbox" class="custom-control-input">
												  <label class="custom-control-label" for="customCheckbox4">Nullam sed nunc auctor</label>
												</div>
											</form>
										</div>
										<div class="modal-footer">
											<button type="button" class="btn btn-sm btn-light btn-fixed-width" disabled>Back</button>
											<button type="button" class="btn btn-sm btn-primary btn-fixed-width" data-toggle="collapse" data-target="#collapseTwo">Next</button>
										</div>
									</div>
									<div id="collapseTwo" class="collapse" data-parent="#wideModal">
										<nav aria-label="breadcrumb">
										  <ol class="breadcrumb">
										    <li class="breadcrumb-item complete">First Wizard Step with some more</li>
										    <li class="breadcrumb-item active" aria-current="page">Second Wizard Step with some</li>
										    <li class="breadcrumb-item">Last Wizard Step with some more</li>
										  </ol>
										</nav>
										<div class="modal-body">
											<h5>Second Wizard Step Header</h5>
											<p>Morbi in faucibus lorem. Aliquam sollicitudin, mi tincidunt volutpat semper, neque nibh pulvinar sapien, nec vehicula sapien odio et mi. Curabitur volutpat nunc non magna porta, eu pellentesque eros porttitor. Sed imperdiet mollis massa in hendrerit. Nullam sed nunc auctor, sollicitudin odio nec, auctor tortor. Nulla facilisi. Vestibulum mattis elit quis tristique viverra. Aliquam accumsan enim velit, eget dictum leo tristique et. Proin varius mauris erat, in molestie ligula ut.</p>
											<form>
												<div class="custom-control custom-control-sm custom-checkbox">
												  <input type="checkbox" id="customCheckbox5" name="customCheckbox" class="custom-control-input">
												  <label class="custom-control-label" for="customCheckbox5">Morbi in faucibus lorem</label>
												</div>
												<div class="custom-control custom-control-sm custom-checkbox">
												  <input type="checkbox" id="customCheckbox6" name="customCheckbox" class="custom-control-input">
												  <label class="custom-control-label" for="customCheckbox6">Aliquam sollicitudin</label>
												</div>
												<div class="custom-control custom-control-sm custom-checkbox">
												  <input type="checkbox" id="customCheckbox7" name="customCheckbox" class="custom-control-input">
												  <label class="custom-control-label" for="customCheckbox7">Curabitur volutpat nunc non magna</label>
												</div>
												<div class="custom-control custom-control-sm custom-checkbox">
												  <input type="checkbox" id="customCheckbox8" name="customCheckbox" class="custom-control-input">
												  <label class="custom-control-label" for="customCheckbox8">Nullam sed nunc auctor</label>
												</div>
											</form>
										</div>
										<div class="modal-footer">
											<button type="button" class="btn btn-sm btn-light btn-fixed-width" data-toggle="collapse" data-target="#collapseOne">Back</button>
											<button type="button" class="btn btn-sm btn-primary btn-fixed-width" data-toggle="collapse" data-target="#collapseThree">Next</button>
										</div>
									</div>
									<div id="collapseThree" class="collapse" data-parent="#wideModal">
										<nav aria-label="breadcrumb">
										  <ol class="breadcrumb">
										    <li class="breadcrumb-item complete">First Wizard Step with some more</li>
										    <li class="breadcrumb-item complete">Second Wizard Step with some</li>
										    <li class="breadcrumb-item active" aria-current="page">Last Wizard Step with some more</li>
										  </ol>
										</nav>
										<div class="modal-body">
											<h5>Last Wizard Step Header</h5>
											<p>Morbi in faucibus lorem. Aliquam sollicitudin, mi tincidunt volutpat semper, neque nibh pulvinar sapien, nec vehicula sapien odio et mi. Curabitur volutpat nunc non magna porta, eu pellentesque eros porttitor. Sed imperdiet mollis massa in hendrerit. Nullam sed nunc auctor, sollicitudin odio nec, auctor tortor. Nulla facilisi. Vestibulum mattis elit quis tristique viverra. Aliquam accumsan enim velit, eget dictum leo tristique et. Proin varius mauris erat, in molestie ligula ut.</p>
											<form>
												<div class="custom-control custom-control-sm custom-checkbox">
												  <input type="checkbox" id="customCheckbox9" name="customCheckbox" class="custom-control-input">
												  <label class="custom-control-label" for="customCheckbox9">Morbi in faucibus lorem</label>
												</div>
												<div class="custom-control custom-control-sm custom-checkbox">
												  <input type="checkbox" id="customCheckbox10" name="customCheckbox" class="custom-control-input">
												  <label class="custom-control-label" for="customCheckbox10">Aliquam sollicitudin</label>
												</div>
												<div class="custom-control custom-control-sm custom-checkbox">
												  <input type="checkbox" id="customCheckbox11" name="customCheckbox" class="custom-control-input">
												  <label class="custom-control-label" for="customCheckbox11">Curabitur volutpat nunc non magna</label>
												</div>
												<div class="custom-control custom-control-sm custom-checkbox">
												  <input type="checkbox" id="customCheckbox12" name="customCheckbox" class="custom-control-input">
												  <label class="custom-control-label" for="customCheckbox12">Nullam sed nunc auctor</label>
												</div>
											</form>
										</div>
										<div class="modal-footer">
											<button type="button" class="btn btn-sm btn-light btn-fixed-width" data-toggle="collapse" data-target="#collapseTwo">Back</button>
											<button type="submit" class="btn btn-sm btn-primary btn-fixed-width" data-dismiss="modal">Finish</button>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><button class="btn btn-sm btn-light btn-fixed-width" type="button" data-toggle="modal" data-target="#wideModal">Wide Wizard</button>
<!-- Modal -->
<div class="modal fade" id="wideModal" tabindex="-1" role="dialog" aria-labelledby="wideModalLabel" aria-hidden="true">
   <div class="modal-dialog modal-dialog-sm modal-wide modal-dialog-centered modal-wizard" role="document">
      <div class="modal-content">
         <div class="modal-header">
            <h5 class="modal-title" id="wideModalLabel">Wizard Name</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
            </button>
         </div>
         <div id="collapseOne" class="collapse show" data-parent="#wideModal">
            <nav aria-label="breadcrumb">
               <ol class="breadcrumb">
                  <li class="breadcrumb-item active" aria-current="page">First Wizard Step with some more</li>
                  <li class="breadcrumb-item">Second Wizard Step with some</li>
                  <li class="breadcrumb-item">Last Wizard Step with some more</li>
               </ol>
            </nav>
            <div class="modal-body">
               <h5>First Wizard Step Header</h5>
               <p>Morbi in faucibus lorem. Aliquam sollicitudin, mi tincidunt volutpat semper, neque nibh pulvinar sapien, nec vehicula sapien odio et mi. Curabitur volutpat nunc non magna porta, eu pellentesque eros porttitor. Sed imperdiet mollis massa in hendrerit. Nullam sed nunc auctor, sollicitudin odio nec, auctor tortor. Nulla facilisi. Vestibulum mattis elit quis tristique viverra. Aliquam accumsan enim velit, eget dictum leo tristique et. Proin varius mauris erat, in molestie ligula ut.</p>
               <form>
                  <div class="custom-control custom-control-sm custom-checkbox">
                     <input type="checkbox" id="customCheckbox1" name="customCheckbox" class="custom-control-input">
                     <label class="custom-control-label" for="customCheckbox1">Morbi in faucibus lorem</label>
                  </div>
                  <div class="custom-control custom-control-sm custom-checkbox">
                     <input type="checkbox" id="customCheckbox2" name="customCheckbox" class="custom-control-input">
                     <label class="custom-control-label" for="customCheckbox2">Aliquam sollicitudin</label>
                  </div>
                  <div class="custom-control custom-control-sm custom-checkbox">
                     <input type="checkbox" id="customCheckbox3" name="customCheckbox" class="custom-control-input">
                     <label class="custom-control-label" for="customCheckbox3">Curabitur volutpat nunc non magna</label>
                  </div>
                  <div class="custom-control custom-control-sm custom-checkbox">
                     <input type="checkbox" id="customCheckbox4" name="customCheckbox" class="custom-control-input">
                     <label class="custom-control-label" for="customCheckbox4">Nullam sed nunc auctor</label>
                  </div>
               </form>
            </div>
            <div class="modal-footer">
               <button type="button" class="btn btn-sm btn-light btn-fixed-width" disabled>Back</button>
               <button type="button" class="btn btn-sm btn-primary btn-fixed-width" data-toggle="collapse" data-target="#collapseTwo">Next</button>
            </div>
         </div>
         <div id="collapseTwo" class="collapse" data-parent="#wideModal">
            <nav aria-label="breadcrumb">
               <ol class="breadcrumb">
                  <li class="breadcrumb-item complete">First Wizard Step with some more</li>
                  <li class="breadcrumb-item active" aria-current="page">Second Wizard Step with some</li>
                  <li class="breadcrumb-item">Last Wizard Step with some more</li>
               </ol>
            </nav>
            <div class="modal-body">
               <h5>Second Wizard Step Header</h5>
               <p>Morbi in faucibus lorem. Aliquam sollicitudin, mi tincidunt volutpat semper, neque nibh pulvinar sapien, nec vehicula sapien odio et mi. Curabitur volutpat nunc non magna porta, eu pellentesque eros porttitor. Sed imperdiet mollis massa in hendrerit. Nullam sed nunc auctor, sollicitudin odio nec, auctor tortor. Nulla facilisi. Vestibulum mattis elit quis tristique viverra. Aliquam accumsan enim velit, eget dictum leo tristique et. Proin varius mauris erat, in molestie ligula ut.</p>
               <form>
                  <div class="custom-control custom-control-sm custom-checkbox">
                     <input type="checkbox" id="customCheckbox5" name="customCheckbox" class="custom-control-input">
                     <label class="custom-control-label" for="customCheckbox5">Morbi in faucibus lorem</label>
                  </div>
                  <div class="custom-control custom-control-sm custom-checkbox">
                     <input type="checkbox" id="customCheckbox6" name="customCheckbox" class="custom-control-input">
                     <label class="custom-control-label" for="customCheckbox6">Aliquam sollicitudin</label>
                  </div>
                  <div class="custom-control custom-control-sm custom-checkbox">
                     <input type="checkbox" id="customCheckbox7" name="customCheckbox" class="custom-control-input">
                     <label class="custom-control-label" for="customCheckbox7">Curabitur volutpat nunc non magna</label>
                  </div>
                  <div class="custom-control custom-control-sm custom-checkbox">
                     <input type="checkbox" id="customCheckbox8" name="customCheckbox" class="custom-control-input">
                     <label class="custom-control-label" for="customCheckbox8">Nullam sed nunc auctor</label>
                  </div>
               </form>
            </div>
            <div class="modal-footer">
               <button type="button" class="btn btn-sm btn-light btn-fixed-width" data-toggle="collapse" data-target="#collapseOne">Back</button>
               <button type="button" class="btn btn-sm btn-primary btn-fixed-width" data-toggle="collapse" data-target="#collapseThree">Next</button>
            </div>
         </div>
         <div id="collapseThree" class="collapse" data-parent="#wideModal">
            <nav aria-label="breadcrumb">
               <ol class="breadcrumb">
                  <li class="breadcrumb-item complete">First Wizard Step with some more</li>
                  <li class="breadcrumb-item complete">Second Wizard Step with some</li>
                  <li class="breadcrumb-item active" aria-current="page">Last Wizard Step with some more</li>
               </ol>
            </nav>
            <div class="modal-body">
               <h5>Last Wizard Step Header</h5>
               <p>Morbi in faucibus lorem. Aliquam sollicitudin, mi tincidunt volutpat semper, neque nibh pulvinar sapien, nec vehicula sapien odio et mi. Curabitur volutpat nunc non magna porta, eu pellentesque eros porttitor. Sed imperdiet mollis massa in hendrerit. Nullam sed nunc auctor, sollicitudin odio nec, auctor tortor. Nulla facilisi. Vestibulum mattis elit quis tristique viverra. Aliquam accumsan enim velit, eget dictum leo tristique et. Proin varius mauris erat, in molestie ligula ut.</p>
               <form>
                  <div class="custom-control custom-control-sm custom-checkbox">
                     <input type="checkbox" id="customCheckbox9" name="customCheckbox" class="custom-control-input">
                     <label class="custom-control-label" for="customCheckbox9">Morbi in faucibus lorem</label>
                  </div>
                  <div class="custom-control custom-control-sm custom-checkbox">
                     <input type="checkbox" id="customCheckbox10" name="customCheckbox" class="custom-control-input">
                     <label class="custom-control-label" for="customCheckbox10">Aliquam sollicitudin</label>
                  </div>
                  <div class="custom-control custom-control-sm custom-checkbox">
                     <input type="checkbox" id="customCheckbox11" name="customCheckbox" class="custom-control-input">
                     <label class="custom-control-label" for="customCheckbox11">Curabitur volutpat nunc non magna</label>
                  </div>
                  <div class="custom-control custom-control-sm custom-checkbox">
                     <input type="checkbox" id="customCheckbox12" name="customCheckbox" class="custom-control-input">
                     <label class="custom-control-label" for="customCheckbox12">Nullam sed nunc auctor</label>
                  </div>
               </form>
            </div>
            <div class="modal-footer">
               <button type="button" class="btn btn-sm btn-light btn-fixed-width" data-toggle="collapse" data-target="#collapseTwo">Back</button>
               <button type="submit" class="btn btn-sm btn-primary btn-fixed-width" data-dismiss="modal">Finish</button>
            </div>
         </div>
      </div>
   </div>
</div></script></code></pre>
					</div>
				</div>
			</div>
		</div>

Version	Old Version 35	New Version 36
Changes made by	Liav Nadler	Liav Nadler
Saved on	Oct 22, 2020	Oct 22, 2020

Content Comparison

Versions Compared

Key