Custom Attributes
Guided Tour Pro exposes attributes to be defined on the APEX page designer level and on the component level. These attributes are used to configure a new tour and a new step.
Application
The plug-in exposes 6 application attributes which describe the default classes applied to tour steps and the default order of buttons.
| Attribute | Type | Default value | Description | |
|---|---|---|---|---|
| 1 | Default Buttons Order | Text | hide, cancel, back, next, complete | Defines the default order of buttons in the step footer. |
| 2 | Button Cancel Classes | Text | t-Button t-Button--simple | The defined class names are added to the Cancel button. |
| 3 | Button Complete Classes | Text | t-Button t-Button--hot t-Button--simple | The defined class names are added to the Complete button. |
| 4 | Button Next Classes | Text | t-Button t-Button--hot | The defined class names are added to the Next button. |
| 5 | Button Back Classes | Text | t-Button | The defined class names are added to the Back button. |
| 6 | Button Hide Classes | Text | t-Button t-Button--simple | The defined class names are added to the Hide button. |
Component
Guided Tour Pro exposes 12 attributes to be set on the page designer level for dynamic actions which implement the plug-in depending on the plug-in Action attribute. Tour and step settings can be overridden at runtime using the dynamic action JavaScript Initialization Code attribute.
| Attribute | Type | Default Value | Dependent on | Description | |
|---|---|---|---|---|---|
| 1 | Action | Select list | Initialize Tour (Dynamic Action) | Not dependent | The attribute defines the plug-in action. Available options include: Add Step Go To Step (Step Static Id) Go To Step (Event Data) Go To Step (Tour Name, Step Static Id) Initialize Tour (Dynamic Action) Initialize Tour (Table) Initialize Tour (Custom Tables) Run Tour (Event Data) * Run Tour (Name) The description of each option is presented in the section Actions below this table. |
| 2 | Step Title | Text | Empty | Action attribute is set to Add Step | Defines a step title. |
| 3 | Step Body | Textarea | Empty | Action attribute is set to Add Step | Defines a step HTML body. |
| 4 | Tour Settings | Checkbox | Add Masking Disable Page Scrolling | Action attribute is set to Initialize Tour (Dynamic Action) | Describes settings applied to a newly created tour. Available options include: Add Masking - whether or not steps should be placed above a darkened modal overlay. Disable Page Scrolling - whether or not a page should be scrollable while a tour is active. |
| 5 | Tour Name | Text | Empty | Action attribute is set to Initialize Tour (Dynamic Action) | Defines the name of a tour. A tour name must be unique in the scope of the APEX page tours. |
| 6 | Step Settings | Checkbox | Show Cancel Button Show Back Button * Show Next Button | Action attribute is set to Add Step | Describes settings applied to a newly created step. Available options include: Disable Step Element - whether or not the step DOM element should be clickable. Show Button Close (Title) - whether or not the step close button is rendered. A button is rendered as "X" in the top right corner of a step title. Show Button Back - whether or not the step Back button is rendered. A button executes a tour back method. Show Button Cancel - whether or not the step Cancel button is rendered. A button executes a step cancel method. Show Button Complete - whether or not the step Complete button is rendered. A button executes a step complete method. Show Button Next - whether or not the step Complete button is rendered. A button executes a tour next method. * Show Button Hide - whether or not the step Hide button is rendered. A button executes a tour hide method. |
| 7 | Masking Padding | Number | Action attribute is set to Add Step | An amount of padding to add around the modal overlay opening. | |
| 8 | Masking Radius | Number | Action attribute is set to Add Step | An amount of border radius to add around the modal overlay opening. | |
| 9 | Step Static Id | Text | Action attribute is set to Add Step | Defines a step static id which must be unique in the scope of a tour steps or empty. | |
| 10 | SQL Query Returning Tours | SQL Query | <br/>select<br/> ID as ID,<br/> APPLICATION_ID as APPLICATION_ID,<br/> PAGE_ID as PAGE_ID,<br/> NAME as NAME,<br/> OPTIONS as OPTIONS,<br/> INIT_JS as INIT_JS,<br/> FIRE_ON_PAGE_LOAD as FIRE_ON_PAGE_LOAD<br/>from<br/> UC_GUIDEDTOUR_TOURS<br/>where<br/> APPLICATION_ID = :APP_ID<br/> and PAGE_ID = :APP_PAGE_ID<br/> | Action attribute is set to Initialize Tour (Custom Tables) | SQL Query returning tours has to return tour data with fixed column names. Columns NAME, OPTIONS, INIT_JS and FIRE_ON_PAGE_LOAD are used to configure a new tour. Learn more about column data in the section Sample Application \ Supporting Tables. |
| 11 | SQL Query Returning Tour Steps | SQL Query | <br/>select<br/> ID as ID,<br/> TOUR_ID as TOUR_ID,<br/> STEP_STATIC_ID as STEP_STATIC_ID,<br/> DISPLAY_SEQUENCE as DISPLAY_SEQUENCE,<br/> TITLE as TITLE,<br/> BODY as BODY,<br/> MASK_PADDING as MASK_PADDING,<br/> MASK_RADIUS as MASK_RADIUS,<br/> PLACEMENT as PLACEMENT,<br/> OPTIONS as OPTIONS,<br/> INIT_JS as INIT_JS,<br/> AFFECTED_ELEMENTS as AFFECTED_ELEMENTS<br/>from<br/> UC_GUIDEDTOUR_STEPS<br/> | Action attribute is set to Initialize Tour (Custom Tables) | SQL Query returning tours steps has to return step data using fixed column names. Learn more about column data in the section Sample Application \ Supporting Tables. |
| 12 | Placement | Select list | Action attribute is set to Add Step | Defines the position of a step according the affected element of the step. |
Actions
Initializing the tour differs depending on the tour data source. A tour can be entirely defined using dynamic actions or it can be initialized from database tables. Other actions let you run a tour and display a specific step of a defined tour.
| Option | Description |
|---|---|
| Add Step | When executed, a new step is added to a tour defined using the plug-in dynamic action Initialize Tour (Dynamic Action). Step options are computed based on given the plug-in attributes and can be extended using the dynamic action JavaScript Initialization Code. Affected elements have to reference a singular DOM node, otherwise, the plug-in raises an error. If not set, then a step is centered. If set, then a step is displayed in the context of the DOM node referenced by affected elements. |
| Go To Step (Step Static Id) | When executed, shows the step with a given step id of an active tour. |
| Go To Step (Event Data) | When executed, shows the step of an active tour based on the passed static id via an event data (this.data). The action was implemented to allow navigation using anchors displayed in a step body. Dynamic action implementing the Go To Step (Event data) listening to a custom event goToStep can be triggered using JavaScript Code: apex.event.trigger(document, "goToStep", "stepStaticId"); |
| Go To Step (Tour Name, Step Static Id) | When executed, shows the step of the given tour based on the given step id and tour name. |
| Initialize Tour (Dynamic Action) | When executed, initializes a tour based on the plug-in dynamic action attributes. |
| Initialize Tour (Table) | When executed, initializes a tour based on configuration stored in tables UC_GUIDEDTOUR_TOURS and UC_GUIDEDTOUR_STEPS. Learn more about these tables in section Sample Application \ Supporting Tables. |
| Initialize Tour (Custom Tables) | When executed, initializes a tour based on the result returned from two SQL Queries defined by the plug-in attributes SQL Query Returning Tours and SQL Query Returning Steps. Learn more about these tables in section Sample Application \ Supporting Tables. |
| Run Tour (Event Data) | When executed, launches a tour based on the dynamic action this.data event data. When dynamic action implementing this action listens to a custom event showTour, then it can be triggered using the JavaScript Code: <br/>apex.event.trigger(document, 'showTour', {"tourName": "tourName"})<br/> |
| Run Tour (Name) | When executed, launches a tour based on given the plug-in attribute Tour Name. |