Comment créer des formulaires plein-écran

Introduction

Actuellement, la création d'une demande de nouvel employé passe par une fenêtre de dialogue qui s’ouvre via le bouton « + » et se ferme une fois le formulaire rempli. Ce guide propose une amélioration de ce processus en redirigeant les utilisateurs vers une page dédiée en plein écran, offrant une interface plus claire et optimisée pour remplir le formulaire. Suivez ces étapes pour mettre en place cette nouvelle approche.

Étapes à suivre

1. Créer une nouvelle page pour héberger le formulaire

1. Dans le panneau de gauche, sous la section Pages, cliquez sur Add custom page (Ajouter une page personnalisée) pour créer une nouvelle page. Celle-ci va héberger le formulaire de création d'employé dans une page qui occupera tout l'écran.

   

2. Configurer cette page depuis la boîte de dialogue :

   • Pour le Layout, choisissez Main

   • Définissez l'URL de la nouvelle page en remplissant le champ Route avec une adresse pertinente, comme /nouvel-employe.

   • Vous pouvez également ajouter un titre pour cette nouvelle page dans le champ Title (facultatif).

   • Enfin, cliquez sur Create pour créer la page.

   

2. Configurer la redirection du bouton d'action

a) Commence par sélectionner le bouton, puis supprime son Behavior.

b) Clic sur Add a Behavior (Ajouter un comportement) et sélectionne Navigate to another page (Naviguer vers une autre page).

c) Dans le champ To, sélectionne la page créée précédemment, ici /nouvel-employe.

d) Pour tester le bon fonctionnement du bouton, clic sur le bouton avec l'icône « + » en mode Live.

Après avoir cliqué sur le bouton, vous serez redirigé vers la nouvelle page, ici intitulée nouvel-employe. À ce stade, la page est encore vide et affiche uniquement le message Page content, car aucun contenu (comme le formulaire) n’a encore été ajouté.

Cela confirme que la redirection fonctionne bien et que la page est prête à recevoir le formulaire plein écran.

3. Ajouter le formulaire à la page

a) Pour ajouter le formulaire à la page, drag and Drop la commande « Create » sur la nouvelle page vierge.

b) Et sélectionne l’option « Command form » (Formulaire de commande).

c) Tous les champs associer à la commande sont automatiquement inclus dans le formulaire, en mode plein-écran.

4. Ajuster le style du formulaire pour un rendu plus soigné

• Centrage horizontal : Réglez les marges gauche et droite sur "auto" pour centrer le formulaire sur la page.

• Largeur optimale : Fixez la largeur à 680px pour garantir un bon équilibre entre lisibilité et espace disponible.

• Espacement uniforme : Appliquez un "padding" de 10px ainsi qu’un espacement interne cohérent pour une présentation harmonieuse.

5. Ajouter un titre descriptif à la page

a) Ajouter un titre à votre page en sélectionnant la composante texte qui affiche « Page Content » au-dessus du formulaire. Dans le panneau de droite, remplacez la valeur par un titre plus approprié, comme Nouvel employé, pour décrire le formulaire à l'utilisateur.

b) Après avoir modifié le titre, applique des styles pour améliorer la visibilité : Choisi une taille de police plus grande (ex. huge), mets le texte en gras pour donner plus de poids au titre et centre le titre.

6. Organiser visuellement les champs en sections

a) Afin de mieux structurer l’interface visuellement séparons les champs en sections dans le formulaire. Pour regrouper des champs, sélectionne plusieurs champs du formulaire simultanément (par exemple, Nom, Prénom, etc.), puis clic droit et choisi l'option "Box vertical" :

b) Après avoir regroupé les champs dans une boîte, l'espacement standard a été perdu. Pour corriger cela, appliquez un « Item Spacing » à la boîte, puis configurez un Padding de 16px. Sous la section « Background », sélectionne une couleur d'arrière-plan pour la boîte. Ici, la couleur choisie est themeComplementaryDark. Ajoutez un « border-radius » « small » et réglez l'épaisseur et la couleur de la bordure si nécessaire. Puis, répétez cette étape pour les autres sections. Cela permet de mieux organiser visuellement le formulaire et d’offrir une structure plus lisible aux utilisateurs.

7. Structurer les sections avec des titres adaptés

Ajoute un titre Identification pour la première section contenant des informations personnelles comme Nom, Prénom, Numéro de téléphone, etc. Il y a l’option de simplement dupliqué le titre principal et adapter son style à celui d’un titre de section. Puis, répétez cette étape pour les autres sections.

8. Configurer la soumission du formulaire et redirection

a) Dans le bas du formulaire, le bouton Soumettre est utilisé pour envoyer les informations saisies. On va maintenant configurer ce bouton pour qu’il redirige l’utilisateur automatiquement vers la liste des nouveaux employés après la soumission. Pour ce faire, commence par copier l’URL de la page liste.

b) Puis, une fois de retours sur la page du formulaire, sélectionne la boite ayant le behavior « command form » qui appelle la commande « create ». Dans la section « on success », ajoute une expression JS de navigation:

()=> navigate( ' /list/demandes-nouvel-employé')

c) Une fois la configuration terminée, test le flux de travail complet. C’est-à-dire remplir le formulaire et cliqué sur Soumettre afin de voir si l’utilisateur sera automatiquement redirigé vers la liste des nouveaux employés.

Note: On ne contrôle pas les caractéristiques des champs eux même, ils seront requis que s’ils le sont au niveau de la commande.

Conclusion

Ce guide explique comment transformer une fenêtre de dialogue en formulaire plein-écran sur une page dédiée, tout en améliorant l'ergonomie et la présentation. Le processus inclut la création et la configuration d'une nouvelle page, l'ajout d'un formulaire, la personnalisation des styles, et l'intégration de redirections automatiques pour une expérience utilisateur optimisée.