Fields-Form

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

Schéma récapitulatif de l'imbrication des différents types de section d'un SmartForm

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

La table de 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

Le type "textinput"

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

Le type "textarea"

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

Le type "Choices-bloc"

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

Le type "Choices-List"

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

Le type "Choices-modal

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

Le type "fileinput"

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

Un champ de type "dateinput"

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

Une information dynamique, qui ne sera montré à l'utilisateur que s'il rentre un montant de salaire inférieur au SMIC

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

Un exemple de static-html. Notez bien la présence des colonnes vides, qui doivent le l'être pour ne pas causer de dysfonctionnements sur le static-html.

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.

Un champ de type "choices-modal" et multiple choices. Plusieurs pays sont sélectionnés.

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

Exemple de configuration d'un champ choices

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

Créer une choice-list longue

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

La liste de tous les pays du monde.

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

L'étape finale : appeler la liste Choices

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

Le choix !none dans le paramétrage : il s'insère comme un choix classique, mais son identifiant spécifique !none permet au système de lui donner une fonction spéciale

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.

Le placeholder indique '15H30" pour préciser sous quel format l'heure doit être entrée.

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.

Deux champs en colonage grâce aux classes "mid-size nobreak"

Trois champs en colonage grâce aux classes "third-size nobreak"

Aligner le label du champ à droite grâce à right-justified-labels

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 ;

• no-labels : permet de masquer le label et le possible sub-label ;

• top-separator : permet de rajouter une ligne grise (séparateur) au dessus du champ marqué avec cette classe ;

• bottom-separator : semblable à top-separator, cette classe permet de rajouter une ligne grise (séparateur) au dessous du champ marqué avec cette classe ;

• grey-label : permet de forcer la couleur "grise" sur le label du champ, lui donnant une importance secondaire ;

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

Principes de fonctionnement

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 ;

Utilisation

Principe

{NOM_DE_VARIABLE:default(texte par défaut)

Exemple

{PRENOM_ACHETEUR:default([Prénom de l'acheteur])

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/yyyy ou mask: 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.