Self Help - Les formulaires


Un formulaire est un type de ressource d'un projet Self Help. Il permet de collecter des informations au travers de saisies de l’utilisateur lors de l’exécution d'une procédure.

  • Un formulaire est géré et bâti depuis le mode Édition du Studio Desktop.
  • Il peut être inséré dans une procédure d'un projet Self Help  - Open url.png voir Cas d'utilisation
  • Les informations recueillies sont stockées dans des variables projet qui peuvent être utilisées dans des actions automatiques ou manuelles au cours de la procédure.
  • Il peut être dynamique  - Open url.png voir Description
     

Structure d'un formulaire

  • Un formulaire est constitué de cellules, chacune pouvant contenir un élément (zone de texte, liste de valeurs, ...)  - Open url.png voir Les types d'éléments d'un formulaire 
  • Les propriétés de chaque élément peuvent être modifiées pour définir l'apparence et le comportement à l'écran.

Exemples

  • Définition d'un formulaire pour collecter les informations nécessaires à la création d'un ticket dans Service Manager
        Open url.png voir Cas d'utilisation du package de connexion Service Manager
  • Définition d'un formulaire pour collecter les informations nécessaires à l'envoi d'un e-mail via un connecteur
  • Définition d'un formulaire dynamique pour afficher sur une même page différents logos des produits EasyVista selon le choix de l’utilisateur
        Open url.png voir Cas d'utilisation
             Example - Dynamic form - Two choices.png

Attention

  • Lorsque vous réduisez le nombre de lignes / colonnes d'un formulaire, toutes les lignes / colonnes au delà du nombre saisies sont supprimées.

    exemple  Formulaire à 4 lignes réduit à 3 lignes ==> La dernière ligne du formulaire est supprimée.
    Modify form structure.png

  • Vous ne pouvez pas modifier le type d'un élément une fois inséré dans un formulaire. Vous devez le supprimer et le recréer.

Bonnes pratiques

  • Utilisez les formulaires dynamiques comme alternative à la structure sous forme de branches.
  • Créez des groupes de champs pour structurer votre formulaire.
  • Utilisez des libellés pour ajouter des titres de sections dans un formulaire complexe.
  • Déplacez les éléments du formulaire via un couper-coller.
  • Plusieurs options permettent d'initialiser les entrées d'une liste de valeurs  - Open url.png voir onglet Entrées / Sorties > mode Avancé
    • Si les valeurs de la liste sont utilisées uniquement au niveau du formulaire, saisissez-les via des paramètres. Leur visibilité est restreinte à l’objet qui les utilisent et à ceux qui les appellent. Il s'agit de l'option par défaut.
    • Si vous souhaitez réutiliser les valeurs de la liste dans d'autres formulaires du même projet Self Help, saisissez-les via des variables de la librairie du projet. Cela permet de les rendre communes et visibles par tous les objets du projet Self Help.

Caractéristiques des formulaires

Formulaire dynamique

  open url.png voir Cas d'utilisation

  • Un formulaire dynamique est un formulaire possédant au moins un champ dynamique  - Open url.png voir propriétés de l'onglet Type et validation du volet Description
  • Une procédure de calcul, invisible à l'utilisateur, est associée au formulaire dynamique. Elle permet l'exécution d'un script contenu dans la macro d’une étape de type Action.
    Note : La procédure de calcul est unique, quel que soit le nombre de champs dynamiques intégrés : elle doit donc prendre en compte la combinaison de tous les critères de la page du formulaire.
  • Lors d’un changement de valeur d'un champ dynamique, la procédure de calcul est exécutée et la page est réactualisée avec les nouveaux critères.

Les types d'éléments d'un formulaire

Élément Description Représentation
Champ de saisie Affichage d'un libellé suivi d'une zone permettant la saisie de texte sur une seule ligne. Element type - Input field.png
Champ pour mot de passe Affichage d'une zone sécurisée pour la saisie d'un mot de passe.

Les caractères saisis sont automatiquement masqués par des *.

Element type - Password field.png
Groupe de champs Permet de regrouper plusieurs éléments dans une cellule. Element type - Field group.png
Libellé Affichage d'un texte en lecture seule, sans zone de saisie.

exemple Ajout de titres pour séparer des sections

Element type - Label.png
Liste de valeurs à choix multiple Affichage d'une liste de choix permettant la sélection de plusieurs valeurs.

Plusieurs modes d'affichage sont disponibles : boutons d'action, cases à cocher, liste, ... - Open url.png voir Description

Element type - Multiple choice value list.png
Liste de valeurs à choix unique Affichage d'une liste de choix permettant la sélection d'une seule valeur.

Plusieurs modes d'affichage sont disponibles : boutons d'action, cases à cocher, liste, ... - Open url.png voir Description

Element type - Single choice value list.png
Zone de saisie de texte multiligne Affichage d'une zone permettant la saisie de texte sur plusieurs lignes. Element type - Multiple line input field.png

Les modes d'affichage des listes de valeurs

Éléments de type Liste de valeurs à choix multiple et Liste de valeurs à choix unique

       Open url.png voir procédure Comment renseigner une liste de valeurs

Mode d'affichage Description Représentation
Boutons Les valeurs sont présentées sous la forme de boutons d'action.

Elles peuvent être affichées sur une même ligne ou les unes en dessous des autres.

L'utilisateur peut sélectionner plusieurs valeurs.

List value appearance - Button.png
Boutons radio Note : Uniquement pour une liste de valeurs à choix unique

Les valeurs sont précédées d'un bouton radio.

Elles peuvent être affichées sur une même ligne ou les unes en dessous des autres.

L'utilisateur peut sélectionner une seule valeur.

List value appearance - Radio button.png
Cases à cocher Note : Uniquement pour une liste de valeurs à choix multiple

Les valeurs sont précédées d'une case à cocher.

Elles peuvent être affichées sur une même ligne ou les unes en dessous des autres.

L'utilisateur peut sélectionner plusieurs valeurs.

List value appearance - Checkbox.png
Liste Les valeurs sont affichées via une liste.

L'utilisateur peut sélectionner plusieurs valeurs.

List value appearance - List.png
Liste déroulante Note : Uniquement pour une liste de valeurs à choix unique

Les valeurs sont affichées dans une liste déroulante.

L'utilisateur peut sélectionner une seule valeur.

List value appearance - Dropdown list.png

Description des écrans

       Form studio.png

(1) Volet Explorateur : Affiche les éléments et les variables projet du formulaire

(2) Volet Conception  : Espace de travail dédié à la conception du formulaire, surmonté d'une barre d'outils  - Open url.png voir procédure Comment créer un formulaire

(3) Volet Description : Volet contextuel à l'élément sélectionné dans le volet Conception, permettant la définition de son contenu et sa mise en page.

Barre d'outils

       Conception pane - Toolbar.png

Liste des fonctionnalités

  • Basculer entre le mode lecture seule et le mode Édition
  • Sauvegarder le formulaire
  • Ajouter un élément de formulaire : uniquement sur une cellule vide  - Open url.png voir Procédure détaillées
  • Ajouter une colonne ou une ligne
  • Supprimer une colonne ou une ligne
  • Afficher ou masquer la grille délimitant les cellules
  • Annuler ou rétablir la dernière modification
  • Changer la langue d’édition

Volet Description

Le volet Description est contextuel à l'élément sélectionné dans le volet Conception.

Propriétés globales

Permet de définir la structure du formulaire :

  • Nombre de lignes et de colonnes du formulaire
  • Espacement entre chaque cellule (par défaut, 5px)
     

Accès : Clic en dehors du formulaire dans le volet Conception

     Description Pane - Global properties tab.png

Onglet Propriétés libellé

Note : Uniquement pour un élément de type Libellé

     Description Pane - Label properties tab.png

Infobulle : Texte affiché sous l’élément de formulaire, visible pour l'utilisateur.

Best Practice icon.png  Utilisez ce champ comme une aide à la saisie.

Agencement : Options de mise en page de l’élément de formulaire.

  • Lignes occupées / Colonnes occupées : Permet de fusionner la cellule contenant l’élément avec des cellules vides adjacentes.
    • Pour fusionner avec des lignes adjacentes vides, renseignez le champ Lignes occupées.
    • Pour fusionner avec des colonnes adjacentes vides, renseignez le champ Colonnes occupées.

exemple  Lignes occupées = 2
Element - Merge cells.png

  • Position : Position de l’élément (libellé et éventuelle zone de saisie) à l’intérieur de la cellule. Survolez l'icône Help icon.png pour afficher les différentes possibilités.
             Element - Position.png
  • Remplir horizontalement : Indique si la largeur de l’élément doit être ajustée pour occuper toute la largeur de la cellule (case cochée) ou si sa taille d'origine est conservée (case non cochée).
  • Remplir verticalement : Indique si la hauteur de l’élément doit être ajustée pour s'afficher sur toute la hauteur de la cellule (case cochée) ou si sa taille d'origine est conservée (case non cochée).

Onglet Affichage

Permet de configurer l’affichage de l’élément de formulaire sélectionné dans le volet Conception.

     Description Pane - Display tab.png

Barre de titre : Libellé de l'élément de formulaire, visible pour l'utilisateur.

  • L'icône précédant le titre permet de visualiser la nature de l'élément.
  • Renseignez les libellés multilingues en sélectionnant la langue via la liste déroulante à droite de la barre de titre.

Infobulle : Texte affiché sous l’élément de formulaire, visible pour l'utilisateur.

Best Practice icon.png  Utilisez ce champ comme une aide à la saisie.

Agencement : Options de mise en page de l’élément de formulaire.

  • Lignes occupées / Colonnes occupées : Permet de fusionner la cellule contenant l’élément avec des cellules vides adjacentes.
    • Pour fusionner avec des lignes adjacentes vides, renseignez le champ Lignes occupées.
    • Pour fusionner avec des colonnes adjacentes vides, renseignez le champ Colonnes occupées.

exemple  Lignes occupées = 2
Element - Merge cells.png

  • Position : Position de l’élément (libellé et éventuelle zone de saisie) à l’intérieur de la cellule. Survolez l'icône Help icon.png pour afficher les différentes possibilités.
             Element - Position.png
  • Remplir horizontalement : Indique si la largeur de l’élément doit être ajustée pour occuper toute la largeur de la cellule (case cochée) ou si sa taille d'origine est conservée (case non cochée).
  • Remplir verticalement : Indique si la hauteur de l’élément doit être ajustée pour s'afficher sur toute la hauteur de la cellule (case cochée) ou si sa taille d'origine est conservée (case non cochée).
     

Apparence du sélecteur (Note : Uniquement pour un élément de type Liste de valeurs à choix multiple et Liste de valeurs à choix unique) : Mode d'affichage de la liste (boutons d'action, cases à cocher, liste, ...)  - Open url.png voir Les modes d'affichage des listes de valeurs

  • Uniquement pour les modes Boutons, Boutons radio et Cases à cocher : Cochez la case Horizontal pour afficher les valeurs sur une même ligne.
     

Libellé (Note : Sauf pour un élément de type Libellé) : Options de mise en page de la zone de libellé de l’élément de formulaire.

  • Largeur :
    • Option Automatique : La largeur de la zone de libellé est ajustée à la taille du libellé de l'élément.
    • Option Spécifique : Permet de renseigner la largeur d'affichage souhaitée, en pixels.
  • Gauche et Au-dessus : Indiquent si la zone de libellé doit être positionnée à gauche ou au-dessus de la zone de saisie de l'élément. 
  • Position : Position du libellé à l’intérieur de la zone de libellé. Survolez l'icône Help icon.png pour afficher les différentes possibilités.
     

Zone de saisie (Note : Sauf pour un élément de type Libellé) : Options de mise en page de la zone de saisie de l’élément de formulaire.

  • Largeur (Note : Uniquement si la case Remplir horizontalement n'est pas cochée dans la section Agencement) : Largeur d'affichage de la zone de saisie.
  • Hauteur (Note : Uniquement pour un élément de type Zone de saisie de texte multiligne et si la case Remplir verticalement n'est pas cochée dans la section Agencement) : Hauteur d'affichage de la zone de saisie.
  • Aligner sur la colonne (Note : Uniquement si l'option Gauche est sélectionnée dans la section Libellé) : Indique si la zone de saisie doit être alignée sur les autres libellés de la colonne (case cochée) ou si sa position d'origine est conservée (case non cochée).
     

Lignes et colonnes (Note : Uniquement pour un élément de type Groupe de champs) : Indique le nombre de lignes et de colonnes sur lesquelles sont réparties les cellules du groupe de champs.

exemple  Groupe de champs sur 2 lignes et 4 colonnes
Element - Group.png

Onglet Type et validation

Note : Sauf pour les éléments de type Groupe de champs et Libellé

Permet de gérer le comportement de validation de l’élément de formulaire sélectionné dans le volet Conception.

     Description Pane - Type validation tab.png

Type attendu à la saisie (Note : Uniquement pour un élément de type Champ de saisie, Champ pour mot de passe ou Zone de saisie de texte multiligne) : Indique le type de saisie que doit effectuer l'utilisateur pour renseigner l'élément de formulaire : saisie d'une chaîne de caractères, saisie d'un nombre, ...

Afficher valeur vide (Note : Uniquement pour un élément de type Liste de valeurs à choix unique) : Indique si une entrée vide est affichée dans la liste de valeurs (case cochée - l'entrée vide est affichée en première position de la liste) ou non (case non cochée).

Best Practice icon.png  Cochez la case si vous souhaitez laisser à l’utilisateur la possibilité de ne pas sélectionner de valeur. Puis ajoutez un texte explicitant ce choix via le champ Message valeur vide.

Champ dynamique (Note : Uniquement pour un élément de type Champ de saisie, Champ pour mot de passe, Liste de valeurs à choix multiple ou Liste de valeurs à choix unique) : Indique si l’élément de formulaire correspond à un champ dynamique (case cochée - une procédure de calcul est exécutée à chaque changement de valeur du champ, entrainant la réactualisation de la page) ou à un champ statique (case non cochée).

Best Practice icon.png  Rendez un champ dynamique pour réactualiser la page en fonction des critères saisis par l’utilisateur  - open url.png voir Cas d'utilisation

Validation (Note : Uniquement pour un élément de type Champ de saisie, Champ pour mot de passe ou Zone de saisie de texte multiligne) : Options permettant de définir le comportement d'un champ de saisie.

  • Zone de saisie en lecture seule : Le champ ne peut pas être modifié par l'utilisateur.
  • Zone de saisie obligatoire : Une valeur doit obligatoirement être renseignée.
    • Les champs obligatoires sont signalés par un astérisque ( *). 
    • Un message d'erreur bloque le passage à l'étape suivante si le champ n'est pas renseigné.

Ajouter un filtre de validation sur le champ (Note : Uniquement pour un élément de type Champ de saisie, Champ pour mot de passe ou Zone de saisie de texte multiligne) : Permet d’ajouter des conditions de validation sur un champ pour forcer l'utilisateur à respecter un format de saisie  - open url.png voir Procédure 

  • Plusieurs conditions peuvent s'appliquer à un même champ de saisie, qui doivent toutes être respectées.
  • La liste des opérateurs (Égal, Commence par, Contient, ...) est définie par EasyVista. Vous ne pouvez pas en ajouter.
  • Un message d’erreur bloquant peut être défini lorsque la saisie de l'utilisateur ne respecte pas les conditions de validation du filtre.

Onglet Entrées / Sorties

Note : Sauf pour un élément de type Groupe de champs

Permet de gérer les variables d’entrée et de sortie de l’élément de formulaire sélectionné dans le volet Conception, et de mettre à jour les listes de valeurs.

Mode normal

Description Pane - Input output tab.png

Valeur par défaut

  • Pour un élément de type Champ de saisie, Champ pour mot de passe, Zone de saisie de texte multiligne ou Libellé : Valeur affichée par défaut pour l'élément de formulaire.
    • Il peut s'agir d'un texte (option Simple - le texte remplace le libellé de l'élément) ou d'un script (option Expression - le script s'exécute au lancement du formulaire).
  • Pour un élément de type Liste de valeurs à choix multiple ou Liste de valeurs à choix unique : Nombre d'entrées de la liste de valeurs de l'élément de formulaire.

Liste de valeurs fixe (Note : Uniquement pour un élément de type Liste de valeurs à choix multiple ou Liste de valeurs à choix unique) : Nombre d'entrées de la liste de valeurs de l'élément de formulaire.

Variable de librairie liée (Note : Sauf pour un élément de type Libellé) : Nom de la variable de librairie liée à l'élément de formulaire.

  • Une variable de librairie peut être créée en entrée et en sortie.
  • Les noms des variables peuvent être modifiés via le mode avancé.
  • Pour un élément de type Liste de valeurs, il s'agit :
    • d'une variable simple pour une liste de valeurs à choix unique ;
    • d’une table pour une liste de valeurs à choix multiple.

Mode avancé

Description Pane - Input output tab - Advanced mode.png

Valeurs de la liste (Note : Uniquement pour un élément de type Liste de valeurs à choix multiple ou Liste de valeurs à choix unique) : Indique comment sont initialisées les entrées de la liste de valeurs  - Open url.png voir Bonnes pratiques

  • Valeurs de la liste (option par défaut) : Les valeurs sont les entrées de la liste ajoutées lors de la création de l'élément (option Valeurs de la liste).
    • Elles peuvent être mises à jour via Modifier la liste  - Open url.png voir procédure Comment renseigner une liste de valeurs
    • Elles peuvent être exportées dans la librairie du projet Self Help pour les réutiliser dans un autre formulaire du projet.
  • Librairie du projet : Les entrées de la liste sont initialisées avec des variables de la librairie du projet Self Help.
    • Les propriétés de la liste de valeurs peuvent être mises à jour via Modifier
    • Une autre variable de la librairie peut être sélectionnée via Remplacer.
  • Paramètre : Les entrées de la liste sont initialisées avec un paramètre d'entrée.
     

Valeur d'entrée : Indique comment est initialisée la valeur d'entrée associée à l'élément de formulaire.

  • La valeur peut être une variable de la librairie du projet Self Help, un paramètre ou une expression liée à l'élément de formulaire (Valeur fixe).
     

Valeur de sortie (Note : Sauf pour un élément de type Libellé) : Indique comment est stockée la valeur renseignée par l'utilisateur pour l'élément de formulaire.

Procédures

Comment créer un formulaire

Étape 1 : Sélection du projet Self Help

1. Sélectionnez le projet Self Help dans l'arborescence du volet Explorateur.

2. Ouvrez l'arborescence via Tree expand icon.png.

Étape 2 : Création du formulaire

1. Cliquez droit sur le dossier où doit être créé le nouveau formulaire.
          Create new procedure.png

2. 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.
Le volet Explorateur est réactualisé.

Étape 3 : Initialisation de la structure du 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.
             First area form.png

2. Indiquez le nombre de lignes et de colonnes souhaitées pour votre formulaire.

  • Cliquez sur l'espace de travail du volet Conception, en dehors du formulaire.
    L'onglet Propriétés globales est affiché dans le volet Description.
  • Spécifiez le format souhaité.
    Le formulaire est réactualisé.
             Enter form structure.png

3. Vous pouvez ajouter des lignes / colonnes unitairement.

  • Cliquez sur Add icon.png en bas du formulaire pour ajouter une ligne.
  • Cliquez sur Add icon.png à droite du formulaire pour ajouter une colonne.
     

Étape 4 : Conception du formulaire

1. Cliquez sur Add element type icon.png à l'intérieur d'une cellule et sélectionnez dans le menu contextuel le type d'élément à ajouter  - Open url.png voir Description des différents types d'éléments
         Form - Create new element type.png


2. Renseignez l'élément suivant sa nature (liste de valeurs, champ de saisie, ...) et cliquez sur Terminer.

  Open url.png voir Procédures détaillées

3. Répétez les mêmes opérations pour ajouter toutes les cellules du formulaire.

Modification du contenu d'une cellule

  • Cliquez sur la cellule dans le volet Conception.
    Un cadre bleu est affiché.
             Conception Pane - Active field.png
  • Effectuez vos changements via le volet Description  - Open url.png voir Description des propriétés
    Note : Warning icon.png indique que des anomalies sont détectées (titre non renseigné, erreur dans une condition, ...). Survolez l'icône pour afficher le détail dans une bulle d'aide.
             Conception Pane - Field with problem.png

4. Effectuez la mise en page du formulaire.

  Open url.png voir Procédures avancées

Étape 5 : Test du bon affichage du formulaire

1. Insérez le formulaire dans une étape de la procédure.

  • Cliquez-glissez le formulaire du volet Explorateur vers l'étape souhaitée dans le volet Conception.
             Insert form into step - Drag and drop.png

2. Testez le déroulement du formulaire.

  • Cliquez sur Launch procedure dropdown list.png dans la barre d'outils du volet Conception
  • Sélectionnez l'option Launch procedure icon.png Lancer la procédure.
    • L'étape est exécutée. 
    • Le formulaire est ouvert dans votre navigateur internet.
  • Vérifiez le bon comportement du formulaire.

Procédures détaillées

Comment créer un élément de formulaire avec saisie

Éléments de type Champ de saisie, Champ pour mot de passe, Zone de saisie de texte multiligne

Note : L'élément de formulaire est constitué d'un libellé et d'une zone de saisie.

Étape 1 : Création de l'élément de formulaire

1. Cliquez droit sur une cellule vide du formulaire dans le volet Conception.

2. Sélectionnez Ajouter dans le menu contextuel puis cliquez sur le type d'élément à ajouter.
La fenêtre de propriétés est affichée.
         Form - Input area properties.png

3. Saisissez le libellé du champ de saisie.
Note : Ce libellé est celui affiché en mode Exécution du formulaire, qui est visible pour l'utilisateur.

4. Sélectionnez la nature de la zone de saisie de l'élément (chaîne de caractères, nombre, ...).
Note : Vous pouvez la modifier ultérieurement via l'onglet Type et validation du volet Description.

5. Cochez la case Champ obligatoire si l'utilisateur doit obligatoirement renseigner le champ.

Étape 2 (optionnel) : Saisie des paramètres d'entrée et de sortie du champ

1. Sélectionnez l'option Gestion manuelle pour effectuer vous-même la correspondance des paramètres avec des variables déjà existantes dans le projet.

Note : L'option par défaut Depuis la librairie du projet permet de générer automatiquement les paramètres dans la librairie du projet à partir du titre du champ.

exemple  Champ Autres informations ==> Nom des paramètres : Autres_informations

Étape 3 (optionnelle) : Mise en page de l'élément de formulaire

1. Indiquez la largeur d'affichage précise de l'élément (libellé et zone de saisie) dans le champ Taille du champ, en pixels.

2. Sélectionnez l'option Aligner le libellé sur la colonne pour aligner le libellé du champ avec les autres libellés de la colonne. 

3. Indiquez la largeur d'affichage précise du libellé du champ en sélectionnant l'option Taille forcée (taille du texte si vide).
Note : Par défaut, la largeur d'affichage est automatiquement ajustée à la taille du libellé.

Étape 4 : Sauvegarde de l'élément de formulaire

1. Cliquez sur Terminer.

  • Le nouvel élément de formulaire est inséré dans le volet Conception.
  • Le volet Description est affiché.

Étape 5 (optionnelle) : Affinement du comportement et de la mise en page de l'élément de formulaire

1. Apportez les modifications souhaitées au comportement de l'élément (filtres de validation, type de saisie, ...), via les propriétés de l'onglet Type et validation du volet Description.

2. Améliorez la mise en page de l'élément, via les propriétés de l'onglet Affichage du volet Description.

  Open url.png voir Procédures avancées

3. Adaptez les paramètres d'entrée et de sortie de l'élément, via les propriétés de l'onglet Entrées / Sorties du volet Description.

Comment créer une liste de valeurs

Éléments de type Liste de valeurs à choix multiple ou Liste de valeurs à choix unique

Note : L'élément de formulaire est constitué d'un libellé et d'une liste de valeurs.

Étape 1 : Création de l'élément de formulaire

1. Cliquez droit sur une cellule vide du formulaire dans le volet Conception.

2. Sélectionnez Ajouter dans le menu contextuel puis cliquez sur le type d'élément à ajouter.

La fenêtre de propriétés est affichée.
         Form - Value list properties.png

3. Saisissez le libellé de la liste de valeurs.
Note : Ce libellé est celui affiché en mode Exécution du formulaire, qui est visible pour l'utilisateur.

4. Cochez la case Champ obligatoire si l'utilisateur doit obligatoirement sélectionner au moins une valeur dans la liste.

Étape 2 (optionnel) : Saisie des paramètres d'entrée et de sortie du champ

1. Sélectionnez l'option Gestion manuelle pour effectuer vous-même la correspondance des paramètres avec des variables déjà existantes dans le projet.

Note : L'option par défaut Depuis la librairie du projet permet de générer automatiquement les paramètres dans la librairie du projet à partir du titre du champ.

exemple  Champ Autres informations ==> Nom des paramètres : Autres_informations

Étape 3 : Définition des entrées de la liste de valeurs

Saisie manuelle des entrées

1. Cliquez sur Créer la liste.
La fenêtre de saisie des valeurs est affichée.
         Form - Define value list.png

2. Cliquez sur Ajouter libellé.

Note : Par défaut, chaque valeur est associée à une variable de formulaire portant le nom du libellé.
Cliquez sur Ajouter Libellé/Valeur si vous souhaitez nommer vous-même les variables.

3. Saisissez le libellé de la valeur dans la colonne Libellé.
Note : Le libellé est le texte visible pour l'utilisateur, affiché dans la liste. 

4. (optionnel) Saisissez le nom de la variable associée au libellé dans la colonne Valeur.
Note : La valeur n'est pas visible dans la liste.

5. Répétez les mêmes opérations pour chaque entrée de la liste.

6. Cliquez sur Terminer.

Création des entrées à partir de variables projet existantes

1. Cliquez sur Ajouter variable.
La liste des variables de type objet est affichée.

2. Sélectionnez la variable projet à associer à l'entrée de la liste de valeurs.

Étape 4 (optionnelle) : Mise en page de l'élément de formulaire

1. Indiquez la largeur d'affichage précise de l'élément (libellé et liste de valeurs) dans le champ Taille du champ, en pixels.

2. Sélectionnez l'option Aligner le libellé sur la colonne pour aligner le libellé du champ avec les autres libellés de la colonne. 

3. Indiquez la largeur d'affichage précise du libellé du champ en sélectionnant l'option Taille forcée (taille du texte si vide).
Note : Par défaut, la largeur d'affichage est automatiquement ajustée à la taille du libellé.
 

Étape 5 : Sauvegarde de l'élément de formulaire

1. Cliquez sur Terminer.

  • Le nouvel élément de formulaire est inséré dans le volet Conception.
  • Le volet Description est affiché.

Étape 6 (optionnelle) : Affinement du comportement et de la mise en page de l'élément de formulaire

1. Indiquez le mode d'affichage de la liste de valeurs.

  • Allez sur l'onglet Affichage dans le volet Description
  • (Note : Uniquement pour les modes Boutons, Boutons radio et Cases à cocher) Affichez les valeurs sur une même ligne en cochant la case Horizontal.

2. Apportez les modifications souhaitées au comportement de l'élément (valeur vide, champ dynamique, ...), via les propriétés de l'onglet Type et validation du volet Description.

3. Améliorez la mise en page de l'élément, via les propriétés de l'onglet Affichage du volet Description.

  Open url.png voir Procédures avancées

4. Adaptez les paramètres d'entrée et de sortie de l'élément, via les propriétés de l'onglet Entrées / Sorties du volet Description.

Configurer les paramètres d'un formulaire

Procédures avancées

Comment améliorer la mise en page d'un formulaire

Fusionner des cellules pour afficher un élément de formulaire

exemple  Fusion de 2 lignes pour afficher le champ de saisie
Element - Merge cells.png

1. Cliquez sur l'élément de formulaire dans le volet Conception.

2. Allez sur l'onglet Affichage du volet Description.

3. Indiquez le nombre de lignes / colonnes occupées par l'élément dans la section Agencement.

4. Affinez l'affichage via les autres propriétés de la section.

  • Cochez la case Remplir horizontalement si l’élément doit s'afficher sur toute la largeur de la cellule.
  • Cochez la case Remplir verticalement si l’élément doit s'afficher sur toute la hauteur de la cellule.
  • Sélectionnez la position de la zone de libellé par rapport à la zone de saisie.
             Element - Position.png

5. Sauvegardez le formulaire via Save disk icon.png dans la barre d'outils du volet Conception.

Ajuster l'affichage de la zone de libellé et de la zone de saisie d'un élément de formulaire

1. Cliquez sur l'élément de formulaire dans le volet Conception.

2. Allez sur l'onglet Affichage du volet Description.

3. Ajustez la zone de libellé, via les propriétés de la section Libellé.

  • Renseignez la largeur d'affichage de la zone de libellé.

    Best Practice icon.png  Sélectionnez l'option Automatique pour que la largeur de la zone soit ajustée à la taille du libellé.

  • Sélectionnez la position de la zone de libellé par rapport à la zone de saisie.

4. Ajustez l'affichage de la zone de saisie, via les propriétés de la section Zone de saisie.

  • (Note : Uniquement si la case Remplir horizontalement n'est pas cochée) Renseignez la largeur précise d'affichage de la zone de saisie.

    Best Practice icon.png  Sélectionnez l'option Aligner le libellé sur la colonne pour que tous les libellés soient de la même taille dans la liste. (Note : Uniquement si l'option Gauche est sélectionnée pour l'affichage du libellé).

  • Note : Uniquement pour une liste de valeurs
    • Sélectionnez le mode d'affichage de la liste de valeurs via le champ Apparence du sélecteur  - Open url.png voir Description
    • (Note : Uniquement pour les modes Boutons, Boutons radio et Cases à cocher) Cochez la case Horizontal pour afficher les valeurs sur une même ligne.

5. Sauvegardez le formulaire via Save disk icon.png dans la barre d'outils du volet Conception.

Comment ajouter un filtre de validation

Élément de type Champ de saisie, Champ pour mot de passe, Zone de saisie de texte multiligne

Étape 1 : Sélection de l'élément de formulaire

1. Cliquez sur la cellule contenant l'élément de formulaire dans le volet Conception.

Les propriétés de l'élément sont affichées dans le volet Description.

Étape 2 : Saisie du filtre de validation

1. Cliquez sur l'onglet Type et validation dans le volet Description.

2. Cliquez sur le lien Add icon.png Ajouter un filtre de validation sur le champ.

3. Renseignez la première condition du filtre.

  • Sélectionnez l'opérateur dans la liste déroulante.
    Note : Pour saisir une condition bâtie sur une expression régulière, sélectionnez l'opérateur Regexp.
  • Double-cliquez sur la colonne à droite et renseignez la valeur autorisée.
    Note : Les conditions pour les opérateurs E-mail, Téléphone et Code postal français sont prédéfinies. Vous ne pouvez pas saisir de valeur.

4. Renseignez les autres conditions du filtre en répétant les mêmes opérations.

5. (optionnel) Saisissez le message d'erreur à afficher lorsque la saisie de l'utilisateur ne respecte pas les conditions du filtre.

exemple  Champ de saisie d'un identifiant

  • Opérateur Regexp ; Valeur=[a-zA-Z]{4}[0-9]{4}.  ==> La saisie de l'utilisateur doit comporter 4 lettres (minuscules ou majuscules) suivies de 4 chiffres
  • Message d'erreur : Votre identifiant est erroné. Il est composé de 4 lettres (minuscules ou majuscules) suivies de 4 chiffres.

Étape 3 : Test du filtre de validation

1. Sauvegardez le formulaire via Save disk icon.png dans la barre d'outils du volet Conception.

2. Exécutez la procédure contenant le formulaire.

  Open url.png voir Comment afficher un formulaire dans une étape de procédure

3. Saisissez une valeur erronée dans le champ de saisie auquel s'applique le filtre de validation.

4. Vérifiez que les conditions du filtre bloquent la saisie et que le message d'erreur est affiché.

Comment utiliser un formulaire dans une procédure

Comment afficher un formulaire dans une étape de procédure

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-glissez le formulaire du volet Explorateur vers l'étape souhaitée dans le volet Conception.

       Insert form into step - Drag and drop.png

Le formulaire apparaît comme une ressource utilisée par l'étape.
         Insert form into step - Form as resource.png

3. Exécutez la procédure pour tester le bon affichage du formulaire sur l'étape.

Comment utiliser des variables de formulaire dans des étapes de procédure

  Open url.png voir Cas d'utilisation

Note : Les étapes dans lesquelles les données du formulaire sont utilisées doivent être après l'étape dans laquelle le formulaire a été inséré.

Étape 1 : Insertion des variables de formulaire dans une étape

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 dans le volet Conception sur l'étape devant afficher des données du formulaire.
Le contenu de l'étape est affiché dans le volet Description.

3. Insérez du texte dans l'onglet Contenu du volet Description.

4. Cliquez-glissez la variable de formulaire du volet Explorateur vers l'onglet Contenu, après le texte inséré précédemment.
         Insert variable into step - Drag and drop.png

5. Répétez les mêmes actions pour ajouter les autres variables du formulaire.

Étape 2 : Test du bon affichage du formulaire

1. Exécutez la procédure.

2. Répondez aux questions du formulaire.

3. Déroulez la procédure jusqu'à l'étape d'affichage des valeurs du formulaire.

4. Vérifiez le bon affichage de vos réponses.

Cas d'utilisation

Créer un formulaire standard

  Open url.png voir Procédure détaillée

Ce cas d'utilisation utilise un formulaire permettant à un utilisateur de savoir s’il peut bénéficier d’un nouveau smartphone en fonction de ses réponses. L'attribution nécessite d'avoir 2 ans d'ancienneté minimum et de se déplacer fréquemment.

         Example - Standard form.png

Créer un formulaire dynamique

  Open url.png voir Procédure détaillée

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.
         Example - Dynamic form - Two choices.png

Tags:
Modifié par Christine Daussac le 2021/09/22 16:38
Créé par Administrator XWiki le 2020/01/18 12:55

Raccourcis

L'actualité mensuelle
•  Newsletter

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

Powered by XWiki ©, EasyVista 2021