Skip to main content

Guide Widget

The IQNOX Guide is a simple widget based on the Shepherd.js library.


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.


DataINFOTABLE<Data for the steps in the guide. Structure of data can be found in the IQNOX_GuideData_DS Data Shape
ShowStepNumebrBOOLEANfalseToggles the step counter
CurrentStepNUMBER<>Number of the step the guide is currently on. Can be used to start the guide from a specified step.
NextButtonLabelSTRING[localized]NextLabel for the button that advances the guide
PreviousButtonLabelSTRING[localized]PreviousLabel for the button that reverts the guide to a previous step
FinishButtonLabelSTRING[localized]FinishLabel for the button that closes the guide upon completion
SkipButtonLabelSTRING[localized]Never Show AgainLabel for the button that skips the guide before completion
ConfirmationPopupBackButtonLabelSTRING[localized]Go BackLabel for the cancel confirmation popup button that goes back to the guide
ConfirmationPopupConfirmButtonLabelSTRING[localized]AcceptLabel for the cancel confirmation popup button that closes the guide
ConfirmationPopupTitleSTRING[localized]Before you continueTitle for the cancel confirmation popup
ConfirmationPopupMessageSTRING[localized]Are you sure you want to close the guide?Message for the cancel confirmation popup
MandatoryBOOLEAN<falseAllows the guide to be closed before completion or not
CanHideBOOLEAN<falseAllows the guide to be hidden before completion
ShowSkipConfirmationBOOLEAN<falseShows a confirmation window for skipping the guide
HideIfCompletedBOOLEAN<falseHides the guide after the first completion by a user
HideAllButtonsBOOLEANfalseHides all the buttons on the step popups for a fully interactive progression


StartGuidedTourSERVICE<Used to signal the start of the guided tour.
RerunGuidedTourSERVICE<Used to restart the guided tour if it was previously finished.
CloseGuidedTourSERVICE<Used to close the guided tour.
ShowGuidedTourSERVICE<Shows the guide from the step before being hidden.
ProgressGuidedTourSERVICE<Used to progress the guide to the next step.


GuidedTourSkippedEVENT>Triggers when the guided tour is closed before being finished.
GuidedTourFinishedEVENT>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:

targetSTRINGAnchor 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.
targetTypeSTRINGType of the target element for the guide step. Must be a string with one of the following values: Selector or Widget.
titleSTRING[localizable]Title to be displayed in the step popup header
messageSTRING[localizable]Message to be displayed in the step popup
positionSTRINGPosition around the target element where the step popover will appear (from a list of valid positions)
hideNextButtonBOOLEANHide the next button on a step popover so the guide can be progressed by a user interaction

If the target element is in a Collection widget, the only way to target that element is through a CSS selector.

If no target is 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.