Self Help - Les formulaires dynamiques - Cas d'utilisation


Pour vous aider à mettre en oeuvre ce cas d'utilisation, vous pouvez télécharger la documentation et le projet Exemple - Open url.png voir Liste des fichiers à télécharger

Ce cas d'utilisation utilise un formulaire dynamique permettant d'afficher sur une même page différents logos des produits EasyVista selon les options cochées par l’utilisateur, et de réactualiser la page suivant son nouveau choix.

Vue d'ensemble

La mise en oeuvre du cas d'utilisation s'effectue en plusieurs phases.

  • Phase 3 : Création de la procédure de calcul
    • La procédure exécute un script contenu dans la macro d’une étape de type Action, de façon transparente pour l'utilisateur.
    • Elle permet d'enregistrer les choix de l'utilisateur dans les variables projet dédiées.
  • Phase 5 : Création de la procédure d'affichage du formulaire
    • La procédure est constituée d'une seule étape de type Page.
    • Elle contient l’ensemble des ressources créées dans les phases précédentes.
    • Elle permet de créer les conditions de visibilité des logos utilisées pour réactualiser la page avec les nouveaux choix de l'utilisateur.
Parcours de l'utilisateur Représentation
1. L'utilisateur coche la case Service Manager
  • Le logo Service Manager est affiché.
  • Le formulaire reste affiché sur la page.
Example - Dynamic form - One choice.png
2. L'utilisateur coche les 2 cases Service Manager et Service Bots
  • La page est réactualisée.
  • Les logos Service Manager et Service Bots sont affichés.
Example - Dynamic form - Two choices.png

Prérequis

1. Copiez les images contenant les logos des produits EasyVista dans la librairie du projet Self Help dans lequel vous souhaitez créer votre formulaire.

Best Practice icon.png  Créez un dossier Ressources > Images pour stocker les logos et les retrouver facilement.

Phase 1 : Création du formulaire proposant les choix de logos

Étape 1 : Création du formulaire

1. Ouvrez l'arborescence du volet Explorateur pour le projet Self Help dans lequel vous souhaitez créer votre formulaire.

2. Cliquez droit sur le dossier où doit être créé le nouveau formulaire et sélectionnez Nouveau > Formulaire dans le menu contextuel.
Le formulaire est inséré dans le volet Explorateur, sous le libellé <Nouveau formulaire>.

3. Renommez le formulaire en Choix de l’utilisateur.

Étape 2 : Création des éléments de formulaire

1. Double-cliquez sur le formulaire dans le volet Explorateur.

  • Le volet Conception est ouvert.
  • La première cellule du formulaire est affichée.

2. Cliquez sur Add element type icon.png dans la cellule et sélectionnez Ajouter > Champ de saisie dans le menu contextuel.
La fenêtre de propriétés du nouvel élément est affichée.
         Create form element.png

3. Renseignez le nouvel élément.

  • Saisissez le libellé du premier choix de logo : Montrez-moi le logo Service Manager.
  • Indiquez que l'élément est une case à cocher, en sélectionnant la valeur Booléen dans le champ Type attendu à la saisie.
  • Modifiez le nom des paramètres d'entrée et de sortie en service_manager, pour faciliter leur identification.
  • Cliquez sur Terminer.
    • Le nouvel élément de formulaire est inséré dans le volet Conception.
    • Le volet Description est affiché.

4. Renseignez les autres éléments correspondant aux autres choix de logos.

  • Cliquez sur Add icon.png en bas du formulaire pour ajouter une ligne. 
  • Répétez les mêmes opérations que pour le premier élément.
             Form - Elements created.png
    Les éléments de formulaire sont affichés dans le volet Explorateur, dans le dossier du formulaire Choix de l'utilisateur.
             Form - Elements tree.png

Phase 2 : Création de variables projet pour enregistrer les réponses aux choix de logos

Étape 1 : Création de la variable projet

1. Cliquez droit sur le dossier Librairie du volet Explorateur pour le projet Self Help dans lequel vous avez créé votre formulaire et sélectionnez Nouveau > Variable dans le menu contextuel.
La fenêtre de propriétés de la nouvelle variable projet est affichée.
         Create library variable.png

Étape 2 : Saisie des propriétés de la variable projet

1. Saisissez le libellé de la première variable projet qui est associée au premier choix de logo : SMLogo.

2. Indiquez que la variable est associée à un élément de type Case à cocher, en sélectionnant la valeur Vrai/Faux (Booléen) dans le champ Type de données.

3. Indiquez que la variable est associée à un élément qui n'est pas coché à l'ouverture du formulaire, en sélectionnant l'option Faux dans le champ Valeur par défaut.

4. Cliquez sur Terminer.

5. Créez les autres variables projet associées aux autres choix de logos, en répétant les mêmes opérations.
Les variables sont affichées dans le volet Explorateur, dans le dossier Variables projet.

         Library variables created.png

Phase 3 : Création de la procédure de calcul

Étape 1 : Création de la procédure

1. Cliquez droit sur le projet Self Help dans lequel vous avez créé votre formulaire et sélectionnez Nouveau > Procédure dans le menu contextuel.
La procédure est insérée dans le volet Explorateur, sous le libellé <Nouvelle procédure>.

2. Renommez la procédure en Calcul du contenu.

Étape 2 : Création d'une étape de type Action

1. Double-cliquez sur la procédure dans l'arborescence du volet Explorateur.
La procédure est affichée dans le volet Conception.

2. Cliquez droit sur l'étape Début Step type icon - Start.png et sélectionnez Insérer une Étape > Insérer une Action dans le menu contextuel.

3. Nommez l'étape Calcul du contenu.
Le volet Description est affiché.
         Compute content procedure created.png
 

Étape 3 : Association des variables d'entrée des éléments de formulaire aux variables projet correspondantes

1. Allez sur l'onglet Macro du volet Description.

2. Renseignez l'association sous la forme ci-dessous, en cliquant-glissant les variables du volet Explorateur vers l'onglet Macro.

<Variable projet enregistrant la réponse à un choix de logo> = <Variable d'entrée de l'élément de formulaire proposant le même choix de logo>

exemple  Association pour le choix de logo Service Manager

  • Cliquez-glissez, sur la ligne numérotée 1, la variable projet SMLogo (variable enregistrant la réponse au choix du logo Service Manager).
  • Tapez l'opérateur = pour faire la correspondance.
  • Cliquez-glissez, derrière l'opérateur, la variable d'entrée service_manager (variable d'entrée de l'élément de formulaire proposant le choix de logo Service Manager).
    Macro tab - Drag and drop instructions.png

3. Répétez les mêmes opérations pour chaque association de variables correspondant à chaque choix de logo, en insérant à chaque fois une nouvelle ligne via la touche < Enter>.

         Macro tab - Instructions created.png

Phase 4 : Création des contenus Html affichant à l'écran les logos

Étape 1 : Création de la ressource de type Contenu Html

1. Cliquez droit sur le projet Self Help dans lequel vous avez créé votre formulaire et sélectionnez Nouveau > Contenu dans le menu contextuel.
La ressource est insérée dans le volet Explorateur, sous le libellé <Nouveau contenu>.

Best Practice icon.png  Créez un dossier Ressources > Contenus Html pour stocker les contenus Html.

2. Renommez la ressource en Service Manager.
 

Étape 2 : Saisie du contenu de la ressource

1. Double-cliquez sur la ressource dans l'arborescence du volet Explorateur.
La ressource est affichée dans le volet Conception.

2. Renseignez le contenu de la page à afficher lorsque l'utilisateur choisit de visualiser le logo Service Manager.

  • Tapez le texte Voici le logo Service Manager.
  • Cliquez-glissez l'image du logo du dossier Ressources > Images vers le volet Conception.
             Html Content - Drag and drop logo.png

3. Répétez les opérations pour chaque contenu Html permettant d'afficher chaque choix de logo, en créant à chaque fois une nouvelle ressource.

         Html Content - Logo page display created.png

Phase 5 : Création de la procédure d'affichage du formulaire

Étape 1 : Création de la procédure

1. Cliquez droit sur le projet Self Help dans lequel vous avez créé votre formulaire et sélectionnez Nouveau > Procédure dans le menu contextuel.
La procédure est insérée dans le volet Explorateur, sous le libellé <Nouvelle procédure>.

2. Renommez la procédure en Affichage des logos.

Étape 2 : Création d'une étape de type Page

1. Double-cliquez sur la procédure dans l'arborescence du volet Explorateur.
La procédure est affichée dans le volet Conception.

2. Cliquez droit sur l'étape Début Step type icon - Start.png et sélectionnez Insérer une Étape > Insérer une Page dans le menu contextuel.

3. Nommez l'étape Logos.
Le volet Description est affiché.
         Display procedure created.png
 

Étape 3 : Ajout dans le contenu de l'étape du formulaire Choix de l'utilisateur

1. Allez sur l'onglet Contenu du volet Description.

2. Tapez le texte Sélectionnez le logo que vous souhaitez afficher.

3. Cliquez-glissez le formulaire du volet Explorateur vers l'onglet Contenu.

         Display procedure - Drag and drop form.png
 

Étape 4 : Ajout dans le contenu de l'étape de la procédure Calcul du contenu

1. Cliquez-glissez la procédure du volet Explorateur vers l'onglet Contenu, juste derrière le formulaire.

         Display procedure - Drag and drop Compute content procedure.png

2. Indiquez que la procédure est une procédure de calcul utilisée pour l'affichage d'un résultat à partir de champs dynamiques.

  • Cliquez sur le cadre de la procédure.
  • Cliquez sur Presentation options icon.png puis sur Presentation options - Procedure opening options icon.png dans la barre d'outils.
    Les options de présentation sont affichées.
             Display procedure - Drag and drop Compute content procedure - Add presentation option.png
             Display procedure - Drag and drop Compute content procedure - Properties procedure opening.png
  • Cochez la case Procédure de calcul.
  • Cliquez sur Terminer.
     

Étape 5 : Ajout dans le contenu de l'étape des contenus Html permettant l'affichage des images des logos

1. Cliquez-glissez le contenu Html du volet Explorateur vers l'onglet Contenu, sur une nouvelle ligne en bas de la page.
         Display procedure - Drag and drop Html contents.png

2. Indiquez que le contenu Html doit s'afficher uniquement lorsque l'utilisateur coche l'option dans le formulaire, via une condition de visibilité.

  • Cliquez sur le cadre du contenu Html.
  • Cliquez sur Open eye icon.png dans la barre d'outils.
             Display procedure - Html content - Add visibility condition.png
    La fenêtre de propriétés de la condition de visibilité est affichée.
             Display procedure - Html content - Properties visibility condition.png
  • Renseignez la condition sous la forme ci-dessous, en cliquant sur Select expression icon.png dans la zone Expression pour sélectionner la variable projet.

    <Variable projet enregistrant la réponse à un choix de logo> = True

    exemple  Condition associée au contenu Html Service Manager correspondant au choix de l'utilisateur Montrez-moi le logo Service Manager
    Display procedure - Html content - Example visibility condition.png

  • Cliquez sur Terminer.

3. Répétez les opérations pour chaque contenu Html permettant d'afficher chaque choix de logo, en renseignant à chaque fois la condition de visibilité.

Phase 6 : Test du bon fonctionnement du formulaire

1. Sauvegardez la procédure Affichage des logos via Save disk icon.png dans la barre d'outils du volet Conception.

2. Rendez la procédure accessible aux utilisateurs.

  • Cliquez droit sur la procédure dans l'arborescence du volet Explorateur et sélectionnez Autoriser le lancement par les utilisateurs dans le menu contextuel.
    L'icône User procedure access icon.png est affichée derrière le libellé de la procédure.

3. Affichez la procédure dans le volet Conception et cliquez sur User procedure access icon.png dans la barre d'outils.
Le formulaire s'affiche dans un nouvel onglet de votre navigateur internet.

4. Vérifiez qu'aucun logo n'est affiché à l'ouverture du formulaire (cases non cochées par défaut).

5. Cochez les différentes options de choix et vérifiez que les logos correspondants s'affichent bien.

Liste des fichiers à télécharger

Tags:
Modifié par Utilisateur inconnu le 2021/05/14 11:00
Créé par Administrator XWiki le 2021/04/20 09:24

Raccourcis

L'actualité mensuelle
•  Newsletter

Tous les changements
•  Service Manager
•  Service Apps
•  Self Help
•  Service Bots

Powered by XWiki ©, EasyVista 2021