How is your experience with the OutSystems Community?
driverjs
Reactive icon

DriverJS

Stable version 1.0.2 (Compatible with OutSystems 11)
Uploaded
 on 27 Oct (19 hours ago)
 by 
Xin Truong
3.7
 (3 ratings)
driverjs

DriverJS

Details
Component to help drive the user's focus on page by highlighting them. Based on https://github.com/kamranahmedse/driver.js
Read more

Component to help drive the user's focus on the page by highlighting them. 

Based on https://github.com/kamranahmedse/driver.js


The component allows for:

  • Highlighting a single element - A real-world usage example for this is: using it to dim the background and highlight the required element e.g. the way Facebook does it when creating a post;
  • Highlight and popover - You can show additional details beside the highlighted element using the popover. Also, the title and description can have HTML as well.
  • Positioning the Popover - Driver automatically finds a suitable position for the popover and displays it. You can override it using position property. You can also add offset to the popover position by using the offset property;
  • Creating Feature Introductions - Feature introductions are helpful when onboarding new users and giving them an idea about different parts of the application; you can create them seamlessly with Driver. Define the steps and call the start when you want to start presenting. Users will be able to control the steps using the keyboard or using the buttons on popovers;
Release notes (1.0.2)

New Features

🚀 Driver & Step Blocks

Introducing two new blocks, Driver and Step, designed to make step configuration easier and more intuitive than ever before.

With these new blocks, you can build and manage guided tours with a cleaner structure, reducing setup complexity and improving overall maintainability.

🛠️ Utility Actions

We've also introduced a comprehensive set of Utility Actions to simplify navigation and initialization workflows. These actions eliminate the need for the previous setup approach that required manually passing a DriverJS Object.

Creation Actions

  • Destroy
  • SetConfig
  • SetSteps

Getter Actions

  • GetActiveElement
  • GetActiveIndex
  • GetActiveStep
  • GetConfig
  • GetPreviousElement
  • GetPreviousStep
  • GetState
  • HasNextStep
  • HasPreviousStep
  • IsActive
  • IsFirstStep
  • IsLastStep

Run Actions

  • Drive
  • Highlight
  • MoveNext
  • MovePrevious
  • Refresh

These new actions provide a more streamlined and developer-friendly experience when controlling and interacting with DriverJS tours.

📖 For detailed usage instructions and implementation examples, please refer to the attached demo.

License (1.0.2)
Reviews (2)
by 
2025-04-01
in version 1.0.0
The drivejs is not working as expected in the scenario of dynamic changes to containers within the single screen. Could you please provide some suggestion on how to handle this situation?
by 
2023-09-01
in version 1.0.0
Works as expected
Team
Other assets in this category