Fields-Form : Différence entre versions
| Ligne 188 : | Ligne 188 : | ||
<p> Ainsi, deux champs qui se suivent et qui ont tous les deux la spécificité <code>mid-size nobreak</code> se retrouveront collés l'un à l'autre</p> | <p> Ainsi, deux champs qui se suivent et qui ont tous les deux la spécificité <code>mid-size nobreak</code> se retrouveront collés l'un à l'autre</p> | ||
[[Fichier:Capture d’écran 2020-07-29 à 17.16.12.png|650px|thumb|néant|Deux questions successives, toutes deux affectées par un mid-size nobreak]] | [[Fichier:Capture d’écran 2020-07-29 à 17.16.12.png|650px|thumb|néant|Deux questions successives, toutes deux affectées par un mid-size nobreak]] | ||
| + | <h4 id="mid-size-break">Mid-size break</h4> | ||
| + | <p> La colonne blockclasses peut recevoir l'instruction <code>mid-size break</code>, qui permet de diviser par deux la taille prise par un champ tout en revenant à la ligne pour le champ d'après..</p> | ||
| + | <p> Par contre, grâce à l'instruction <code>break</code>, deux champs qui se suivent et qui ont tous les deux la spécificité <code>mid-size break</code> ne se retrouveront pas collés l'un à l'autre</p> | ||
<h4 id="third-size">Third-size nobreak</h4> | <h4 id="third-size">Third-size nobreak</h4> | ||
<p> La colonne blockclasses peut recevoir l'instruction <code>third-size nobreak</code>, qui permet de diviser par trois la taille prise par un champ.</p> | <p> La colonne blockclasses peut recevoir l'instruction <code>third-size nobreak</code>, qui permet de diviser par trois la taille prise par un champ.</p> | ||
<p> Ainsi, trois champs qui se suivent et qui ont tous les trois la spécificité <code>third-size nobreak</code> se retrouveront collés l'un à l'autre</p> | <p> Ainsi, trois champs qui se suivent et qui ont tous les trois la spécificité <code>third-size nobreak</code> se retrouveront collés l'un à l'autre</p> | ||
| + | [[Fichier:Capture d’écran 2020-07-29 à 17.23.16.png|thumb|650px|néant|Trois questions successives, toutes trois affectées par un third-size nobreak]] | ||
| + | <h4 id="third-size-break">Third-size break</h4> | ||
| + | <p> La colonne blockclasses peut recevoir l'instruction <code>third-size break</code>, qui permet de diviser par trois la taille prise par un champ tout en revenant à la ligne pour le champ d'après.</p> | ||
| + | <p> Ainsi, trois champs qui se suivent et qui ont tous les trois la spécificité <code>third-size break</code> ne se retrouveront pas collés l'un à l'autre</p> | ||
[[Fichier:Capture d’écran 2020-07-29 à 17.23.16.png|thumb|650px|néant|Trois questions successives, toutes trois affectées par un third-size nobreak]] | [[Fichier:Capture d’écran 2020-07-29 à 17.23.16.png|thumb|650px|néant|Trois questions successives, toutes trois affectées par un third-size nobreak]] | ||
<h3 id="alignementchamp">Alignement d'un champ</h3> | <h3 id="alignementchamp">Alignement d'un champ</h3> | ||
Version du 15 octobre 2020 à 13:19
Sommaire
- 1 Fields-Form
- 1.1 Section ID
- 1.2 Var ID
- 1.3 Type
- 1.4 Multiple-choices
- 1.5 Required
- 1.6 Label
- 1.7 SubLabel
- 1.8 Choices
- 1.9 Info
- 1.10 Placeholder
- 1.11 Help
- 1.12 Visible if
- 1.13 Fieldclasses
- 1.14 Icon
- 1.15 Autonext
- 1.16 Blockclasses
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
Nombres
numberinput :
l'utilisateur doit rentrer un nombre, 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
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
Remplir cette colonne est obligatoire.
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.
Fieldclasses
Coming Soon
Icon
Coming Soon
Autonext
Le mode autonext peut être activé sur les champs “choices” et lorsque la colonne multi-select a été définie en “N”.
Si Autonext est à Y (yes), au choix de la réponse, le curseur de l’utilisateur passe directement au champ suivant.
Si il n’y a pas de champ après cette question (fin du formulaire, de la section, ou autre), alors la section est automatiquement soumise, c’est-à-dire confirmée et transmise au système.
Blockclasses
Réduction de la taille des champs
Mid-size nobreak
La colonne blockclasses peut recevoir l'instruction mid-size nobreak, qui permet de diviser par deux la taille prise par un champ.
Ainsi, deux champs qui se suivent et qui ont tous les deux la spécificité mid-size nobreak se retrouveront collés l'un à l'autre
Mid-size break
La colonne blockclasses peut recevoir l'instruction mid-size break, qui permet de diviser par deux la taille prise par un champ tout en revenant à la ligne pour le champ d'après..
Par contre, grâce à l'instruction break, deux champs qui se suivent et qui ont tous les deux la spécificité mid-size break ne se retrouveront pas collés l'un à l'autre
Third-size nobreak
La colonne blockclasses peut recevoir l'instruction third-size nobreak, qui permet de diviser par trois la taille prise par un champ.
Ainsi, trois champs qui se suivent et qui ont tous les trois la spécificité third-size nobreak se retrouveront collés l'un à l'autre
Third-size break
La colonne blockclasses peut recevoir l'instruction third-size break, qui permet de diviser par trois la taille prise par un champ tout en revenant à la ligne pour le champ d'après.
Ainsi, trois champs qui se suivent et qui ont tous les trois la spécificité third-size break ne se retrouveront pas collés l'un à l'autre
Alignement d'un champ
left-sided-labels permet d'aligner le champ à droite, avec son label qui restera à gauche du questionnaire
Alignement d'un label
right-justified-labels permet d'aligner le label à droite.
Il est possible de combiner cela avec l'instruction left-sided-labels
Cumul de blockclasses
Un même champ peut subir plusieurs traitements dans sa colonne blockclasses, il suffit de séparer les différents traitements d'un espace
