Aller au contenu principal

Studio de modèle de formulaire : détails

Thibault Bédouret
Mise à jour

Sommaire

Introduction

Ce studio est une éditeur de modèles de formulaires. Ces modèles de formulaires peuvent ensuite être remplis et soumis via l'appli mobile Ubleam ou via Fusion.

Le studio de formulaires dispose de nombreux composants et d'un système d'internationalisation qui peut s'adapter :

  • Dans le cas où le formulaire est utilisé sur mobile : la langue paramétrée dans le téléphone
  • Dans le cas où le formulaire est utilisé dans Fusion : la langue paramétrée dans Fusion

 

Opérations sur modèles de formulaire

Dans cette partie, nous allons voir les différentes opérations disponibles sur des modèles de formulaire, depuis l'icône Formulaires dans le menu vertical de Fusion

mceclip2.png

Créer un nouveau modèle de formulaire

  • Cliquer sur le bouton Créer un nouveau modèle de formulaire

mceclip0.png

Le studio de formulaire s'ouvrira alors.

Voir l'aperçu d'un modèle de formulaire existant

Au sein de la liste des modèles de formulaires :

  • Cliquer sur les trois petits points situés en haut à droite d'un modèle existant
  • Dans le menu déroulant, cliquer sur l'œil

mceclip1.png

  • Le modèle de formulaire apparaîtra alors sous la forme d'une pop-in, format longiligne comme sur l'appli mobile

mceclip2.png

Supprimer un modèle de formulaire

Au sein de la liste des modèles de formulaires :

  • Cliquer sur les trois petits points situés en haut à droite d'un modèle existant
  • Dans le menu déroulant, cliquer sur la corbeille

mceclip3.png

Une pop-in de confirmation s'affichera alors.

Éditer un modèle de formulaire

Au sein de la liste des modèles de formulaires :

  • Cliquer sur les trois petits points situés en haut à droite d'un modèle existant
  • Dans le menu déroulant, cliquer sur le crayon

mceclip4.png

Le studio de formulaire s'ouvrira, avec les données du modèle sélectionné.

 

Studio de modèle de formulaire

Le studio de formulaire se partage en 3 parties :

  • À gauche : le sélecteur de composants
  • Au centre : L'aperçu du modèle de formulaire en cour de création
  • À droite : les propriétés
    • Propriétés du modèle de formulaire en lui-même sous l'onglet
      mceclip5.png
    • Propriétés du composant sélectionné sous l'onglet
      mceclip6.png

Menu de droite : onglet Général, informations du modèle de formulaire

L'onglet Général offre l'accès à la configuration des informations générales du modèle.

mceclip5.png

mceclip7.png

  • Nom du modèle de formulaire : Nom technique du modèle de formulaire. Il n'est pas visible par l'utilisateur final sur mobile, mais sera visible dans Fusion. Champ obligatoire
  • Titres du modèle de formulaire : Titre traduit, visible par l'utilisateur, du modèle de formulaire. Champ obligatoire
    • Langue : Langue qui s'applique à ce titre. S'adapte à la langue paramétrée sur le mobile de l'utilisateur
    • Titre : Titre à afficher selon la langue sélectionnée
  • Labels : Attribue un label au modèle de formulaire. Le label est utilisé par la fonctionnalité "Carnet de bord"

Menu de gauche : les différents composants

Les composants du modèle rassemblent tous les éléments constitutifs de son contenu. Un grand choix de types de composants est disponible.

 

Affichage

Ces composants sont des éléments purement indicatif, en lecture seule.

Séparateur

  • Fonctionne comme un intercalaire, pouvant être utilisé à titrer une nouvelle partie.

mceclip1.png

Texte

  • Texte fixe, indépendant de tout contexte.

mceclip2.png

Image

  • Image fixe récupérée à partir d'un URL.

mceclip3.png

 

Saisie simple

Les composants de saisie simple peuvent aussi bien être en écriture et lecture, comme en lecture seule. Certains d'entre eux peuvent comporter des éléments de contexte.

Texte

  • Entrée textuelle. Peut afficher un texte par défaut pouvant être lié à un contexte.

mceclip4.png

Numérique

  • Entrée numérique avec possibilité de mettre des bornes minimale et maximale. Peut afficher un nombre par défaut.

mceclip5.png

Case à cocher

  • Bloc de simple coche binaire.

mceclip6.png

Liste déroulante

  • Menu déroulant avec une option sélectionnable parmi plusieurs, avec possibilité d'en mettre une par défaut.

mceclip6.png

Multi-liste

  • Listes déroulantes conditionnées, créées via un fichier .csv importé.

mceclip7.png

Date

  • Sélecteur de date, d'heure ou de date+heure. Peut afficher une valeur par défaut.

mceclip8.png

Image

  • Sélecteur d'image. La source et le nombre d'images peuvent être paramétrée.

mceclip9.png

 

Saisie avancée

Les composants de saisie avancée peuvent aussi bien être en écriture et lecture, comme en lecture seule. Ils sont d'une complexité supérieure aux composants de saisie simple.

Signature

  • Bloc d'apposition de signature.

mceclip11.png

Code-barres

  • Scan de code-barres avec possibilité de saisir manuellement un code.

mceclip12.png

 

Menu de droite : onglet Propriétés, paramètres des composants

L'onglet "Propriétés" du menu de droite ouvre le paramétrage de toutes les données d'un composant sélectionné.

mceclip6.png

Sans composant sélectionné, aucune propriété ne peut être disponible, et le message suivant s'affiche :

mceclip10.png

Après sélection d'un composant, une ou deux cartes vont s'afficher dans cet onglet :

  • Propriétés générales : Paramètres propre au composant lui-même
  • Propriétés spécifiques : Paramètre propres au contenu du composant sélectionné

 

Propriétés générales

Cette carte apparaît en réponse à la sélection de tout composant.

 

Pour les composants de type Affichage

mceclip14.png

  • Titres du composant : Titre traduit, visible par l'utilisateur, du composant. Champ obligatoire
    • Langue : Langue qui s'applique à ce titre. S'adapte à la langue paramétrée sur le mobile de l'utilisateur
    • Titre : Titre à afficher selon la langue sélectionnée
  • Rang du composant : Emplacement du composant au sein du formulaire. Il est prérempli mais peut être modifié. Le composant peut aussi être déplacé via "glisser-déposer" depuis le bouton prévu à cet effet (voir la partie Options dans l'écran d'aperçu). Champ obligatoire

Pour les autres types de composants

 

mceclip13.png

  • Nom du composant : Nom technique du composant. Il n'est pas visible par tout utilisateur final, mais peut être exploité lors d'opérations via API. Champ obligatoire
  • Titres du composant : Titre traduit, visible par l'utilisateur, du composant. Champ obligatoire
    • Langue : Langue qui s'applique à ce titre. S'adapte à la langue paramétrée sur le mobile de l'utilisateur
    • Titre : Titre à afficher selon la langue sélectionnée
  • Rang du composant : Emplacement du composant au sein du formulaire. Il est prérempli mais peut être modifié. Le composant peut aussi être déplacé via "glisser-déposer" depuis le bouton prévu à cet effet (voir la partie Options dans l'écran d'aperçu). Champ obligatoire
  • Obligatoire
  • Lecture seule

 

Propriétés spécifiques

Après sélection de certains composants, la carte de propriétés spécifiques, propre à chacun d'eux, apparaît.

 

Texte (saisie simple)

mceclip15.png

  • Valeur par défaut : Applique une valeur affichée par défaut

    • Lier le champ à un élément de contexte : Si coché, alors un menu de sélection s'affiche pour récupérer la valeur d'un élément de contexte. Cela peut être une valeur d'attribut, ou même le nom de l'utilisateur, par exemple
    • Valeur : Champ de saisie textuelle qui détermine quoi afficher tant que "Lier le champ à un élément de contexte" n'est pas cochée
  • Type de la zone de texte : Définit le type de donnée textuelle
    • Texte : Texte simple sans restriction
    • Téléphone : Le texte doit correspondre à une succession de chiffres
    • Mot de passe : Le texte s'affiche sous forme de successions d'astérisques " * "
    • Paragraphe : Texte simple sans restriction, dans un bloc de texte étendu en hauteur
    • E-mail : Texte devant respecter le format ###@###.###

Numérique

mceclip16.png

  • Valeur par défaut : Applique une valeur numérique affichée par défaut

  • Borne minimale : Indique à l'utilisateur le minimum à saisir (visible dans le formulaire)
  • Borne maximale : Indique à l'utilisateur le maximum à saisir (visible dans le formulaire)

Case à cocher

mceclip17.png

  • Valeur par défaut : Définit si la case est cochée ou non par défaut

Liste déroulante

mceclip18.png

  • Valeur par défaut : Applique une valeur affichée par défaut

    • Lier le champ à un élément de contexte : Si coché, alors un menu de sélection s'affiche pour récupérer la valeur d'un élément de contexte. Cela peut être une valeur d'attribut, ou même le nom de l'utilisateur, par exemple
      Attention : La valeur par défaut doit être égale à une des options sélectionnables. Si l'élément de contexte sélectionné est différent de toute option de la liste déroulante, alors il ne s'affichera pas par défaut.
  • Ajouter une nouvelle option : Ajout de nouvelle options sélectionnables dans le menu déroulant. Une fois coché, la carte s'étend :

mceclip19.png 

    • Option : Titre traduit de l'option
      • Langue : Langue qui s'applique à ce titre. S'adapte à la langue paramétrée sur le mobile de l'utilisateur
      • Titre : Titre à afficher selon la langue sélectionnée
      • Définir comme valeur par défaut : Fait de cette option la valeur à afficher par défaut

Multi-liste

mceclip9.png

  • Création de la multi-liste depuis un fichier : Importer un fichier qui embarque l'arborescence de combinaisons d'options. Pour tout détail complémentaire, veuillez vous référer à l'article Formulaire - Composant multi-liste
  • Valeur par défaut : Applique une combinaison d'options à afficher par défaut 
    • Définir comme valeur par défaut : Si coché, alors un menu de sélection s'affiche pour récupérer la valeur d'un élément de contexte. Cela peut être une valeur d'attribut, ou même le nom de l'utilisateur, par exemple. Ne peut fonctionner que si l'élément contextuel sélectionné est égal à une "Value" existante dans le fichier (Voir Formulaire - Composant multi-liste pour tout détail complémentaire)

Date

mceclip20.png

  • Valeur par défaut : Applique une valeur affichée par défaut

    • Lier le champ à un élément de contexte : Si coché, alors un menu de sélection s'affiche pour récupérer la valeur d'un élément de contexte. Cela peut être une valeur d'attribut, ou même le nom de l'utilisateur, par exemple
    • Date : Champ de saisie de date avec/sans heure qui détermine quoi afficher tant que "Lier le champ à un élément de contexte" n'est pas cochée
  • Format de date : Définit le type de date
    • Date : Date simple
    • Date-heure: Date & heure
    • Heure : Heure simple

Image (saisie simple)

mceclip21.png

  • Source des images : Définit de quelle source (sur mobile) peuvent être issues les images

  • Nombre maximal d'images

Code-barres

mceclip22.png

    • Valeur par défaut : Applique une valeur affichée par défaut

      • Lier le champ à un élément de contexte : Si coché, alors un menu de sélection s'affiche pour récupérer la valeur d'un élément de contexte. Cela peut être une valeur d'attribut, ou même le nom de l'utilisateur, par exemple
      • Valeur : Champ de saisie textuelle qui détermine quoi afficher tant que "Lier le champ à un élément de contexte" n'est pas cochée
  • Types de code-barres : Définit le type de code-barres qui pourra être lu par le scanner parmi de nombreux types :
    • AZTEC
    • CODE_128
    • CODE_39
    • CODE_93
    • DATA_MATRIX
    • EAN_13
    • EAN_8
    • ITF
    • PDF-417
    • QR
    • UPC_E

 

Aperçu central

L'écran central offre un aperçu en temps réel de toute opération menée dans le formulaire.

mceclip10.png

 

Options dans l'écran d'aperçu

mceclip8.png

Les 3 boutons situés à côté de l'aperçu du modèle de formulaire offrent des fonctionnalités distinctes :

  • Le premier bouton active ou désactive le mode "glisser / déposer" afin de déplacer facilement les différents composants
  • Le deuxième bouton adapte l'aperçu à un device
  • Le troisième bouton adapte la langue de l'aperçu

 

Éléments de contexte

Quand un élément de contexte est déterminé comme valeur par défaut, celle-ci s'affiche de manière technique : 

mceclip9.png

Cet affichage fait remarquer rapidement qu'un élément de contexte est bien configuré et montre duquel il s'agit.

 

Sauvegarder les modifications

La sauvegarde se fait via le bouton mceclip12.png situé en haut à droite de la page.

Il est aussi possible de sauvegarder en tentant de quitter directement le studio, via la barre d'alerte qui apparaît en bas de page.

mceclip13.png

 

Quitter le studio de formulaire

Pour quitter le studio, il suffit de cliquer sur le bouton mceclip14.png affiché en haut à gauche de la page.