?? In-App Tutorial Plugin for OutSystems Mobile
This plugin allows developers to create interactive, step-by-step tutorial guides inside OutSystems Mobile applications. It is especially useful for user onboarding, introducing new features, or improving user adoption by highlighting key UI elements and providing contextual instructions through tooltips and overlays.
?? How It Works
The plugin accepts a list of steps as input, where each step contains:
NameContainer (Text): The identifier of the target widget (usually the element's Name in OutSystems).
Description (Text): The instructional text to be shown in the tooltip.
Sequence (Integer): The sequence/order of the tutorial step.
Each step is processed in sequence. The corresponding UI element will be highlighted, and a tooltip with the provided message will appear near it. Users can navigate through the tutorial using "Next" and "Previous" buttons.
?? Use Cases
Onboarding new users with a guided introduction to the app.
Highlighting new features after an update.
Explaining complex flows in a user-friendly way.
Step-by-step instructions for internal training or client demos.
? Features
Fully compatible with OutSystems Mobile (Reactive Apps not supported).
No external dependencies or JS libraries required.
Flexible and reusable across different apps or screens.
Easy integration with just one block and one input list.
Built-in navigation for Next/Previous steps.
Clean and minimal design for better focus and UX.
?? Installation & Usage
Install the plugin and place the Tutorial Block on your screen.
Prepare the list of tutorial steps and bind it to the block input.
Trigger the tutorial using the exposed client action (e.g., on button click or screen load).
The tutorial will guide the user through each defined step automatically.
?? Notes
Ensure target elements have unique Name values to be referenced by the tutorial.
Works best when used on screens where elements are rendered fully and visible on load.