Custom Attributes

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 Settings

The plug-in exposes 6 application attributes which describe the default classes applied to tour steps and the default order of buttons.

Default Buttons Order

Type	Default value	Description
Text	hide, cancel, back, next, complete	Defines the default order of buttons in the step footer.

Button Cancel Classes

Type	Default value	Description
Text	t-Button t-Button—simple	The defined class names are added to the Cancel button.

Button Complete Classes

Type	Default value	Description
Text	t-Button t-Button—hot t-Button—simple	The defined class names are added to the Complete button.

Button Next Classes

Type	Default value	Description
Text	t-Button t-Button—hot	The defined class names are added to the Next button.

Button Back Classes

Type	Default value	Description
Text	t-Button	The defined class names are added to the Back button.

Button Hide Classes

Type	Default value	Description
Text	t-Button t-Button—simple	The defined class names are added to the Hide button.

Component Settings

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.

Action

Type	Default Value	Dependent on
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.

Step Title

Type	Default Value	Dependent on
Text	Empty	Action attribute is set to Add Step

Defines a step title.

Step Body

Type	Default Value	Dependent on
Textarea	Empty	Action attribute is set to Add Step

Defines a step HTML body.

Tour Settings

Type	Default Value	Dependent on
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.

Tour Name

Type	Default Value	Dependent on
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.

Step Settings

Type	Default Value	Dependent on
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.

Masking Padding

Type	Default Value	Dependent on
Number		Action attribute is set to Add Step

An amount of padding to add around the modal overlay opening.

Masking Radius

Type	Default Value	Dependent on
Number		Action attribute is set to Add Step

An amount of border radius to add around the modal overlay opening.

Step Static Id

Type	Default Value	Dependent on
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.

SQL Query Returning Tours

Type	Dependant on
SQL Query	Action attribute is set to Initialize Tour (Custom Tables)

**Default Value: **

select
  ID as ID,
  APPLICATION_ID as APPLICATION_ID
  PAGE_ID as PAGE_ID,
  NAME as NAME,
  OPTIONS as OPTIONS,
  INIT_JS as INIT_JS,
  FIRE_ON_PAGE_LOAD as FIRE_ON_PAGE_LOAD,
from
  UC_GUIDEDTOUR_TOURS
where
  APPLICATION_ID = :APP_ID
  and PAGE_ID = :APP_PAGE_ID

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.

SQL Query Returning Tour Steps

Type	Dependant on
SQL Query	Action attribute is set to Initialize Tour (Custom Tables)

**Default Value: **

select
  ID as ID,
  TOUR_ID as TOUR_ID,
  STEP_STATIC_ID AS STEP_STATIC_ID,
  DISPLAY_SEQUENCE as DISPLAY_SEQUENCE,
  TITLE as TITLE,
  BODY as BODY,
  MASK_PADDING as MASK_PADDING,
  MASK_RADIUS as MASK_RADIUS,
  PLACEMENT as PLACEMENT,
  OPTIONS as OPTIONS,
  INIT_JS as INIT_JS,
  AFFECTED_ELEMENTS as AFFECTED_ELEMENTS
from
  UC_GUIDEDTOUR_STEPS

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.

Placement

Type	Default Value	Dependent on
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.

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.