Fields-Form : Différence entre versions
m (→Options) |
|||
| Ligne 111 : | Ligne 111 : | ||
<p><strong>necessary :</strong> l’utilisateur peut ne pas répondre à la question, mais cette absence de réponse est prise en compte pour déterminer la complétion du questionnaire.</p> | <p><strong>necessary :</strong> l’utilisateur peut ne pas répondre à la question, mais cette absence de réponse est prise en compte pour déterminer la complétion du questionnaire.</p> | ||
<p><strong>mandatory :</strong> l’utilisateur est obligé de répondre à la question pour pouvoir passer à la suite du formulaire</p></p> | <p><strong>mandatory :</strong> l’utilisateur est obligé de répondre à la question pour pouvoir passer à la suite du formulaire</p></p> | ||
| − | |||
<h2 id="label">Label</h2> | <h2 id="label">Label</h2> | ||
<p>Le “libellé” : c’est l’intitulé de la question qui sera posée à l’utilisateur.</p> | <p>Le “libellé” : c’est l’intitulé de la question qui sera posée à l’utilisateur.</p> | ||
Version du 10 juin 2021 à 09:16
Sommaire
Fields-Form
Le Fields-Form permet de mettre au point un questionnaire intelligent.
Celui-ci peut varier dynamiquement en fonction des réponses apportées par l’utilisateur.
Les réponses apportées par l’utilisateur pourront aussi servir à façonner les documents produits par le système, où à en déterminer l’existence même.
Section ID
Il s’agit ici de relier la question qui sera posée à l’utilisateur à la slide correspondante : voir ici
Remplir cette colonne est obligatoire : chaque question doit impérativement être reliée à une slide.
Var ID
Le système requiert que la réponse donnée par l’utilisateur lors du remplissage du formulaire soit stockée dans une variable.
Cette dernière doit au préalable être déclarée dans le DataStore.
Type
Le type de variable conditionne le format par lequel l’utilisateur final répondra au questionnaire.
On choisira donc un type de variable plutôt qu’un autre en fonction de la réponse qu’on attend de l’utilisateur final.
A noter : ce type doit être impérativement compatible avec le type renseigné dans la feuille “DataStore”. On peut se reporter au tableau ci-dessous pour s'assurer de la compatibilité.
Les types de variables sont :
- textinput
- textarea
- choices-bloc
- choices-list
- choices-modal
- fileinput
- numberinput
- dateinput
En détail :
Textes
textinput :
propose un champ de texte “simple” à l’utilisateur → le nombre de caractères que peut contenir la réponse est illimité, le format de réponse invite toutefois l’utilisateur à une réponse courte
textarea :
propose un champ de texte “‘élargi” à l’utilisateur → le nombre de caractères que peut contenir la réponse est illimité, le format de réponse invite toutefois l’utilisateur à une réponse plutôt longue
Choix
Les types “choices” permettent tous de proposer des choix à l’utilisateur pour qu’il réponde à la question posée. Ce qui diffère entre les “choices” est d’ordre graphique et ergonomique :
choices-bloc :
les choix apparaissent sous forme de blocs rectangulaires cliquables
Conseil d'utilisation : utiliser ce type lorsqu'il y a peu de choix à proposer à l'utilisateur, c'est-à-dire 2 ou 3 choix.
choices-list :
les choix apparaissent sous forme de boutons radios
Conseil d'utilisation : utiliser ce type lorsqu'il y a quelques choix à proposer à l'utilisateur.
choices-modal :
Les choix apparaissent dans une fenêtre modale (pop-in)
La fenêtre modale permet en plus à l'utilisateur de rechercher une valeur
Conseil d'utilisation : Ce champ est recommandé pour les listes de grande taille (ex : liste de tous les pays, liste des villes d’immatriculation au RCS, liste des greffes de TC, etc ...)
À noter :
Pour une question de type “choices”, on peut facultativement remplir le champ multiple-choices, dont le fonctionnement est détaillé après.
Le champ “Choices” doit en revanche être obligatoirement rempli.
Upload
fileinput :
l’utilisateur est invité à téléverser un fichier
Saisie numérique
numberinput :
Ce champ permet à l'utilisateur de saisir une valeur numérique, qui sera formatée comme telle (séparateurs des milliers, virgule etc.).
Il est préférable que la variable associée à ce champ soit du type "numeric". De ce fait, lors de l'enregistrement du champ, une erreur sera affichée si la valeur ne correspond pas à ce qui est attendu par le Datastore (ex: si vous saisissez `trois` au lieu de `3`, ou `une bière` au lieu de `1,5` ...).
Dates
dateinput :
l’utilisateur doit rentrer une date, le système refusera tout autre type de réponse et empêchera l’utilisateur de continuer à remplir le questionnaire si autre chose est rentré dans le champ de réponse
Affichage de texte
static-html :
Introduction
Le champ static-html permet de montrer à l'utilisateur une information, sans lui demander de rentrer une information.
Par exemple : une information dynamique, qui ne sera montré à l'utilisateur que s'il rentre un montant de salaire inférieur au SMIC
Instructions de paramétrage
Instructions générales
Par rapport aux autres champs, le paramétrage d'un static-html recèle quelques spécificités.
Tout d'abord, la colonne "Var id" ne doit pas être renseigné.
En conséquence, les colonnes Multiple-choices, required, ne doivent pas être remplies non plus.
La colonne Visible If peut être utilisée comme d'habitude pour déclencher le champ static-html de manière dynamique.
La colonne Label doit contenir du code HTML.
La colonne Label peut contenir des variables et des dynvars, utilisées entre accolades { }.
Code HTML à copier/coller pour créer vos zones d'alertes
Cliquez ici pour accéder à notre banque de codes HTML à copier/coller
À noter : la plupart des codes HTML ne fonctionnent que sur YOProcess. YoLab n'est pas encore capable de les montrer.
Multiple-choices
Ce champ ne peut être rempli que dans le cas où la variable est de type “choices”
Si un Y est rentré dans le champ, l’utilisateur peut cumuler les choix mis à sa disposition.
Si un N est rentré dans le champ, l’utilisateur ne peut choisir qu’un seul choix parmi ceux mis à sa disposition. → c’est aussi le comportement par défaut si le champ est laissé vide.
À noter :
La variable qui doit recevoir un Multiple-choices doit être de type List
Si on souhaite baser un Visible If à partir d'une variable Multiple-choices, la syntaxe à utiliser est le contains
Required
3 valeurs sont autorisés pour ce champ :
optional : l’utilisateur peut ne pas répondre à la question, sans aucune conséquence
necessary : l’utilisateur peut ne pas répondre à la question, mais cette absence de réponse est prise en compte pour déterminer la complétion du questionnaire.
mandatory : l’utilisateur est obligé de répondre à la question pour pouvoir passer à la suite du formulaire
Label
Le “libellé” : c’est l’intitulé de la question qui sera posée à l’utilisateur.
Remplir cette colonne est obligatoire.
SubLabel
Information complémentaire du libellé (écrite juste en dessous) et facultative.
Choices
Il est obligatoire de remplir cette colonne si la variable est de type “choices”.
Cette colonne permet de définir les choix qui seront proposés à l’utilisateur lors du questionnaire.
Il y a deux méthodes pour définir les choix proposés à l’utilisateur :
Méthode 1 : “classique”
Remplir directement la colonne en suivant précisément le format suivant :
chx1: Choix1;
chx2: Choix2;
chx3: Choix3;
Le premier segment de caractères ne sera jamais vu par l’utilisateur final : il s’agit simplement de la valeur enregistrée dans le système (dans la machine) lorsque l’utilisateur choisit cette réponse. → cette valeur doit d’ailleurs correspondre à ce qui est enregistré dans le DataStore, dans la colonne “contrôle d’intégrité”
Le second segment de caractères est celui qui sera vu par l’utilisateur final et sur lequel il pourra cliquer pour faire son choix.
Méthode 2 : “feuille dédiée” (méthode Choice-List)
Dans les cas où la liste des choix est longue, il est plus simple de les organiser dans un tableau Excel et d’indiquer dans la colonne “Choices” qu’on souhaite faire appel à ce tableau.
Comment faire ?
Création & remplissage d’une nouvelle feuille dans le fichier de paramétrage
Il faut créer une nouvelle feuille au sein du fichier de paramétrage, dont le nom sera formé de la manière suivante : Choice-List “NomDuTableau”, où NomDuTableau est à remplacer par le nom qu’on souhaite donner à cette feuille.
Par exemple
La feuille doit être divisé en deux colonnes : Value & Label
La colonne Label correspond au choix qui sera vu par l’utilisateur.
La colonne Value correspond à ce qui sera effectivement enregistré par la machine : ce sont donc les valeurs de cette colonne qui devront être utilisées pour mettre au point d’éventuels Visible Ifs.
Par exemple : liste de pays
Astuce : effectuer une recherche sur n'importe quel moteur de recherche en spécifiant : "Le nom de la liste recherchée" + "CSV", pour récupérer des listes déjà faites dans divers domaines. Par exemple, pour trouver une liste de nationalités
Appel de cette feuille à partir de la colonne “choices”
Pour indiquer au système que l’ensemble des choix doit se baser sur la feuille précédemment créé, il suffit de remplir la colonne choices de la manière suivante : @source: NomDuTableau.
Par exemple : pour faire appel à la liste de pays
Choix spécifiques
Le choix !none
!none est un choix spécifique qui peut être prévu dans la colonne Choices lorsque la variable est multiple-choices
Si l'utilisateur coche le choix associé à !none, tous les autres choix de la liste se décocheront automatiquement
Info
Colonne sans utilité pour le moment
Placeholder
Cette colonne permet de définir un placeholder.
Un placeholder est une réponse présente dans un champ de manière "factice" : dès que l'utilisateur aura commencé à remplir le champ, le placeholder disparaîtra
Remplir cette colonne est facultatif et ne peut être remplie que si le type de la variable est : textinput, textarea, numberinput, dateinput, ou choices-modal.
Help
Cette colonne permet de définir un texte additionnel d'aide, qui apparaîtra en dessous du champ de saisie
On l'utilise généralement pour préciser des informations sur la saisie à proprement parler : nombre de caractères maximum ou minimum, nombre minimum, etc ...
Si ces contrôles d'intégrité affectent ce champ, il est fortement recommandé de le préciser ici.
Remplir cette colonne est facultatif.
Visible if
Le champ Visible if permet de conditionner l’apparition d’une question.
Son fonctionnement est similaire au reste du système et est décrit sur cette page.
Options
Selon son type, le champ peut aussi être configuré / personnalisé suivant certaines "options". La colonne "Options" du tableur est au format YAML, c'est à dire sous la forme "attribut: valeur", avec des indentations (4 espaces) pour identifier une série de sous-attributs.
Blockclasses
L'option "blockclasses" permet d'indiquer une liste de classes CSS à appliquer sur le container du champ. Les classes CSS sont utiles pour paramétrer le style d'un élément HTML. YoProcess prédéfini certaines classes CSS afin de permettre les transformations les plus courantes sur les champs du formulaires.
Notez que les classes sont cumulatives, il suffit de les séparer par un simple espace.
Voici une liste de classes qui peuvent être utilisées en tant que blockclasses (liste non-exhaustives) :
- mid-size : permet de réduire la taille d'un champ à la moitié de l'espace alloué (lui applique un ratio de 50%) ;
- third-size : permet de réduire la taille d'un champ au tiers de l'espace alloué (lui applique un ratio de 33%) ;
- nobreak : permet d'indiquer que le champ suivant peut venir s'enchainer (colonage) à la suite du champ courant. Cette classe est généralement utilisée de paire avec mide-size (ou third-size) afin de placer plusieurs champs sur la même ligne. Bien entendu, les champs apparaitront sur la même ligne s'ils en ont la place.
- left-sided-labels : permet de faire en sorte que le label sera placé à gauche du champ (au lieu d'être au dessus, position par défaut).
- right-justified-labels : permet de justifié le libellée du champ à droite au lieu de la justification par défaut à gauche ;
Fieldclasses
Fonctionne de la même façon que l'option "blockclasses" mais les classes précisées ici ne vont s'appliquer que sur l'élément de saisie et non pas sont conteneur.
Voici une liste de classes qui peuvent être utilisées en tant que fieldclasses (liste non-exhaustives) :
- disabled : permet de désactiver graphiquement le champ ;
- text-center : permet de centrer tous les textes du champ (libellé, contenu, sous-texte …) ;
- à compléter
Autonext
L'option "autonext" permet de déclencher automatiquement le bouton "Enregistrer et Continuer" (en bas à droite de chaque slide) dés lors que le dernier champ de choix de la page vient d'être complété. Cette option est surtout utile pour les formulaires dont les slides ne contiennent que des champs "choices-list" ou "choices-block", sans choix multiples. En effet, avec d'autres types de champ, le système ne peut pas détecter que l'utilisateur a "terminé" sa saisie et forcer automatiquement le passage à la page suivante, cela n'est envisageable qu'avec des champs de choix direct.
Cette option prend pour valeur "Y" ou "N". Ex : autonext: Y.
Api (injection)
Cette option "api" permet d'intégrer sur le champ en question un "bouton d'appel API". Ce bouton peut déclencher une requête (via des API), à partir de ce qui a été saisie dans le champ, et afin de récupérer des informations complémentaires et de les injecter dans d'autres champs présents sur la page.
De part son format, cette option n'est accessible que sur les champs de saisie du SmartForm (text-input, number-input, date-input…).
Cette option est à configurer au format au format YAML, c'est à dire sous la forme "attribut: valeur" et avec des indentations (4 espaces) pour identifier les séries de sous-attributs.
🔗 Les détails de cette configuration sont accessible sur la page dédiée : SmartForm - Injection depuis une API.
Default
L'option "default" fonctionne sur les champs de type de saisie (text-input, number-input …). Elle permet de spécifier une valeur à insérer automatiquement dans le champ, au chargement de la page, dés lors que le champ est "vide". La valeur par défaut ne doit pas être confondue avec le "placeholder" (qui sert juste à afficher un texte informatif au sein du champ quand il est vide). Avec cette valeur par défaut, et si elle n'est pas modifiée par l'utilisateur lors de la saisie de la Slide, alors elle sera enregistrée telle-quelle dans le Dataset dés lors que l'utilisateur validera la Slide. À partir du moment où est elle enregistrée, le champ n'est plus "vide" et la valeur affichée est sa valeur réelle et non plus la valeur injectée par défaut.
Attention : un champ avec une valeur par défaut continue d'être vide/incomplet du point de vue de la base de données (Dataset). Cela peut être trompeur, par exemple, slide qui ne contient que des champs pré-remplis pourra sembler complète alors qu’elle ne l’ai pas du point de vue du Dataset et l'utilisateur peut avoir du mal à comprendre "pourquoi" on lui dit que le formulaire n'est pas complet. De même, le formulaire doit éviter de faire soudainement apparaitre un champ pré-rempli avec une valeur par défaut car si tel est le cas, il peut être difficile pour l’utilisateur de retrouver quel est le champ “vide” (= pourcentage de complétion VS ce que l’on voit sur la slide). Ou encore, notez que les visibleIf au sein de la slide doivent tenir compte du fait que s’ils parlent d’une variable “pré-remplie par défaut” sa valeur est considérée comme “vide” dans les SmartExpression tant qu’elle n’est pas sauvegardée ;
Mask (masque de saisie)
L'option "mask" fonctionne sur les champs de type de saisie (text-input, date-input …), le format de cette option est définie par la documentation de iMask.js.
Exemple pour un code postal : mask: 00 000
Quelques formats prédéfinis :
mask: dd/mm/yyyyoumask: date: permet de forcer un format / masque de date (jj/mm/aaaa).
mask: hh:mm: permet de forcer un format horaire (hh:mm) dans un champ text-input.
mask: number: permet de forcer un format numérique, avec un séparateur de milliers, des virgules, etc. (ce masque est appliqué par défaut sur les champs number-input.
