Overview

React Tour - Sample is a ready-made module that shows the React Tour widget working in Mendix Studio Pro 10.24.17. Import it, give your user roles the module role of ReactTourSample, and add the page ReactTourSample.Home_Web to the navigation. When the page opens, a guided tour starts on Button 1 and walks through the buttons and text blocks on the page.

The tour dims the page, highlights one element at a time and shows a popover with the step text. Users move through the steps with the arrow buttons, the dots or the arrow keys. They close the tour with the X button or Esc.

The module shows how to set up a tour yourself:

- The steps are JSON text in a String attribute of the Helper entity.

- The target elements get a CSS class in Studio Pro.

- The microflow DS_Helper fills the steps and switches the tour on. It also sets the look: accent colour, arrows, close button, dots and step badge.

Use it to see the widget working before you add it to your app, to learn the Steps JSON format, or as a starting point for your own onboarding tour.

Documentation

Typical usage scenario

React Tour - Sample is a ready-made example module for the React Tour widget. It contains one page with a working five-step guided tour, the helper entity that holds the tour settings, and the microflow that fills them. Import it to see the widget working in your own app in a few minutes.

Problems it solves:

- Setting up a first tour takes guesswork: which attributes to create, how to write the Steps JSON, and how to point steps at elements. The sample shows all of it on one page.

- Checking the widget after an upgrade is easier on a clean reference page.

Where it's useful:

- Evaluating React Tour before adding it to your app

- Learning the Steps JSON format and the CSS-class approach for target elements

- A starting point for your own onboarding or feature tour

- Demos and training

Features and limitations

Features:

- Page ReactTourSample.Home_Web with three buttons and text blocks. The tour starts automatically on Button 1.

- A five-step tour with steps for .custombutton1, .custombutton2, .custombutton3, .class4 and .class8.

- Entity Helper, with one attribute per widget setting: Steps, StartTour, accent colour, the show/hide settings, Start At and focus lock.

- Microflow DS_Helper, which fills the steps, starts the tour and sets the look:

- accent colour #ffc400

- arrows, close button, dots and step badge on

- start at step 1

- Navigation with the arrow buttons, dots or arrow keys; close with the X button or Esc.

- Includes React Tour widget 2.1.0, which works in the Mendix 10 React client.

Limitations:

- The tour settings are fixed in DS_Helper. Change them in Studio Pro to try other options.

- The target elements must be on the page when the tour opens.

- Web only; native mobile is not supported.

Dependencies

- Mendix Studio Pro 10.24.17 or a later 10.24 version

Installation

1. Download ReactTourSample.mpk from the Marketplace or from the GitHub release Sample-Version2.1.0.

2. In Studio Pro, choose App > Import module package and select the file. Press F4 if the widget doesn't appear in the Toolbox yet.

3. Open App > Security > User roles and give the roles that should use the page the module role of ReactTourSample.

4. Add the page ReactTourSample.Home_Web to the navigation.

5. Run the app and open the page. The tour starts on Button 1.

Configuration

The sample needs no configuration. To change the tour or reuse it:

1. Open the microflow DS_Helper and change the Steps JSON, for example:

[{"selector": ".custombutton1", "content": "This is my custom button 1"}]

2. Give each element you want to highlight a class in Studio Pro (Properties > Appearance > Class), matching the selector in the JSON.

3. Change the other values in DS_Helper to try the settings, for example Show Close Button = false to hide the X, or Start At = 2 to start at the third step.

4. To use it in your own page, copy the Helper attributes to your entity (or keep Helper as a helper entity), place the widget in a data view, and set Start Tour to true when the tour should open.

Known bugs

No known bugs.

Report issues at https://github.com/bharathidas/Reactour/issues

Frequently Asked Questions

Is this the widget itself?

It's a sample module that includes the widget. If you only need the widget, download React Tour from its own Marketplace listing.

The tour doesn't start. What should I check?

Make sure your user role has the module role of ReactTourSample and that you opened the page ReactTourSample.Home_Web. The tour opens when the page loads.

How do I open the tour again after closing it?

Reload the page. In your own app, set Start Tour to true again, for example from a button. The widget sets it back to false when the tour closes.

What changed from the Mendix 9 sample?

The Mendix 9 sample was a complete app (GitHub release version2). This version is a module package for Studio Pro 10.24.17 that you import into your own app, and it includes widget 2.1.0.