Guide Widget
The IQNOX Guide is a simple widget based on the Shepherd.js library.
Usage
Can be used as an introduction for new users to the functionality of an app. It can provide information about the steps necessary to navigate and use all of the functionality available at full capacity.
Properties
| Property | Type | Binding | Default | Description |
|---|---|---|---|---|
| Data | INFOTABLE | < | Data for the steps in the guide. Structure of data can be found in the IQNOX_GuideData_DS Data Shape | |
| ShowStepNumebr | BOOLEAN | false | Toggles the step counter | |
| CurrentStep | NUMBER | <> | Number of the step the guide is currently on. Can be used to start the guide from a specified step. | |
| NextButtonLabel | STRING[localized] | Next | Label for the button that advances the guide | |
| PreviousButtonLabel | STRING[localized] | Previous | Label for the button that reverts the guide to a previous step | |
| FinishButtonLabel | STRING[localized] | Finish | Label for the button that closes the guide upon completion | |
| SkipButtonLabel | STRING[localized] | Never Show Again | Label for the button that skips the guide before completion | |
| ConfirmationPopupBackButtonLabel | STRING[localized] | Go Back | Label for the cancel confirmation popup button that goes back to the guide | |
| ConfirmationPopupConfirmButtonLabel | STRING[localized] | Accept | Label for the cancel confirmation popup button that closes the guide | |
| ConfirmationPopupTitle | STRING[localized] | Before you continue | Title for the cancel confirmation popup | |
| ConfirmationPopupMessage | STRING[localized] | Are you sure you want to close the guide? | Message for the cancel confirmation popup | |
| Mandatory | BOOLEAN | < | false | Allows the guide to be closed before completion or not |
| CanHide | BOOLEAN | < | false | Allows the guide to be hidden before completion |
| ShowSkipConfirmation | BOOLEAN | < | false | Shows a confirmation window for skipping the guide |
| HideIfCompleted | BOOLEAN | < | false | Hides the guide after the first completion by a user |
| HideAllButtons | BOOLEAN | false | Hides all the buttons on the step popups for a fully interactive progression |
Services
| Property | Type | Binding | Description |
|---|---|---|---|
| StartGuidedTour | SERVICE | < | Used to signal the start of the guided tour. |
| RerunGuidedTour | SERVICE | < | Used to restart the guided tour if it was previously finished. |
| CloseGuidedTour | SERVICE | < | Used to close the guided tour. |
| ShowGuidedTour | SERVICE | < | Shows the guide from the step before being hidden. |
| ProgressGuidedTour | SERVICE | < | Used to progress the guide to the next step. |
Events
| Property | Type | Binding | Description |
|---|---|---|---|
| GuidedTourSkipped | EVENT | > | Triggers when the guided tour is closed before being finished. |
| GuidedTourFinished | EVENT | > | Triggers when the guided tour finishes. |
Configuring guide step data
The Data property of the Guide widget expects an infotable that follows the structure of the IQNOX_GuideData_DS data shape. This data can come as the output from a service. Because it's data driven, data can be changed based on user context.
The IQNOX_GuideData_DS data shape has the following properties:
| Property | Type | Description |
|---|---|---|
target | STRING | Anchor HTML element for the guide step. Accepts a CSS selector when targetType is set as Selector, or the DisplayName property of the anchor widget when targetType is set as Widget. |
targetType | STRING | Type of the target element for the guide step. Must be a string with one of the following values: Selector or Widget. |
title | STRING[localizable] | Title to be displayed in the step popup header |
message | STRING[localizable] | Message to be displayed in the step popup |
position | STRING | Position around the target element where the step popover will appear (from a list of valid positions) |
hideNextButton | BOOLEAN | Hide the next button on a step popover so the guide can be progressed by a user interaction |
If the
targetelement is in a Collection widget, the only way to target that element is through a CSS selector.
If no
targetis specified, the step will appear in the middle of the screen, like a modal popup.
Recommendation: use Selector as targetType, because using Widget does not support targeting widgets in a Master or Contained Mashup with the DisplayName from an initial mashup which contains the Guide Widget.
Valid positions for the guide step data are:
top, top-start, top-end, bottom, bottom-start, bottom-end, right, right-start, right-end, left, left-start, left-end. Any invalid positions will default to bottom.