<aside>

Sommaire

• Visiativ Process
• Le portail d’accueil
• Le studio de modélisation
• L’annuaire
• Les applications métiers </aside>

Dans cette page

Concevoir et gérer les formulaires

Les formulaires permettent de présenter les informations d’un processus et de guider les utilisateurs lors de la consultation ou de la saisie d’un document. Ils sont conçus dans le Studio, à partir de l’Éditeur de formulaires.

<aside> 🎯

Objectif

Créer un formulaire lisible et cohérent, adapté à l’usage sur ordinateur comme sur mobile, puis contrôler son fonctionnement avant sa mise à disposition.

</aside>

Avant de commencer

Vérifiez que :

• vous disposez des droits nécessaires pour modifier l’application et ses formulaires ;
• les champs utiles ont été créés dans le groupe de processus ;
• vous avez identifié les informations à afficher, à saisir ou à rendre obligatoires ;
• vous savez si le formulaire doit être utilisé en édition, en lecture et/ou sur mobile.

Principes de conception

Pour garantir une présentation claire :

• utilisez des sections pour regrouper les informations par thème ;
• construisez la mise en page avec des tableaux, des lignes et des cellules ;
• insérez les champs dans les cellules du tableau ;
• associez un libellé explicite à chaque champ ;
• privilégiez une organisation simple, avec une seule colonne pour les usages mobiles ;
• utilisez la prévisualisation et le contrôle de cohérence avant de publier vos modifications.

<aside> 💡

Sur mobile, l’espace disponible est réduit. Placez les informations essentielles en premier et évitez les mises en page trop denses.

</aside>

Prendre en main l’Éditeur de formulaires

L’Éditeur de formulaires comprend trois zones principales :

1. La Bibliothèque, qui contient les éléments disponibles.
2. La zone de travail, dans laquelle vous construisez le formulaire.
3. La palette de propriétés, qui permet de configurer l’élément sélectionné.

Pour ajouter un élément, faites-le glisser depuis la Bibliothèque vers la zone de travail, configurez ses propriétés, puis cliquez sur Appliquer.

À tout moment, cliquez sur Vérifier dans la barre d’outils pour détecter les incohérences du formulaire.

Exemple de formulaire structuré avec une section, des lignes et des cellules

Construire la mise en page

Ajouter une section

Une section permet de regrouper des informations qui poursuivent un même objectif.

1. Dans la Bibliothèque, sélectionnez Section.
2. Faites glisser l’élément à la racine du formulaire ou dans une cellule de tableau.
3. Saisissez un titre et, si nécessaire, une description.
4. Choisissez son style et ses conditions d’affichage.
5. Cliquez sur Appliquer.

Vous pouvez également utiliser un groupe d’onglets lorsque plusieurs ensembles d’informations doivent partager le même emplacement à l’écran.

Ajouter un tableau de mise en page

Le tableau structure les champs du formulaire. Il peut être ajouté :

• à la racine du formulaire ;
• dans une section ;
• dans une cellule vide, pour créer un sous-tableau.

1. Faites glisser l’élément Tableau dans la zone de travail.
2. Ajoutez les lignes nécessaires depuis le menu contextuel du tableau ou d’une ligne.
3. Ajoutez ou divisez les cellules à l’aide des commandes + affichées de chaque côté.
4. Ajustez, si nécessaire, la largeur des cellules en pourcentage.

Exemple de formulaire organisé en tableau

Commandes disponibles sur une cellule du formulaire

Configuration de la largeur et du style d’une cellule

<aside> ⚠️

La modification de la largeur d’une cellule ajuste également la largeur des cellules voisines. La largeur totale d’une ligne reste égale à 100 %.

</aside>

Pour personnaliser davantage l’affichage, vous pouvez appliquer une ou plusieurs classes CSS à une ligne ou à une cellule. Séparez les classes par des espaces.

Ajouter et configurer des champs

Insérer un champ

Un champ doit être placé dans une cellule de tableau.

1. Faites glisser le type de champ souhaité dans une cellule.
2. Dans la palette de propriétés, associez le champ de données correspondant.
3. Définissez son comportement : obligatoire, lecture seule, valeur par défaut, affichage ou validation.
4. Cliquez sur Appliquer.

Ajouter un libellé

Lorsque vous insérez un champ dans une cellule et que la cellule située à gauche est vide, le libellé peut être créé automatiquement.

Vous pouvez renseigner :

• le titre affiché à l’utilisateur ;
• la description, affichée sous forme d’aide ou d’infobulle ;
• une clé de traduction lorsque le formulaire est multilingue.

Utilisez des libellés courts et précis. Par exemple, préférez Date de début à Date.

Champ inséré avec son libellé associé

Choisir le bon élément

Configurer un champ texte

Selon le type de champ, vous pouvez notamment :

• afficher une aide à la saisie ;
• autoriser plusieurs lignes ;
• masquer les caractères saisis ;
• appliquer un masque de saisie ;
• limiter le nombre de caractères ;
• définir sa position dans l’ordre de tabulation.

Exemples de masques :