DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Nouveauté WINDEV, WEBDEV et WINDEV Mobile 2024 !
Aide / Editeurs / Editeur de fenêtres et de pages / Visite guidée
  • Présentation
  • Comment mettre en place une visite guidée ?
  • Modes de création d'une visite guidée
  • Assistant de création d'une visite guidée
  • Paramétrage général de la visite guidée
  • Paramétrage spécifique à chaque étape
  • Paramétrage de l'étape
  • Surcharge des options générales pour l'étape
  • Code généré par l'assistant
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaEtats et RequêtesCode Utilisateur (MCU)
WEBDEV
WindowsLinuxPHPWEBDEV - Code Navigateur
WINDEV Mobile
AndroidWidget AndroidiPhone/iPadWidget IOSApple WatchMac CatalystUniversal Windows 10 App
Autres
Procédures stockées
Présentation
Une visite guidée correspond à un enchaînement de présentations de fonctionnalités, affichées dans une bulle de la fenêtre ou de la page en cours.
Une visite guidée présente à l’utilisateur final des nouveautés de la version, des fonctionnalités particulières, ou encore guide l'utilisateur en décrivant une à une les étapes à suivre. Dans ce dernier cas, une visite guidée peut faire office de tutoriel.
Pour créer une visite guidée, WINDEV, WEBDEV et WINDEV Mobile proposent un assistant complet et puissant.
Comment mettre en place une visite guidée ?
Pour mettre en place une visite guidée dans votre application ou site, il suffit de lancer l'assistant.
Pour lancer l'assistant depuis WINDEV ou WINDEV Mobile :
  1. Sous le volet "Fenêtre", dans le groupe "Édition", déroulez "Visite Guidée" et sélectionnez un des modes de création de la visite guidée.
  2. L'assistant se lance.
Pour lancer l'assistant depuis WEBDEV :
  1. Sous le volet "Page", dans le groupe "Edition", déroulez "Visite Guidée" et sélectionnez un des modes de création de la visite guidée.
  2. L'assistant se lance.

Modes de création d'une visite guidée

Trois types de visite guidée sont disponibles :
  • Visite Guidée :
    Suite de bulles qui s’affichent à intervalle prédéfini ou après une intervention de l’utilisateur : clic sur un bouton, Suivant/ Précédent, frappe sur la touche espace, etc. Les fonctionnalités sont présentées les unes après les autres.
  • Utilisation Guidée :
    Ce mode présente une action à réaliser (saisir le code postal, etc.); lorsque cette action est réalisée, la bulle de l’étape suivante s’affiche. Les changements d’étape sont déclenchés par les actions de l’utilisateur dans l’application.
  • Bulle à affichage permanent :
    La bulle reste affichée tant que l’utilisateur ne la ferme pas. Ce mode permet par exemple de rappeler des consignes de sécurité, une règle métier ou permet de présenter une nouveauté importante.
Selon le type de visite guidée choisi, le code généré par l'assistant sera différent.
Assistant de création d'une visite guidée
L'assistant de création de visite guidée propose de définir les options générales de la visite guidée et les options spécifiques à chaque étape.
Le paramétrage des options générales de la visite guidée permet de gérer toutes les options d'affichage des bulles, de mise en évidence des champs, etc. Ces paramètres sont utilisés par défaut pour toutes les bulles.
Le paramétrage des étapes permet de définir le champ sur lequel la visite guidée doit être effectuée et le texte de la bulle pour l'étape. Il est également possible de personnaliser pour une étape, un des paramètres spécifiés dans le paramétrage général de la visite guidée. Par exemple, il est possible de changer la couleur du halo pour chaque étape.
Dans l'assistant, sont visibles à tout moment :
  • l'aperçu de la bulle.
  • le code WLangage correspondant à la visite guidée en cours de paramétrage. Ce code est construit dynamiquement en fonction des options sélectionnées.
Il est possible de :
  • Tester la visite guidée directement depuis l'assistant (bouton "Tester"). Dans ce cas, le code de la visite guidée est automatiquement inséré dans le code d'initialisation de la fenêtre en cours, et le test de la fenêtre est lancé. Les différentes bulles de la visite guidée sont affichées.
  • Valider l'assistant. Dans ce cas, l'assistant propose d'intégrer (ou de remplacer) le code généré dans l'événement "Initialisation" de la fenêtre en cours, ou de copier ce code dans le presse-papiers.
Paramétrage général de la visite guidée
Les options de paramétrage général permettent de définir les options communes à toutes les étapes de la visite guidée.
Ces options sont les suivantes :
Les options générales correspondent :
  • à l'identifiant de la visite guidée. Cet identifiant doit être unique dans le projet en cours.
  • au numéro de version de la visite guidée. Ce numéro de version permet par exemple, de gérer l'affichage de la visite guidée version 2 si la visite guidée version 1 a déjà été vue.
Les options de la visite guidée sont les suivantes :
  • Action sur clic : Il est possible de choisir l'action d'un clic sur le champ mis en avant par la visite guidée ou en dehors de ce champ. Les possibilités sont les suivantes :
    • Passer à l'étape suivante : Le clic sur le champ (ou en dehors) permet de passer directement à l'étape suivante.
    • Clic sur le champ : Le clic sur le champ exécute le code de clic sur le champ. Le passage à l'étape suivante doit se faire par programmation (avec la fonction VisiteGuidéeChangeEtape).
    • Clic sur le champ puis étape suivante : Le champ fonctionne normalement. A la fin de l'exécution du code du champ, la visite guidée passe automatiquement à l'étape suivante.
      Cette action est opérationnelle uniquement sur les champs suivants : Bouton, Interrupteur, Sélecteur et Option de menu. Pour les autres champs, seul le passage à l'étape suivante sera effectué.
    • Terminer la visite : La visite guidée s'arrête.
    • Ne rien faire : Le clic n'a aucun effet.
  • Bulle de description : Permet de définir les caractéristiques de la bulle d'aide affichée. Deux modes sont disponibles :
    • Mode opaque : la bulle est affichée dans une fenêtre popup avec une flèche qui pointe sur le ou les champs cible. Avec la fenêtre interne par défaut, des boutons permettent de passer à l'étape suivante/précédente ou de terminer la visite.
    • Mode transparent : la bulle est affichée avec un fond transparent à côté du ou des champs cible. Dans ce mode aucune interaction n'est possible avec les champs de la fenêtre interne.
    Dans les deux cas, cette bulle d'aide peut correspondre à :
    • la fenêtre par défaut.
    • la personnalisation de la fenêtre par défaut.
  • Effet autour des champs : Il est possible d'utiliser plusieurs effets spécifiques en plus de la mise en évidence. Il est possible de :
    • afficher un halo : Un halo est affiché autour de la cible. Il est possible de choisir la couleur et l'opacité du halo.
    • griser la fenêtre (GFI) : La fenêtre sous la cible est grisée pour mettre en relief la cible. Il est possible de choisir la couleur du GFI et son opacité.
  • Mise en évidence des champs : Pour mettre en évidence le champ cible de l'étape, plusieurs possibilités :
    • entourer d'un rectangle avec coins plus ou moins arrondis. Il est possible d'arrondir plus ou moins les coins en précisant le rayon de l'arrondi (exprimé en pixels).
    • entourer d'un cercle.
    • définir une marge entre le champ et le cercle ou le rectangle de mise en évidence.
Paramétrage spécifique à chaque étape

Paramétrage de l'étape

Pour chaque étape, il est nécessaire d'indiquer les éléments spécifiques à l'étape :
  • le champ à mettre en évidence. Pour simplifier la saisie du nom du champ :
    1. Utilisez le bouton permettant de pointer le champ concerné dans la fenêtre de votre projet.
    2. Cliquez sur le champ voulu.
    3. Validez le choix du champ.
  • le titre affiché dans la bulle.
  • la description affichée dans la bulle.
Ces informations seront affichées selon les caractéristiques de la bulle utilisée.
Remarque : Si votre application est multilingue, les chaînes correspondant au titre et à la description de la bulle devront être transformées en chaînes multilingues pour être traduites.

Surcharge des options générales pour l'étape

Il est possible de personnaliser toutes les options spécifiées dans le paramétrage général pour chaque étape. Il suffit de :
  1. Sélectionner la catégorie à personnaliser.
  2. Indiquer les paramètres spécifiques à l'étape en cours.
Code généré par l'assistant
Le code généré pour la visite guidée utilise toutes les fonctions WLangage permettant la gestion des visites guidées :
Ce code peut être modifié. Il est possible par exemple d'ajouter une étape, de modifier l'effet sur le champ, etc.
Attention : Le code permettant de lancer la visite guidée est inséré à la fin du code généré. Il est possible de le déplacer si nécessaire, par exemple pour lancer la visite guidée à la demande.
Pour plus de détails sur les fonctions de gestion de la visite guidée, consultez Fonctions de gestion des visites guidées.
WEBDEV - Code Navigateur Remarque : Il n'est pas possible d'accéder à un volet d'onglet, une ligne d'un champ Zone répétée, une ligne d'un champ Table, etc. Si des crochets sont utilisés dans le nom du champ ([ ]), une erreur de compilation est affichée.
Version minimum requise
  • Version 2024
Documentation également disponible pour…
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire

Dernière modification : 19/01/2024

Signaler une erreur ou faire une suggestion | Aide en ligne locale