Le contenu de cette page a été traduit automatiquement par un service tiers.


Dans des articles précédents, nous avons abordé les bases des formulaires responsifs. Dans ce blog, nous allons aller encore plus loin et partager quelques astuces pour rendre vos formulaires responsifs plus attrayants visuellement pour vos utilisateurs finaux. Voici quelques conseils pour que vos formulaires responsifs transmettent plus d’informations dans le même espace.

Colonnes imbriquées

Dans notre premier article d’introduction sur les formulaires responsifs, nous avons expliqué comment votre formulaire peut être divisé en colonnes pour mieux organiser vos propriétés. Une fonctionnalité intéressante que vous ne connaissez peut-être pas est que vous pouvez en réalité subdiviser vos colonnes en colonnes supplémentaires. Bien que cela puisse sembler compliqué, notre interface utilisateur rend cette configuration très simple. Voici un aperçu rapide de ce à quoi cela ressemble en pratique :

Pour configurer cela, vous devez ouvrir votre éditeur de formulaires responsifs et simplement faire glisser une boîte depuis l’onglet Structure vers l’une de vos colonnes :

À partir de là, vous pouvez sélectionner l’une de vos propriétés inutilisées et la déposer directement dans les nouvelles colonnes que vous avez créées. Il est important de garder à l’esprit la longueur de votre propriété lorsque vous faites cela et de réserver cette pratique pour des propriétés plus courtes. De bons exemples sont des éléments tels que Révision, État, Génération, Numéro de pièce, ainsi que des éléments comme des booléens ou des coûts.

Code couleur pour les propriétés importantes

Dans un autre de mes blogs précédents, j’ai montré comment définir des règles pour personnaliser vos formulaires. Celles-ci peuvent être basées sur des éléments tels que l’identité de la personne qui consulte le formulaire ou la valeur réelle de la propriété. Cela peut être utilisé de multiples façons, mais l’une des plus utiles que j’ai trouvées est de vérifier la version actuelle de votre élément et de styliser la propriété Révision avec une couleur différente si vous ne regardez pas la version la plus récente de l’élément. Cela donne à votre utilisateur une indication visuelle rapide qu’il pourrait consulter une version plus ancienne d’un élément. Voici un aperçu rapide de ce à quoi cette règle pourrait ressembler :

Un autre endroit idéal pour utiliser cela est dans les états de cycle de vie ou de flux de travail. L’utilisation d’un code couleur simple permet aux utilisateurs de comprendre rapidement ce qui se passe avec leurs éléments dès qu’ils ouvrent un formulaire. Je recommande de tester ces options pour voir ce qui est possible.

Dans le même esprit, l’utilisation de règles pour masquer des propriétés spécifiques en fonction des identités est beaucoup plus facile qu’avec l’ancien système de formulaires. Cela vous permet de créer moins de vues spécialisées, ce qui réduit la maintenance requise.

Réflexions finales

Les formulaires responsifs continuent de s’enrichir à chaque nouvelle version. Il n’y a jamais eu de meilleur moment pour les essayer, et essayer est aussi simple que de cliquer sur ce bouton sur le formulaire de votre élément :

Gardez à l’esprit que ce bouton ne fait que changer votre vue et ne remplace aucun de vos formulaires existants. Vous pouvez passer librement d’un formulaire classique à un formulaire responsif et vice versa. Essayez-les et dites-nous ce que vous êtes capable de construire ! N’hésitez pas à partager vos réalisations avec vos collègues via les commentaires. Nous avons hâte de vous lire.