Tutorial

The Tutorial component is used to create step-by-step guided tours by highlighting selected components and displaying descriptive text for each step.

Tutorials can be started globally or scoped to a specific parent component. Scoping is useful when multiple tutorials or multiple groups of tutorial steps exist on the same page.

Props

Attribute	Description	Type	Default
steps	Defines the steps of the Tutorial component. Each step contains two parameters: text and compID. text specifies the description displayed for the step, and compID specifies the ID of the component to highlight.	array	[{ text: "", compID: "" }]
nextButtonLabel	Defines the label of the Next button.	string	Next
skipButtonLabel	Defines the label of the Skip button.	string	Skip
prevButtonLabel	Defines the label of the Previous button.	string	Back
doneButtonLabel	Defines the label of the Done button.	string	Done
hidePrevButton	Determines whether the Previous button is hidden on the first step.	boolean	false
showStepNumbers	Determines whether step numbers are displayed.	boolean	false
keyboardNavigation	Determines whether navigation with the keyboard is enabled.	boolean	false
visible	Defines the visibility of the Tutorial component.	boolean	true

Steps

The steps prop defines which components are included in the tutorial.

Each step contains:

Attribute	Description	Type
text	Text displayed when the corresponding tutorial step is active.	string
compID	ID of the component that will be highlighted.	string

Example:

[
  {
    "text": "This is the first step.",
    "compID": "Button1"
  },
  {
    "text": "This is the second step.",
    "compID": "TextField1"
  }
]

The order of the objects in the steps array determines the order of the tutorial steps.

Events

Attribute	Description
beforeExit	Triggered before the Tutorial component is closed. It is also triggered when the user exits or skips the tutorial.
onafterchange	Triggered after the active tutorial step changes.
oncomplete	Triggered when all tutorial steps are completed.

Methods

Attribute	Description
start	Starts the Tutorial component. It can run globally or only inside a specified parent component.
goToStep	Starts the Tutorial component and navigates to the specified step. It can run globally or inside a specified parent component.
exit	Closes the currently active Tutorial component.

start

Starts the tutorial.

start(componentSelector?)

Parameters

Parameter	Description	Type	Required
componentSelector	ID of the parent component that contains the tutorial step components. When provided, only tutorial steps inside this parent are included.	string	No

When no componentSelector is provided, the tutorial runs globally.

Example:

start()

To run the tutorial only inside a specific parent component:

start("divID")

componentSelector must be provided as the component ID without the # character.

For example, if the parent element is:

<div id="divID">

use:

start("divID")

goToStep

Starts the tutorial and navigates to the specified step.

goToStep(value, componentSelector?)

Parameters

Parameter	Description	Type	Required
value	Step number to navigate to.	number	Yes
componentSelector	ID of the parent component that contains the tutorial step components. When provided, only tutorial steps inside this parent are included.	string	No

Example:

goToStep(2)

To navigate to a step in a tutorial scoped to a specific parent component:

goToStep(2, "divID")

exit

Closes the currently active tutorial.

exit()

If there is no active tutorial, the method does nothing.

Scoped Tutorials

The Tutorial component supports scoped tutorials.

When a parent component ID is passed to start or goToStep, only step components located inside that parent are included in the tutorial.

Example structure:

<div id="tutorialGroup1">
  <!-- Components used by Tutorial 1 -->
</div>

<div id="tutorialGroup2">
  <!-- Components used by Tutorial 2 -->
</div>

Tutorial 1 can be started with:

start("tutorialGroup1")

Tutorial 2 can be started with:

start("tutorialGroup2")

This allows multiple tutorial groups to exist on the same page without including steps from another tutorial container.

If the specified parent component cannot be found, the tutorial will not start.

Samples Qjson

QTutorialFinalDemo