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 1 : Création du formulaire proposant les choix de logos
  • Chaque choix de logo est affiché via un élément de formulaire de type Champ de saisie. 
  • L'élément est défini comme un champ dynamique, de type Case à cocher.

• Phase 2 : Création de variables projet pour enregistrer les réponses aux choix de logos
  • Chaque variable projet est associée à un choix de logo.
  • La variable permet d'enregistrer le choix de l'utilisateur (case cochée ou non pour chaque logo) dans une variable de la librairie du projet Self Help, afin de l'utiliser dans la procédure de calcul.

• 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 4 : Création des contenus Html affichant à l'écran les logos
  • Chaque contenu Html permet d'afficher l'image de l'un des logos.

• 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.

• Phase 6 : Test du bon fonctionnement du formulaire
  • La procédure d'affichage du formulaire est lancée.
  • Le bon affichage des logos est testé en cochant les options de choix affichées dans le formulaire.
     

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.
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.

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.

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.

2. Cliquez sur  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.
         

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é.

• Allez sur l'onglet Type et validation du volet Description.
• Cochez la case Champ dynamique.

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

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

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.
         

É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.

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  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é.
         
 

É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.

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>.

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>.

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.
           

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.

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  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é.
         
 

É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.

É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.

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  puis sur  dans la barre d'outils.
  Les options de présentation sont affichées.
           
           
• 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.
         

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  dans la barre d'outils.
           
  La fenêtre de propriétés de la condition de visibilité est affichée.
           

• Renseignez la condition sous la forme ci-dessous, en cliquant sur  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
  

• 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  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  est affichée derrière le libellé de la procédure.

3. Affichez la procédure dans le volet Conception et cliquez sur  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

• Fichier PDF du cas d'utilisation

• Archive du projet Self Help contenant le cas d'utilisation