App Guide For Mendix
A Widget to Showcase new Features in your App, or created a Guided tour in your app.
The basic idea is that you add a unique class name to an element (div, h1, etc.) and then add that class name to the widget, you give it a title and a description and that will create a guided introduction to your app. This will take the user on a step by step journey through the App.
Highlight Important information or key aspect is Complex Apps.
As the value is stored in the Data Model, this can be dynamically turned on or off based on actions in your app.
Reasons to Use
Currently there is another Widget available (Guided Tour) it uses the same underling React Lib, the difference between this Widget and that is as follows:
|App Guide||Guided Tour|
|Attribute Stored in Data Model|
|Solves Scroll Bug *|
|Works Across Pages|
This widget also solves a Race condition when Mendix app is loading and the Widget is initializing.
* As most Mendix apps use a fixed window hight and scrolls a containing div, this causes issues when the desired highlighted point is not in the Viewport on page load.
There are Various Options Available with some caveat's:
|Welcome attribute||Boolean||Attribute from the data model to either Show or hide app guide. Recommended Naming Convention
|On Complete||Action||Usually a Microflow to change the Welcome Attribute, is shows that the user has completed the App Guide. Changes the Welcome attribute from truthy to falsy. Can also be a Page Call, as you can implement the guide on multiple pages and "connect" them to|
|On Complete Page Call?||Boolean||If the guide is Navigating to a different page, this must be set to True.|
|Show Skip Button||Boolean||Show the skip button in the floating card|
|Show Progress||Boolean||Show the progress in the floating card|
|Object list group||List||List of items to Show cards for|
|Classname||String||The class name to attache it self to. This must be unique per Item|
|Title||String||Title of the Card|
|Content||Multi-String||Description of Card|
|Position||Multi-String||Position of the floating card. It will try its best but will break away if it cant fit the card in the view port|
- Hex values to change card settings
Issues, suggestions and feature requests