ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / Editors / Window editor and page editor / Guided Tour
  • Overview
  • How to set up a Guided Tour?
  • Guided Tour creation modes
  • Guided Tour creation wizard
  • General settings of the Guided Tour
  • Specific settings of each step
  • Step settings
  • Overriding general options in each step
  • Code generated by the wizard
WINDEV
WindowsLinuxJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac Catalyst
Others
Stored procedures
Overview
A Guided Tour presents a series of features, displayed in a tooltip in the current window or page.
A Guided Tour introduces end users to new features or specific functionalities, or guides them through each step of a process. In the latter case, a Guided Tour can serve as a tutorial.
WINDEV, WEBDEV and WINDEV Mobile offer a complete and powerful wizard to help you create Guided Tours.
How to set up a Guided Tour?
To set up a Guided Tour in your application or website, simply open the wizard.
To open the wizard from WINDEV or WINDEV Mobile:
  1. On the "Window" tab, in the "Edit" group, expand "Guided Tour" and select one of the Guided Tour creation modes.
  2. The wizard starts.
To open the wizard from WEBDEV:
  1. On the "Page" tab, in the "Edit" group, expand "Guided Tour" and select one of the Guided Tour creation modes.
  2. The wizard starts.

Guided Tour creation modes

There are three types of Guided Tours:
  • Guided Tour:
    Sequence of tooltips displayed at preset intervals or after a user action: click on a button, Next/Back, Space key, etc. Features are presented one after another.
  • Walkthrough:
    This mode prompts the user to complete an action (enter a postal code, for example). Once this action has been completed, the next tooltip is displayed. The transition to the next step is triggered by user actions in the application.
  • Persistent tooltip:
    The tooltip remains displayed until the user closes it. This mode can be used to remind users of security information, business rules, or to introduce an important new feature.
The code generated by the wizard will be different depending on the type of Guided Tour.
Guided Tour creation wizard
The Guided Tour creation wizard lets you define the general options of the Guided Tour, as well as specific options for each step.
In the general options of the Guided Tour, you can adjust settings for displaying tooltips and highlighting controls, etc. These settings are applied to all tooltips by default.
In the settings of each step, you can choose the control to be highlighted and the text of the tooltip. You can also customize one of the general settings for a specific step. For example, you can change the color of the halo around the control for each step.
In the wizard, you can see at any time:
  • the tooltip preview.
  • the WLanguage code of the Guided Tour. This code is built dynamically according to the selected options.
You can:
  • Test the Guided Tour directly from the wizard ("Test" button). In this case, the Guided Tour code is automatically inserted into the initialization code of the current window, and the test is run. The different tooltips of the Guided Tour are displayed.
  • Confirm the options selected in the wizard. In this case, the wizard prompts you to integrate (or replace) the generated code in the "Initialization" event of the current window, or to copy this code to the clipboard.
General settings of the Guided Tour
The general settings define the options common to all the steps of the Guided Tour.
These options are as follows:
The general options include:
  • the identifier of the Guided Tour. This identifier must be unique in the current project.
  • the version number of the Guided Tour. This version number can be used to define options for a Guided Tour in version 2 if version 1 has already been viewed.
The Guided Tour options include:
  • Click action: You can choose the action to be executed when the user clicks inside and outside the highlighted control. The different options are as follows:
    • Go to the next step: Clicking inside or outside the control takes the user to the next step.
    • Click the control: Clicking the control executes the click code. The transition to the next step must be defined programmatically (using GuidedTourChangeStep).
    • Click the control then go to the next step: The control has a standard behavior. Once the code of the control is executed, the Guided Tour automatically moves on to the next step.
      This action is available only for the following controls: Button, Check Box, Radio Button and Menu option. For other controls, only the transition to the next step will be run.
    • End tour: Ends the Guided Tour.
    • No action: Clicking has no effect.
  • Description tooltip: Allows you to define the characteristics of the tooltip displayed. Two modes are available:
    • Opaque mode: the tooltip is displayed in a popup window with an arrow pointing to the target controls(s). The default internal window includes two buttons to go to the next/previous step or to end the tour.
    • Transparent mode: the tooltip is displayed with a transparent background next to the target control(s). In this mode, the user cannot interact with the controls in the internal window.
    In both cases, this tooltip may correspond to:
    • the default window.
    • a customization of the default window.
  • Effect around the controls: Other specific effects are available in addition to highlighting. You can:
    • draw a halo: A halo is displayed around the target control. You can set the color and opacity of the halo.
    • dim the window (DDW): The window behind the control is dimmed to highlight the control. You can set the color and opacity of the dimming effect.
  • Highlight controls: There are several options to highlight the control in each step:
    • draw a rectangle around the control with rounded or square corners. You can set a radius (in pixels) to make the corners sharper or smoother.
    • draw a circle.
    • set a margin between the control and the highlight circle or rectangle.
Specific settings of each step

Step settings

Here, you can indicate the elements specific to each step:
  • the control to be highlighted. Te easily enter the name of the control:
    1. Use the button to point to the relevant control in your project window.
    2. Click the desired control.
    3. Confirm the selection.
  • the title displayed in the tooltip.
  • the description displayed in the tooltip.
This information will be displayed according to the characteristics of the tooltip used.
Remark: If your application supports multiple languages, you will need to convert the tooltip title and description to multilingual strings to be able to translate them.

Overriding general options in each step

You can customize the general options for each individual step. Simply:
  1. Select the category you want to customize.
  2. Specify the values specific to the current step.
Code generated by the wizard
The generated code uses all the WLanguage functions needed to handle Guided Tours:
This code can be edited. You can add a step, change the effect applied to the control, etc.
Caution: The code that starts the Guided Tour is inserted at the end of the generated code. You can move these lines of code if necessary, to open a Guided Tour on demand.
For more details on Guided Tour functions, see Guided Tour functions.
WEBDEV - Browser code Remark: You cannot access tabs, Looper control cells, Table control rows, etc. If square brackets are used in the control name ([ ]), a compilation error is displayed.
Minimum version required
  • Version 2024
This page is also available for…
Comments
Click [Add] to post a comment

Last update: 01/19/2024

Send a report | Local help