App Guide

Content Type: Widget
Categories: User Interface

Overview

Full Docs here

A Widget to Showcase new Features in your App, or create 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 Note - For the most up-to-date Docs and Project Board see Github

Documentation

Demo urlhttps://app-guide-mendix-widget-sandbox.mxapps.io/index.html?profile=Responsive


App Guide For Mendix

License: MIT GitHub issues GitHub issues GitHub issues License: MIT

headerIMG

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.

Features

  • 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 (Uses Local Browser Storage)
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.

Usage

There are Various Options Available with some caveat's:

Type Desc
Welcome attribute Boolean Attribute from the data model to either Show or hide app guide. Recommended Naming Convention hasSeen_xxx as false will SHOW the Widget and true will HIDE it
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

Screen Shots

datasource

datasource

datasource

  • Hex values to change card settings

Known Issues

  • None

Issues, suggestions and feature requests

Github Issues

License

Apache 2

Releases

Version: 2.0.0
Framework Version: 9.12.0
Release Notes: Rename Attribute to make it more clear New Demo
Version: 1.0.1
Framework Version: 9.12.0
Release Notes: Made Mx9 compatible. Made Text Values Dynamic
Version: 1.0.0
Framework Version: 8.12.0
Release Notes: The initial release of the App Guide Widget