Getting Started

First, drag and drop Style\DefaultDriverStyle to the bottom of the Widget Tree. This block contains the default CSS styles sufficient for your Tour. You can customize it into other Themes if needed; details are provided in the Theming section.

Next, drag and drop the DriverJS\Driver block right below Style\DefaultDriverStyle, then place your DriverJS\Step elements inside the Steps placeholder of the Driver block. At this point, you’ve successfully configured a simple Driver. You can now trigger the Drive action via the OnClick event of a button to activate the driver with empty steps, without focusing on any element on the screen.

Important Note

OutDriver is designed to exist as a single instance across the entire screen. You should place it at the bottom of the Widget Tree of a screen in OutSystems. Avoid using OutDriver inside individual blocks, as this will cause unexpected behavior and is not a correct design approach for guiding new users through a tour.

We provide a set of actions that allow you to build most patterns you need without complex configuration.

Driver Configuration

The Driver block comes with configuration options similar to its original library, which you can reference here: https://driverjs.com/docs/configuration.

Additionally, it includes special configurations to properly handle Driver.js hooks when used within OutSystems. These include:

- OnCloseClick

- OnDeselected

- OnDestroyed

- OnDestroyStarted

- OnHighlighted

- OnHighlightStarted

- OnNextClick

- OnPrevClick

- OnPopoverRender

These hooks will be described and demonstrated in the Popover Buttons section.

Step Configuration

Similar to the Driver, each Step has its own configuration options, which you can reference from the original library. Typically, you’ll work most with two main configs: element and popover.

Hook configurations have minor differences between the original library and OutDriver in OutSystems, but they work well with most tour patterns.

Handling NULL

OutSystems is not a platform that works well with NULL values. It is designed to operate safely with default values, which influenced the architecture of Forge OutDriver. Some configurations in the original library work fine with NULL or undefined, but in OutDriver you must explicitly pass parameters instead of relying on NULL.