Règles de Validation

1. Introduction aux Règles de Validation​

Le Gestionnaire de Règles est un élément central du Web Modeler, vous permettant de créer des interfaces utilisateur dynamiques et intelligentes. Il vous permet de définir des règles spécifiques à un écran qui contrôlent le comportement de vos composants, aboutissant à des formulaires sophistiqués qui s'adaptent en temps réel aux entrées de l'utilisateur et à l'état de l'application.

En définissant des règles, vous pouvez contrôler si un composant est disponible, visible, requis ou désactivé. Cela garantit que les utilisateurs ne voient que les informations pertinentes, les guidant à travers des processus de saisie de données complexes et réduisant les erreurs.

2. Explication des Quatre Règles Fondamentales​

Le Gestionnaire de Règles fonctionne sur quatre propriétés fondamentales que vous pouvez configurer pour n'importe quel widget sur un écran. Comprendre chacune est la clé pour créer des expériences utilisateur efficaces.

• Disponible : Détermine si le widget est chargé et existe dans le modèle de données de la page pour cet écran. Si un widget n'est pas disponible, ses données ne peuvent être ni consultées, ni manipulées, ni soumises.

  • Exemple pratique : Dans un flux de travail d'approbation, un champ "Justification du Manager" est rendu disponible uniquement sur l'écran "Revue du Manager", et non sur l'écran initial de "Soumission".

• Visible : Contrôle si l'utilisateur peut voir le widget. Un composant peut être disponible (contenant des données) mais caché de la vue.

  • Exemple pratique : Un formulaire "Adresse de Livraison" est caché jusqu'à ce que l'utilisateur coche une case "Expédier à une adresse différente". Cela simplifie la vue initiale tout en gardant les champs de données prêts.

• Requis : Marque un champ de saisie comme obligatoire. Le formulaire ne peut être soumis si un champ requis est vide.

  • Exemple pratique : Un champ "Adresse E-mail" dans un formulaire d'inscription est marqué comme requis pour s'assurer que les informations de contact essentielles sont toujours collectées.

• Désactivé : Détermine si un utilisateur peut interagir avec un widget. Un widget désactivé est visible mais "grisé" et ne peut être modifié. Sa valeur fait toujours partie des données du formulaire.

  • Exemple pratique : Un bouton "Soumettre" reste désactivé jusqu'à ce que tous les champs requis soient correctement remplis, empêchant les soumissions incomplètes.

3. Naviguer dans l'Interface du Gestionnaire de Règles​

Le Gestionnaire de Règles fournit un tableau centralisé pour configurer ces règles pour chaque composant sur un écran spécifique, vous permettant de contrôler dynamiquement ce que les utilisateurs voient et font.

3.1. Décomposition de l'Interface​

L'interface est une grille où chaque ligne représente un écran de votre application et les colonnes correspondent aux quatre règles fondamentales.

• Écrans : Liste tous les écrans de l'application où le composant sélectionné peut être configuré (par ex., "Demande de Budget", "Manager d'équipe").
• Interrupteurs Disponible / Visible / Requis / Désactivé : Simples interrupteurs pour activer ou désactiver une règle de manière inconditionnelle.
• Paramètre Avancé (Icône d'engrenage) : Cliquer sur l'icône d'engrenage ouvre l'Éditeur de Conditions, où vous pouvez écrire des expressions basées sur JavaScript pour appliquer la logique de manière dynamique.

4. Construire des Formulaires Dynamiques avec une Logique Conditionnelle​

La véritable puissance du Gestionnaire de Règles se libère lorsque vous utilisez une logique conditionnelle. En cliquant sur l'icône d'engrenage à côté d'une règle, vous pouvez définir une expression JavaScript qui s'évalue en temps réel.

4.1. Exemple : Visibilité Conditionnelle​

Un cas d'usage classique est d'afficher un champ "État/Province" uniquement lorsque le pays sélectionné l'exige.

1. Scénario : Nous avons deux widgets :

   • Un menu déroulant avec le nom de modèle country.
   • Un champ de saisie de texte avec le nom de modèle state.

2. Objectif : Le champ state ne doit être visible que si le country sélectionné est "United States" ou "Canada".

3. Implémentation :

   1. Dans le Web Modeler, sélectionnez le widget state.
   2. Ouvrez le Gestionnaire de Règles pour l'écran pertinent.
   3. Dans la ligne du widget state, cliquez sur l'icône d'engrenage pour la propriété Visible.
   4. Dans l'Éditeur de Conditions, entrez l'expression JavaScript suivante :

Cette expression indique à l'interface utilisateur d'afficher le champ state uniquement lorsque la condition est remplie. Pour tous les autres pays, il restera caché, créant un formulaire plus propre et plus contextuel.

5. Dépannage des Problèmes Courants dans les Règles​

Si une règle ne fonctionne pas comme prévu, ces étapes de dépannage peuvent vous aider à diagnostiquer le problème.

5.1. Vérifiez la Console de Développement du Navigateur​

C'est votre premier et plus important outil. Appuyez sur F12 pour ouvrir la console de développement de votre navigateur. Les erreurs JavaScript, telles que les erreurs de syntaxe dans vos conditions, y seront signalées, souvent avec un emplacement précis.

5.2. Vérifiez les Noms de Modèle des Widgets​

Une erreur fréquente est une faute de frappe dans le nom de modèle d'un widget. Les noms de modèle sont sensibles à la casse. Vérifiez bien la propriété Modèle dans la configuration du widget pour vous assurer qu'elle correspond exactement au nom utilisé dans votre objet form dans l'expression de la règle.

5.3. Attention aux Incompatibilités de Types de Données​

Assurez-vous que vous comparez des valeurs du même type de données. Une valeur provenant d'un champ numérique peut être une chaîne de caractères par défaut. Vous devrez peut-être la convertir explicitement en nombre pour une comparaison mathématique.

// INCORRECT : La valeur '5' est une chaîne de caractères et peut ne pas être comparée correctement.
{{my_numeric_field}} > 10

// CORRECT : Convertissez la valeur du champ en Nombre avant la comparaison.
Number({{my_numeric_field}}) > 10

6. Meilleures Pratiques pour Écrire et Maintenir des Règles​

Suivez ces directives pour garder vos règles propres, performantes et faciles à déboguer.

• Gardez la Logique Simple et Ciblée : Une règle doit effectuer une seule vérification claire. Si une condition devient trop complexe, c'est un signe que la logique devrait être refactorisée.
• Abstrayez la Complexité dans des Fonctions : Pour les règles qui nécessitent une logique en plusieurs étapes (par ex., vérifier plusieurs champs, effectuer des calculs), déplacez cette logique dans une fonction réutilisable dans le setup de l'écran ou un utilitaire global. Votre expression de règle peut alors simplement appeler cette fonction, la rendant propre et lisible.
• Optimisez pour la Performance : Les règles s'exécutent frequently lorsque l'utilisateur interagit avec le formulaire. Évitez les opérations lourdes en performance comme les boucles complexes ou le traitement lourd de données dans une règle. Pré-calculez les valeurs chaque fois que possible.
• Soyez Explicite avec les Types de Données : Comme souligné dans le dépannage, soyez toujours attentif aux types de données. Utilisez Number(), String(), et d'autres fonctions de conversion pour éviter les comportements inattendus dus à la coercition automatique des types.

En maîtrisant ces techniques, vous pouvez créer des interfaces hautement adaptatives et conviviales qui rationalisent la collecte de données et améliorent l'expérience utilisateur globale.