Sections-Form : Différence entre versions

De YoWiki
Sauter à la navigation Sauter à la recherche
 
(23 révisions intermédiaires par 2 utilisateurs non affichées)
Ligne 1 : Ligne 1 :
 
<h1 id="sections-form">Sections-Form</h1>
 
<h1 id="sections-form">Sections-Form</h1>
−
<h2 id="section-id">Section Id</h2>
+
 
 +
 
 +
[[Fichier:Wiki-sections.png|vignette|right|Schéma récapitulatif de l'imbrication des différents types de section d'un SmartForm |redresse=0.75]]
 +
 +
 
 +
<h2 id="what-is-section">Qu'est ce qu'une section ?</h2>
 +
 
 +
 
 +
Les sections du formulaire servent à organiser son contenu. Il existe 3 types de sections qui permettent d'organiser visuellement vos champs de formulaire : `chapter` , `slide` et `area`.
 +
 
 +
Plusieurs bénéfices à organiser proprement un formulaire dynamique :
 +
 
 +
- Pour les très longs formulaires, il est recommandé de mettre en place des chapitres (section de type "<code>chapter</code>"). Les chapitres sont visuellement indépendants les uns des autres ce qui laisse la possibilité à l'utilisateur de commencer par le chapitre de son choix. Ce découpage permet d'améliorer l'ergonomie et de mieux se repérer lors de la navigation. Le découpage en chapitre n'est pas obligatoire et créer un formulaire d'un seul chapitre est assez courant.
 +
 
 +
- Les sections de type "<code>slide</code>" permettent de découper votre formulaire en plusieurs page/écran. Cette organisation est plus digeste pour les utilisateurs qui peuvent alors répondre étape par étape. Un menu visuel permet de se situer et de connaitre les "slides" passées et à venir lors du remplissage. Autre avantage de ce type de section : le contenu de la page étant sauvegardée lors du passage à la suivante, l'utilisateur pourra revenir plus tard sur son formulaire sans que sa saisie ne soit perdue.
 +
 
 +
- Notez qu'en groupant les champs du formulaire au sein d'une même section, vous pouvez facilement les faire apparaitre ou disparaitre en plaçant une condition (<code>visibleIf</code>) directement sur la section et non plus sur le champ. C'est le principal cas d'usage du type de section "<code>area</code>", qui ne vise qu'à grouper des champs entre eux.
 +
 
 +
 
 +
 
 +
<h2 id="what-is-section">Imbriquer les sections et structurer son formulaire </h2>
 +
 
 +
 
 +
Les sections répondent à une hiérarchie stricte et logique :
 +
 
 +
- Les sections de type <code>"chapter"</code> sont celles de plus haut niveau, et ne peuvent contenir que des sous-sections de type <code>slide</code>.
 +
 
 +
- Les sections de type <code>"slide"</code> peuvent être héritées d'une section <code>chapter</code> ou directement placées à la racine du formulaire. Ces sections correspondent aux pages du formulaire, il y a donc obligatoirement une section de ce type dans le formulaire. Ce type de section contient des sous-sections de type <code>area</code> mais il est possible de directement assigner des champs de saisie à une "slide" pour s'économiser la création d'une <code>"area"</code> inutile (pour information, techniquement, si des champs sont assignés à une "slide" alors une section "area" par défaut sera créée pour les contenir au sein de la page).
 +
 
 +
- Les sections de type <code>"area"</code> sont obligatoirement héritées d'une section de type <code>slide</code>. Ces sections ont deux utilités principales : grouper des champs entre eux pour conditionner facilement leur affichage, ou, enrichir le formulaire avec des contenus au format HTML (voir plus bas rubrique #HTML).
 +
 
 +
<b>À noter :</b> les sections ne peuvent pas être vides. Elles doivent, soit contenir des champs (pour le cas des sections de type <code>slide</code> ou <code>area</code>), soit contenir des sous-sections (pour le cas des sections de type <code>chapter</code> ou <code>slide</code>). ⚠️ Une exception cependant : les section de type <code>area</code> peuvent être vides si un contenu HTML est spécifié (utile pour enrichir le formulaire avec des contenus contextuels conditionnés à d'autres champs).
 +
 
 +
 
 +
 
 +
 
 +
<h2 id="section-params">Paramétrages des sections et attributs</h2>
 +
 
 +
 
 +
Les sections d'un formulaire peuvent être paramétrées via la feuille <code> "Sections-Form "..." </code> du tableur de configuration.
 +
Elles doivent être définies dans l'ordre d'apparition souhaité.
 +
 
 +
 
 +
<h3 id="section-id">Section Id</h3>
 +
 
 
<p>Cette colonne précise le nom de la section (soit un chapitre soit un slide). Il s’agit d’une chaîne alphanumérique sans accent et sans espace. </p>
 
<p>Cette colonne précise le nom de la section (soit un chapitre soit un slide). Il s’agit d’une chaîne alphanumérique sans accent et sans espace. </p>
 
<p>Elle sert de référence à l’intégralité du moteur pour identifier de manière unique les différents chapitres et slides qui apparaîtront dans le formulaire. </p>
 
<p>Elle sert de référence à l’intégralité du moteur pour identifier de manière unique les différents chapitres et slides qui apparaîtront dans le formulaire. </p>
 
<p><strong>Comment identifier un chapitre ?</strong></p>
 
<p><strong>Comment identifier un chapitre ?</strong></p>
 
<p>Chaque chapitre est défini par un identifiant unique. </p>
 
<p>Chaque chapitre est défini par un identifiant unique. </p>
 +
<p>Cet identifiant est défini librement par l'utilisateur, la seule restriction étant qu'il ne peut pas contenir de point <code>.</code></p>
 
<p><strong>Comment identifier une slide ?</strong></p>
 
<p><strong>Comment identifier une slide ?</strong></p>
−
<p>Chaque slide est défini par un identifiant unique. Il est la concaténation de l’identifiant unique du chapitre auquel il appartient ET d’un identifiant unique à cette slide (le tout séparé par un point sans espace).</p>
+
<p>Chaque slide est défini par un identifiant unique.</p>
 +
<p>Il est la concaténation de l’identifiant unique du chapitre auquel il appartient ET d’un identifiant unique à cette slide (le tout séparé par un point sans espace).</p>
 
<p>Le format est donc chapter.slide.</p>
 
<p>Le format est donc chapter.slide.</p>
 
<p><strong>Par exemple :</strong>
 
<p><strong>Par exemple :</strong>
−
[[Fichier:Sections form.png|frame|none]]
+
[[Fichier:Parties.id.png|thumbs|1000px|néant]]
 
</p>
 
</p>
−
<p>Dans cet exemple, la slide “pouvoir&quot; est à l’intérieur du chapter “identification&quot;. Son nom reflète cette appartenance : identification.pouvoir</p>
+
<p>Dans cet exemple, la slide <code>identification</code> est à l’intérieur du chapter <code>parties</code>. Son nom reflète cette hiérarchie : <code>parties.identification</code></p>
−
<h2 id="type-de-section">Type de section</h2>
+
<h3 id="type-de-section">Type de section</h3>
 
<p>Une section peut soit être un chapitre soit un slide. Le premier est ainsi défini par le mot chapter et le second par le mot slide dans ‘Type de section’. </p>
 
<p>Une section peut soit être un chapitre soit un slide. Le premier est ainsi défini par le mot chapter et le second par le mot slide dans ‘Type de section’. </p>
 
<p>Le chapitre est le niveau de catégorie le plus haut du formulaire. Il doit contenir un ou plusieurs slides.</p>
 
<p>Le chapitre est le niveau de catégorie le plus haut du formulaire. Il doit contenir un ou plusieurs slides.</p>
Ligne 20 : Ligne 66 :
 
</p>
 
</p>
 
<p>Exemple d’une Slide, à l’intérieur du Chapter “Informations sur le produit” :
 
<p>Exemple d’une Slide, à l’intérieur du Chapter “Informations sur le produit” :
−
[[Fichier:Une slide.png|frame|none|x{400}px|La slide "au sujet du produit acheté" à l'intérieur du chapter "informations sur le produit"]]
+
[[Fichier:Une slide.png|thumb|none|750px|La slide "au sujet du produit acheté" à l'intérieur du chapter "informations sur le produit"]]
 
</p>
 
</p>
−
<h2 id="titre">Titre</h2>
+
<h3 id="titre">Titre</h3>
 
<p>Le “libellé” : c’est l’intitulé du chapitre ou de la slide.</p>
 
<p>Le “libellé” : c’est l’intitulé du chapitre ou de la slide.</p>
 
<p>Remplir cette colonne est obligatoire.</p>
 
<p>Remplir cette colonne est obligatoire.</p>
−
<h2 id="sous-titre">Sous-Titre</h2>
+
<h3 id="sous-titre">Sous-Titre</h3>
 
<p>Permet de définir un sous-titre, qui apparaîtra en dessous du titre.</p>
 
<p>Permet de définir un sous-titre, qui apparaîtra en dessous du titre.</p>
 
<p>Remplir cette colonne est facultatif.</p>
 
<p>Remplir cette colonne est facultatif.</p>
−
<h2 id="icon">Icon</h2>
+
<h3 id="icon">Icon</h3>
 
<p>Ce champ n’est utilisable que si la section est de type “Chapter”.</p>
 
<p>Ce champ n’est utilisable que si la section est de type “Chapter”.</p>
 
<p>Il a pour but de personnaliser le questionnaire en associant une icône au chapter, pour aboutir à un rendu tel que dans l’exemple ci-dessous.
 
<p>Il a pour but de personnaliser le questionnaire en associant une icône au chapter, pour aboutir à un rendu tel que dans l’exemple ci-dessous.
Ligne 35 : Ligne 81 :
 
<p>Les icônes à gauche de “Votre activité” et “Le Franchiseur” ont été paramétrées grâce au champ “Icon” du fichier de paramétrage.</p>
 
<p>Les icônes à gauche de “Votre activité” et “Le Franchiseur” ont été paramétrées grâce au champ “Icon” du fichier de paramétrage.</p>
 
<p>Pour utiliser une icône, il suffit de remplir le champ “Icon” de la manière suivante :  
 
<p>Pour utiliser une icône, il suffit de remplir le champ “Icon” de la manière suivante :  
−
fa fa-NOMDEL’ICÔNE</p>
+
<code>fa fa-NOMDEL’ICÔNE</code></p>
 
<p>L’icône en question doit être gratuite &amp; disponible sur le site de [https://fontawesome.com/v4.7.0/icons/ FontAwesome].</p>
 
<p>L’icône en question doit être gratuite &amp; disponible sur le site de [https://fontawesome.com/v4.7.0/icons/ FontAwesome].</p>
 
'''Attention : le SmartBundle ne supporte que les icônes fontawesome jusqu'à la version 4.7.0, consultables sur ce [https://fontawesome.com/v4.7.0/icons/ lien]'''
 
'''Attention : le SmartBundle ne supporte que les icônes fontawesome jusqu'à la version 4.7.0, consultables sur ce [https://fontawesome.com/v4.7.0/icons/ lien]'''
Ligne 43 : Ligne 89 :
 
[[Fichier:Flag example.png|frame|none]]
 
[[Fichier:Flag example.png|frame|none]]
 
</p>
 
</p>
−
<p>Guide pas-à-pas : </p>
+
<h3>Guide pas-à-pas : </h3>
 
<ul>
 
<ul>
−
<li>Aller sur [https://fontawesome.com/v4.7.0/icons/ FontAwesome]</li>
+
<li>Aller sur [https://fontawesome.com/v4.7.0/icons/ FontAwesome]
 +
</li>
 
<li>Rechercher son icône</li>
 
<li>Rechercher son icône</li>
 
</ul>
 
</ul>
Ligne 61 : Ligne 108 :
 
</ul>
 
</ul>
 
<p>Pour avoir cette icône de drapeau dans le questionnaire, on remplira donc le champ Icon de la manière suivante :  
 
<p>Pour avoir cette icône de drapeau dans le questionnaire, on remplira donc le champ Icon de la manière suivante :  
−
<strong>fa fa-flag</strong></p>
+
<strong><code>fa fa-flag</code></strong></p>
−
<h2 id="visible-if">Visible if</h2>
+
<h3 id="visible-if">Visible if</h3>
 
<p>Cette colonne permet de définir les conditions d’apparition de la section en question.</p>
 
<p>Cette colonne permet de définir les conditions d’apparition de la section en question.</p>
−
<p>Son fonctionnement est similaire au reste du système : voir le fonctionnement des [[ConditionsVisible ifs
+
<p>Son fonctionnement est similaire au reste du système : voir le fonctionnement des [[Conditions|Visible ifs]]
−
<h2 id="html">HTML</h2>
+
<h3 id="html">HTML</h3>
−
<p>A quoi ça sert ? </p>
+
<p>''Coming Soon''</p>
−
<h2 id="repeater">Repeater</h2>
+
<h3 id="repeater">Repeater</h3>
−
<p><strong>Pour les utilisateurs avancés</strong> Le fonctionnement des repeaters est détaillé [[Repeaters|ici]].</p>
+
<p>Le fonctionnement des repeaters est détaillé [[Repeaters|ici]].</p>
 +
 
 +
 
 +
=== Option "autoaddress" (Google Places) ===
 +
 
 +
L'option "autoaddress", à placer dans la colonne "Options" d'un SectionForm, va permettre à l'utilisateur de pré-remplir les champs relatifs à une adresse depuis un champ de saisie automatique (autocomplete) basé sur les données fournies par Google Places.
 +
 
 +
Côté interface, cette option fera apparaitre un bouton au niveau du titre de la section (area). Au clic sur ce bouton, une fenêtre modale apparait permettant à l'utilisateur de saisir un texte. Lors de la saisie, plusieurs suggestions seront proposées. Une fois qu'une suggestion est sélectionné par l'utilisateur, la fenêtre se referme et les champs du formulaire sont alors pré-remplis avec les données correspondantes à la suggestion choisie.
 +
 
 +
L'utilisation de cette option est possible uniquement sur une section de type '''''area'''''.
 +
 
 +
Cette option est à configurer au format [https://geekflare.com/fr/yaml-introduction/ YAML], c'est à dire sous la forme ''"attribut: valeur"'' et avec des indentations (4 espaces) pour identifier les sous-attributs.
 +
Les sous-attributs sont tous facultatifs et permettent de spécifier quelle valeur doit être injectée dans tel ou tel champ.
 +
Les types de valeurs possibles sont :
 +
:: - <code>street_number</code> : numéro de rue (ex: 31)
 +
:: - <code>route</code> : type et nom de rue (ex: ''Rue du Four'', ou ''Avenue Charles-de-Gaulle'')
 +
:: - <code>plain_address</code> : numéro, type et nom de rue. (ex: ''156, Avenue Charles-de-Gaulle'')
 +
:: - <code>postal_code</code> : code postal (ex: 34700, 75009 …)
 +
:: - <code>locality</code> : commune (ex: Paris, Montpellier…)
 +
:: - <code>country</code> : pays (ex: France)
 +
:: - <code>country_code</code> : code pays, [https://en.wikipedia.org/wiki/List_of_ISO_3166_country_codes en deux lettres, ISO_3166])
 +
:: - <code>administrative_area_level_1</code> : en France, la région (ex: Occitanie)
 +
:: - <code>administrative_area_level_2</code> : en France, le département (ex: Hérault)
 +
 
 +
:: Exemple de configuration : <code>
 +
:::: auto-address:
 +
:::::: plain_address: EMPLOYE_ADRESSE
 +
:::::: locality: EMPLOYE_VILLE
 +
:::::: postal_code: EMPLOYE_CP
 +
:::::: country_code: EMPLOYE_PAYS_CHOICE

Version actuelle datée du 9 mai 2024 à 19:16

Sections-Form


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


Qu'est ce qu'une section ?


Les sections du formulaire servent à organiser son contenu. Il existe 3 types de sections qui permettent d'organiser visuellement vos champs de formulaire : `chapter` , `slide` et `area`.

Plusieurs bénéfices à organiser proprement un formulaire dynamique :

- Pour les très longs formulaires, il est recommandé de mettre en place des chapitres (section de type "chapter"). Les chapitres sont visuellement indépendants les uns des autres ce qui laisse la possibilité à l'utilisateur de commencer par le chapitre de son choix. Ce découpage permet d'améliorer l'ergonomie et de mieux se repérer lors de la navigation. Le découpage en chapitre n'est pas obligatoire et créer un formulaire d'un seul chapitre est assez courant.

- Les sections de type "slide" permettent de découper votre formulaire en plusieurs page/écran. Cette organisation est plus digeste pour les utilisateurs qui peuvent alors répondre étape par étape. Un menu visuel permet de se situer et de connaitre les "slides" passées et à venir lors du remplissage. Autre avantage de ce type de section : le contenu de la page étant sauvegardée lors du passage à la suivante, l'utilisateur pourra revenir plus tard sur son formulaire sans que sa saisie ne soit perdue.

- Notez qu'en groupant les champs du formulaire au sein d'une même section, vous pouvez facilement les faire apparaitre ou disparaitre en plaçant une condition (visibleIf) directement sur la section et non plus sur le champ. C'est le principal cas d'usage du type de section "area", qui ne vise qu'à grouper des champs entre eux.


Imbriquer les sections et structurer son formulaire


Les sections répondent à une hiérarchie stricte et logique :

- Les sections de type "chapter" sont celles de plus haut niveau, et ne peuvent contenir que des sous-sections de type slide.

- Les sections de type "slide" peuvent être héritées d'une section chapter ou directement placées à la racine du formulaire. Ces sections correspondent aux pages du formulaire, il y a donc obligatoirement une section de ce type dans le formulaire. Ce type de section contient des sous-sections de type area mais il est possible de directement assigner des champs de saisie à une "slide" pour s'économiser la création d'une "area" inutile (pour information, techniquement, si des champs sont assignés à une "slide" alors une section "area" par défaut sera créée pour les contenir au sein de la page).

- Les sections de type "area" sont obligatoirement héritées d'une section de type slide. Ces sections ont deux utilités principales : grouper des champs entre eux pour conditionner facilement leur affichage, ou, enrichir le formulaire avec des contenus au format HTML (voir plus bas rubrique #HTML).

À noter : les sections ne peuvent pas être vides. Elles doivent, soit contenir des champs (pour le cas des sections de type slide ou area), soit contenir des sous-sections (pour le cas des sections de type chapter ou slide). ⚠️ Une exception cependant : les section de type area peuvent être vides si un contenu HTML est spécifié (utile pour enrichir le formulaire avec des contenus contextuels conditionnés à d'autres champs).



Paramétrages des sections et attributs


Les sections d'un formulaire peuvent être paramétrées via la feuille "Sections-Form "..." du tableur de configuration. Elles doivent être définies dans l'ordre d'apparition souhaité.


Section Id

Cette colonne précise le nom de la section (soit un chapitre soit un slide). Il s’agit d’une chaîne alphanumérique sans accent et sans espace.

Elle sert de référence à l’intégralité du moteur pour identifier de manière unique les différents chapitres et slides qui apparaîtront dans le formulaire.

Comment identifier un chapitre ?

Chaque chapitre est défini par un identifiant unique.

Cet identifiant est défini librement par l'utilisateur, la seule restriction étant qu'il ne peut pas contenir de point .

Comment identifier une slide ?

Chaque slide est défini par un identifiant unique.

Il est la concaténation de l’identifiant unique du chapitre auquel il appartient ET d’un identifiant unique à cette slide (le tout séparé par un point sans espace).

Le format est donc chapter.slide.

Par exemple :

thumbs

Dans cet exemple, la slide identification est à l’intérieur du chapter parties. Son nom reflète cette hiérarchie : parties.identification

Type de section

Une section peut soit être un chapitre soit un slide. Le premier est ainsi défini par le mot chapter et le second par le mot slide dans ‘Type de section’.

Le chapitre est le niveau de catégorie le plus haut du formulaire. Il doit contenir un ou plusieurs slides.

Le slide est le second niveau de catégorie le plus haut du formulaire. Il doit contenir un ou plusieurs champs.

Exemple de Chapitres :

Exemple de chapter

Exemple d’une Slide, à l’intérieur du Chapter “Informations sur le produit” :

La slide "au sujet du produit acheté" à l'intérieur du chapter "informations sur le produit"

Titre

Le “libellé” : c’est l’intitulé du chapitre ou de la slide.

Remplir cette colonne est obligatoire.

Sous-Titre

Permet de définir un sous-titre, qui apparaîtra en dessous du titre.

Remplir cette colonne est facultatif.

Icon

Ce champ n’est utilisable que si la section est de type “Chapter”.

Il a pour but de personnaliser le questionnaire en associant une icône au chapter, pour aboutir à un rendu tel que dans l’exemple ci-dessous.

Exemple d'icônes paramétrées via le champ "Icon"

Les icônes à gauche de “Votre activité” et “Le Franchiseur” ont été paramétrées grâce au champ “Icon” du fichier de paramétrage.

Pour utiliser une icône, il suffit de remplir le champ “Icon” de la manière suivante : fa fa-NOMDEL’ICÔNE

L’icône en question doit être gratuite & disponible sur le site de FontAwesome.

Attention : le SmartBundle ne supporte que les icônes fontawesome jusqu'à la version 4.7.0, consultables sur ce lien

Le “NOMDEL’ICÔNE” est la chaîne de caractères utilisée par FontAwesome. Exemple :

Flag example.png

Guide pas-à-pas :

Rechercher son icône

  • Copier l’identifiant de l’icône

Par exemple :

Flag example.png

Ici, l’identifiant de cette icône de drapeau est “flag”.

  • Remplir le champ dans le fichier de paramétrage

Pour avoir cette icône de drapeau dans le questionnaire, on remplira donc le champ Icon de la manière suivante : fa fa-flag

Visible if

Cette colonne permet de définir les conditions d’apparition de la section en question.

Son fonctionnement est similaire au reste du système : voir le fonctionnement des Visible ifs

HTML

Coming Soon

Repeater

Le fonctionnement des repeaters est détaillé ici.


Option "autoaddress" (Google Places)

L'option "autoaddress", à placer dans la colonne "Options" d'un SectionForm, va permettre à l'utilisateur de pré-remplir les champs relatifs à une adresse depuis un champ de saisie automatique (autocomplete) basé sur les données fournies par Google Places.

Côté interface, cette option fera apparaitre un bouton au niveau du titre de la section (area). Au clic sur ce bouton, une fenêtre modale apparait permettant à l'utilisateur de saisir un texte. Lors de la saisie, plusieurs suggestions seront proposées. Une fois qu'une suggestion est sélectionné par l'utilisateur, la fenêtre se referme et les champs du formulaire sont alors pré-remplis avec les données correspondantes à la suggestion choisie.

L'utilisation de cette option est possible uniquement sur une section de type area.

Cette option est à configurer au format YAML, c'est à dire sous la forme "attribut: valeur" et avec des indentations (4 espaces) pour identifier les sous-attributs. Les sous-attributs sont tous facultatifs et permettent de spécifier quelle valeur doit être injectée dans tel ou tel champ. Les types de valeurs possibles sont :

- street_number : numéro de rue (ex: 31)
- route : type et nom de rue (ex: Rue du Four, ou Avenue Charles-de-Gaulle)
- plain_address : numéro, type et nom de rue. (ex: 156, Avenue Charles-de-Gaulle)
- postal_code : code postal (ex: 34700, 75009 …)
- locality : commune (ex: Paris, Montpellier…)
- country : pays (ex: France)
- country_code : code pays, en deux lettres, ISO_3166)
- administrative_area_level_1 : en France, la région (ex: Occitanie)
- administrative_area_level_2 : en France, le département (ex: Hérault)
Exemple de configuration :
auto-address:
plain_address: EMPLOYE_ADRESSE
locality: EMPLOYE_VILLE
postal_code: EMPLOYE_CP
country_code: EMPLOYE_PAYS_CHOICE
Récupérée de « https://wiki.hercule.co/index.php?title=Sections-Form&oldid=1187 »