Éditeur de règles pour Edge Delivery Services Forms

• Condition → Action (When/Then [Lorsque/Alors])

  code language-text
  WHEN Gross Salary > 50000 THEN Show "Additional Deduction"

  Idéal pour une visibilité conditionnelle et une divulgation progressive.

• Action ← Condition (Set If/Only if [Définir si/Seulement si])

  code language-text
  SET Taxable Income = Gross Salary - Deductions IF Deductions are applicable

  Idéal pour les calculs et les transformations de données.

• If → Then → Else (Si > Alors > Sinon) (Autre action)

  code language-text
  IF Income > 50000 THEN Show "High Income" fields ELSE Show "Standard Income" fields

  Idéal pour la logique de branchement et les flux s’excluant mutuellement.

• Condition  : « Le salaire brut dépasse 50 000 $ »
• Action principale  : Afficher la « Déduction supplémentaire »
• Autre action  : Masquer la « Déduction supplémentaire »
• Résultat  : les utilisateurs et utilisatrices voient uniquement les champs qui s’appliquent à eux

Autorisations essentielles et configuration  :

• AEM as a Cloud Service  : accès en création avec des autorisations de modification de formulaire.
• Éditeur universel  : installé et configuré sur votre environnement.
• Extension de l’éditeur de règles  : activée via Extension Manager.
• Autorisations d’édition de formulaire  : possibilité de créer et de modifier des composants de formulaire dans l’éditeur universel.

Étapes de vérification  :

1. Confirmer que vous pouvez accéder à l’éditeur universel à partir de votre console AEM Sites.
2. Vérifier que vous pouvez créer et modifier des composants de formulaire.
3. Vérifier que l’icône de l’éditeur de règles s’affiche lors de la sélection des composants de formulaire.

Connaissances et compétences requises  :

• Maîtrise de l’éditeur universel  : expérience dans la création de formulaires avec des entrées de texte, des listes déroulantes et des propriétés de champ de base
• Compréhension de la logique commerciale  : capacité à définir des exigences conditionnelles et des règles de validation pour votre cas d’utilisation spécifique
• Maîtrise des composants de formulaire  : connaissance des types de champs (texte, nombre, liste déroulante), des propriétés (obligatoires, visibles, en lecture seule) et de la structure des formulaires

Facultatif pour une utilisation avancée  :

• Concepts de base de JavaScript  : uniquement pour la création de fonctions personnalisées (types de données, fonctions, syntaxe de base)
• Compréhension de JSON  : utile pour la manipulation de données complexes et les intégrations d’API

Questions d’évaluation  :

• Pouvez-vous créer un formulaire de base avec des entrées de texte et un bouton d’envoi dans l’éditeur universel ?
• Savez-vous quand les champs doivent être obligatoires ou facultatifs dans le contexte de votre activité ?
• Pouvez-vous identifier les éléments de formulaire qui nécessitent une visibilité conditionnelle dans votre cas d’utilisation ?

Important  : l’extension de l’éditeur de règles n’est pas activée par défaut dans l’éditeur universel.

Étapes d’activation  :

1. Accéder à Extension Manager dans votre environnement AEM
2. Recherchez l’extension « Éditeur de règles » dans la liste des extensions disponibles.
3. Cliquer sur Activer et confirmer l’activation
4. Attendez que le système s’actualise (cela peut prendre 1 à 2 minutes).

Vérification  :

• Après l’activation, l’icône Éditeur de règles s’affiche lorsque vous sélectionnez un composant de formulaire : .

Image : l’icône Éditeur de règles s’affiche lorsque vous sélectionnez des composants de formulaire.

Pour ouvrir l’éditeur de règles :

1. Sélectionnez un composant de formulaire dans l’éditeur universel.
2. Cliquez sur l’icône Éditeur de règles.
3. L’éditeur de règles s’ouvre dans un panneau latéral.

Image : interface de l’éditeur de règles pour la modification des règles de composant.

Vue d’ensemble de l’interface de l’éditeur de règles

Image : interface complète de l’éditeur de règles avec des composants numérotés.

• Titre du composant et type de règle  : confirme le composant sélectionné et le type de règle actif.

• Panneau Objets de formulaire et Fonctions  :

  • Objets de formulaire : vue hiérarchique des champs et des conteneurs pour le référencement dans les règles.
  • Fonctions : assistants intégrés de mathématiques, de chaînes, de dates et de validation

• Basculement de panneau  : affichez/masquez le panneau Objets et fonctions pour augmenter l’espace de travail.

• Créateur visuel de règles  : création de règles par glisser-déposer et menus déroulants.

• Contrôles : Terminé (enregistrer), Annuler (ignorer). Testez toujours les règles avant d’enregistrer.

Lorsqu’un composant comporte déjà des règles, vous pouvez :

• Afficher  : voir la logique et les résumés des règles.
• Modifier  : modifier des conditions et des actions.
• Réorganiser  : modifier l’ordre d’exécution (du haut vers le bas).
• Activer/désactiver  : activer/désactiver les règles pour le test.
• Supprimer  : supprimer les règles en toute sécurité.

• When (Lorsque)  : règle principale pour un comportement conditionnel complexe (Condition → Action ± Else [Sinon]).
• Masquer/Afficher  : contrôle la visibilité en fonction d’une condition (divulgation progressive).
• Activer/Désactiver  : contrôle si un champ est interactif (par exemple, désactiver Envoyer jusqu’à ce que les champs obligatoires soient valides).

• Définir la valeur de  : permet de renseigner automatiquement les valeurs (par exemple, dates, totaux, copies).
• Effacer la valeur de  : permet de supprimer des données lorsque les conditions changent.
• Formater  : permet de transformer la mise en forme de l’affichage (devise, téléphone, date) sans modifier les valeurs stockées.

• Valider  : logique de validation personnalisée, y compris les vérifications entre champs et les règles métier.

• Expression mathématique  : permet de calculer des valeurs en temps réel (totaux, taxes, ratios).

• Définir la cible d’action  : permet de cibler un champ spécifique (à utiliser avec parcimonie).
• Définir la propriété  : permet de modifier les propriétés du composant de manière dynamique (espace réservé, options, etc.).

• Envoyer le formulaire  : permet d’envoyer le formulaire par programmation (uniquement lorsque les validations ont abouti).
• Réinitialiser le formulaire  : permet d’effacer et de rétablir l’état initial (confirmer avant de l’utiliser).
• Enregistrer le formulaire  : permet d’enregistrer en tant que brouillon pour une utilisation ultérieure (formulaires longs, sessions multiples).

• Appeler le service  : permet d’appeler des API/services externes (gestion du chargement et des erreurs).
• Ajouter/supprimer une instance  : permet de gérer les sections répétables (par exemple, les dépendances, les adresses).
• Accéder à  : permet d’accéder à d’autres formulaires/pages (conserver les données avant la navigation).
• Naviguer entre les panneaux  : permet de parcourir les étapes de l’assistant et d’en ignorer.
• Distribuer l’événement  : permet de déclencher des événements personnalisés pour les intégrations ou l’analyse.

Cet exemple illustre la visibilité conditionnelle et les calculs automatiques.

Figure : formulaire de calcul de taxes avec des champs conditionnels intelligents

Vous allez créer un formulaire qui :

1. S’adapte aux entrées utilisateur et utilisatrice en affichant les champs pertinents.
2. Calcule les valeurs en temps réel.
3. Valide les données pour améliorer la précision.

• Règle 1 : affichage conditionnel

  code language-text
  WHEN Gross Salary > 50,000 THEN Show "Additional Deduction" ELSE Hide "Additional Deduction"

• Règle 2 : calcul du revenu imposable

  code language-text
  SET Taxable Income = Gross Salary - Additional Deduction (Only when Additional Deduction applies)

• Règle 3 : calcul des taxes à payer

  code language-text
  SET Tax Payable = Taxable Income × 10% (Simplified flat rate)

Objectif : créer le formulaire de base avec tous les champs et paramètres initiaux.

1. Ouvrez l’éditeur universel :

   • Accédez à la console AEM Sites, sélectionnez votre page, puis cliquez sur Modifier.
   • Vérifiez que l’éditeur universel est correctement configuré.

2. Ajoutez les composants de formulaire dans cet ordre  :

   • Titre (H2) : « Formulaire de calcul des taxes »
   • Entrée numérique : « Salaire brut » (Obligatoire : oui, Espace réservé : « Saisir le salaire annuel »)
   • Entrée numérique : « Déduction supplémentaire » (Obligatoire : non, Espace réservé : « Saisir des déductions supplémentaires »)
   • Entrée numérique : « Revenu imposable » (Lecture seule : oui)
   • Entrée numérique : « Taxes à payer » (Lecture seule : oui)
   • Bouton Envoyer : « Calculer la taxe »

3. Configurez les propriétés initiales du champ  :

   • Masquez « Déduction supplémentaire » (définissez la valeur Visible : non dans le panneau Propriétés)
   • Définissez « Revenu imposable » et « Taxes à payer » sur Lecture seule : oui

Image : structure initiale du formulaire avec configuration des composants de base

Point de contrôle  : tous les champs obligatoires de votre formulaire devraient être remplis, le champ « Déduction supplémentaire » devrait être masqué et les champs calculés devraient être en lecture seule.

Objectif  : afficher le champ « Déduction supplémentaire » uniquement lorsque le salaire brut dépasse 50 000 $.

1. Sélectionnez le champ Salaire brut et cliquez sur l’icône de l’éditeur de règles .

2. Créez une règle  :

   • Cliquer sur Créer
   • Remplacez le type de règle de « Définir la valeur de » par « Lorsque ».

3. Configurez la condition  :

   • Sélectionnez « est supérieur à » dans la liste déroulante.
   • Saisissez 50000 dans le champ numérique.

4. Définissez l’action Alors  :

   • Choisissez « Afficher » dans le menu déroulant Sélectionner une action.
   • Faites glisser ou sélectionnez le champ « Déduction supplémentaire » à partir des objets de formulaire.

5. Ajoutez l’action Sinon  :

   • Cliquez sur « Ajouter une section Sinon ».
   • Sélectionnez « Masquer » dans le menu déroulant Sélectionner une action.
   • Sélectionnez le champ « Déduction supplémentaire ».

6. Enregistrez la règle  : cliquez sur Terminé.

Objectif  : calculez automatiquement le « Revenu imposable » et les « Taxes à payer » en fonction des données saisies par l’utilisateur ou l’utilisatrice.

Configurez le calcul du revenu imposable  :

1. Sélectionnez le champ « Revenu imposable » et ouvrez l’éditeur de règles.

2. Créez une expression mathématique  :

   • Cliquez sur Créer  → Sélectionnez « Expression Mathématique ».
   • Créez une expression : Salaire brut − Déduction supplémentaire.
   • Faites glisser « Salaire brut » dans le premier champ.
   • Sélectionnez l’opérateur « Moins ».
   • Faites glisser « Déduction supplémentaire » dans le deuxième champ.

3. Enregistrer  : cliquez sur Terminé.

Configurer le calcul des taxes à payer  :

1. Sélectionnez le champ « Taxe à payer », puis ouvrez l’éditeur de règles.

2. Créer une expression mathématique  :

   • Cliquez sur Créer  → Sélectionnez « Expression Mathématique ».
   • Créez une expression : Revenu imposable × 10 ÷ 100.
   • Faites glisser « Revenu imposable » dans le premier champ.
   • Sélectionnez l’opérateur « Multiplié par ».
   • Saisissez le nombre 10.
   • Cliquez sur « Étendre l’expression ».
   • Sélectionnez l’opérateur « Divisé par ».
   • Saisissez le nombre 100.

3. Enregistrer  : cliquez sur Terminé.

Vérifiez votre implémentation en testant le flux complet  :

1. Prévisualiser le formulaire  : cliquez sur le mode Aperçu dans l’éditeur universel.

2. Tester la logique conditionnelle  :

   • Saisissez Salaire brut = 30000 → « Déduction supplémentaire » doit rester masqué.
   • Saisissez Salaire brut = 60000 → « Déduction supplémentaire » doit apparaître.

3. Tester les calculs  :

   • Si Salaire brut = 60000, saisissez Déduction supplémentaire = 5000.
   • Vérifiez que Revenu imposable = 55000 (60000 - 5000).
   • Vérifiez que Taxe à payer = 5500 (55000 × 10 %).

Image : calculateur de taxe terminé avec champs conditionnels et calculs automatiques.

Critères de réussite  : le formulaire doit afficher/masquer les champs de manière dynamique et calculer les valeurs en temps réel au fur et à mesure que les utilisateurs et utilisatrices saisissent des informations.

Scénarios idéaux pour les fonctions personnalisées  :

• Calculs complexes  : calculs à plusieurs étapes difficiles à exprimer dans la règle d’expression mathématique.
• Validations spécifiques à l’entreprise  : logique de validation personnalisée spécifique à votre organisation ou à votre secteur d’activité.
• Transformations de données  : conversions de formats, manipulations de chaînes ou analyse de données.
• Intégrations externes  : appels à des API internes ou à des services tiers (avec limitations).

Avantages des fonctions personnalisées  :

• Réutilisation  : écrivez-les une seule fois et réutilisez-les dans plusieurs formulaires et règles.
• Maintenabilité  : logique centralisée, plus facile à mettre à jour et à déboguer.
• Performances  : exécution JavaScript optimisée par rapport aux chaînes de règles complexes.
• Flexibilité  : gérez les cas particuliers et les scénarios complexes non gérés par des règles standard.

Emplacement du fichier  : toutes les fonctions personnalisées doivent être définies dans /blocks/form/functions.js dans votre projet Edge Delivery Services.

Workflow de développement  :

1. Conception de fonction

   • Utilisez des noms de fonction descriptifs et orientés vers l’action.
   • Définissez des types de paramètres clairs et des valeurs de retour.
   • Gérez les cas particuliers et les entrées non valides de manière appropriée.

2. Mise en œuvre

   • Écrivez du code JavaScript clair et bien commenté.
   • Incluez la validation des entrées et la gestion des erreurs.
   • Testez les fonctions indépendamment avant l’intégration.

3. Documentation

   • Ajoutez des commentaires JSDoc complets.
   • Incluez des exemples d’utilisation et des descriptions de paramètres.
   • Documentez toute limite ou dépendance.

4. Déploiement

   • Exportez les fonctions à l’aide d’exports nommés.
   • Déployez sur le référentiel du projet.
   • Vérifiez que la génération est terminée avant de procéder au test.

Exemple d’implémentation  :

/**
 * Concatenates first and last name with proper formatting
 * @name getFullName
 * @description Combines first and last name, handles edge cases like missing values
 * @param {string} firstName - The person's first name
 * @param {string} lastName - The person's last name
 * @returns {string} Formatted full name or empty string if both inputs are invalid
 */
function getFullName(firstName, lastName) {
  // Handle null, undefined, or empty string inputs
  const first = (firstName || '').toString().trim();
  const last = (lastName || '').toString().trim();

  return `${first} ${last}`.trim();
}

/**
 * Calculates the number of days between two dates
 * @name days
 * @description Computes absolute difference in days, handles various date input formats
 * @param {Date|string} endDate - End date (Date object or ISO string)
 * @param {Date|string} startDate - Start date (Date object or ISO string)
 * @returns {number} Number of days between dates, 0 if inputs are invalid
 */
function days(endDate, startDate) {
  // Convert string inputs to Date objects
  const start = typeof startDate === 'string' ? new Date(startDate) : startDate;
  const end = typeof endDate === 'string' ? new Date(endDate) : endDate;

  // Validate date objects
  if (Number.isNaN(start.getTime()) || Number.isNaN(end.getTime())) {
    return 0;
  }

  // Calculate absolute difference in milliseconds, then convert to days
  const diffInMs = Math.abs(end.getTime() - start.getTime());
  return Math.floor(diffInMs / (1000 * 60 * 60 * 24));
}

// Export functions for use in Rule Editor
export { getFullName, days };

Image : ajout de fonctions personnalisées au fichier functions.js.

Étapes d’intégration  :

1. Ajouter une fonction au projet

   • Créez ou modifiez /blocks/form/functions.js dans votre projet.
   • Incluez votre fonction dans l’instruction d’export.

2. Déployer et créer

   • Validez les modifications dans votre référentiel.
   • Vérifiez que le processus de création s’exécute correctement.
   • Attendez l’actualisation du cache CDN.

3. Accéder à l’éditeur de règles

   • Ouvrez l’éditeur de règles pour n’importe quel composant de formulaire.
   • Sélectionnez « Sortie de fonction » dans le menu déroulant Sélectionner une action.
   • Choisissez votre fonction personnalisée dans la liste des fonctions disponibles.
   • Configurez les paramètres de la fonction à l’aide des champs de formulaire ou de valeurs statiques.

4. Tester minutieusement

   • Prévisualisez le formulaire pour vérifier le comportement de la fonction.
   • Testez plusieurs combinaisons d’entrées, y compris des cas particuliers.
   • Vérifiez l’impact des performances sur le chargement et l’interaction du formulaire.

Image : sélection et configuration de fonctions personnalisées dans l’interface de l’éditeur de règles.

Bonnes pratiques relatives à l’utilisation des fonctions  :

• Gestion des erreurs  : incluez toujours un comportement de secours pour les échecs de fonction.
• Performances  : profilez les fonctions avec des volumes de données réalistes.
• Sécurité  : validez toutes les entrées pour éviter les vulnérabilités de sécurité.
• Tests  : créez des cas de test couvrant les cas normaux et les cas particuliers.

• Réduisez la complexité des règles ; divisez une logique volumineuse en règles petites et ciblées.
• Classez les règles par fréquence (les plus courantes en premier).
• Maintenez gérables les jeux de règles par composant.
• Préférez les fonctions personnalisées réutilisables à la duplication de logique.

• Fournissez une validation claire et des commentaires intégrés.
• Évitez les modifications visuelles discordantes ; utilisez l’option Afficher/masquer avec précaution.
• Testez sur plusieurs appareils et dispositions.

• Testez avec des cas particuliers et des valeurs connues.
• Vérifiez sur plusieurs navigateurs.
• Documentez l’intention derrière des règles complexes, pas seulement la mécanique.
• Tenez à jour un inventaire de règles pour les formulaires volumineux.
• Utilisez des noms cohérents pour les composants et les règles.
• Gérez les versions des fonctions personnalisées et testez-les dans des environnements hors production.

• Vérifiez les noms et les références des composants.
• Vérifiez l’ordre d’exécution (de haut en bas).
• Validez les conditions avec des valeurs connues.
• Inspectez la console du navigateur pour détecter les erreurs de blocage.

• Vérifiez les opérateurs et le regroupement (ET/OU).
• Testez individuellement les fragments d’expression.
• Confirmez les types de données (nombres ou chaînes).

• Simplifiez les conditions profondément imbriquées.
• Profilez les fonctions personnalisées.
• Réduisez les appels externes dans les règles.
• Utilisez des sélecteurs et des références spécifiques.

• Vérifiez le chemin d’accès au fichier : /blocks/form/functions.js.
• Vérifiez que les exports nommés sont corrects.
• Vérifiez que la version inclut vos modifications.
• Effacez la mémoire cache du navigateur après le déploiement.
• Validez les types de paramètres et la gestion des erreurs.

• Vérifiez que l’extension de l’éditeur de règles est activée.
• Sélectionnez un composant pris en charge.
• Utilisez un navigateur pris en charge (Chrome, Firefox, Safari).
• Vérifiez que vous disposez des autorisations requises.

Limites importantes

Résumé

L’éditeur de règles de l’éditeur universel transforme les formulaires statiques en expériences intelligentes et réactives qui s’adaptent à la saisie des utilisateurs et utilisatrices en temps réel. En utilisant une logique conditionnelle, des calculs automatisés et des règles d’entreprise personnalisées, vous pouvez créer des workflows de formulaire sophistiqués sans écrire de code d’application.

Fonctionnalités clés que vous avez apprises  :

• Logique conditionnelle  : afficher et masquer des champs en fonction des entrées de l’utilisateur ou de l’utilisatrice pour créer des expériences ciblées et pertinentes.
• Calculs dynamiques  : calculer automatiquement les valeurs (taxes, totaux, taux) lorsque les utilisateurs et utilisatrices interagissent avec le formulaire.
• Validation des données  : implémenter la validation en temps réel avec des messages de commentaires clairs et exploitables.
• Fonctions personnalisées  : étendre les fonctionnalités de JavaScript pour une logique commerciale et des intégrations complexes.
• Optimisation des performances  : appliquer les bonnes pratiques pour un développement durable et efficace des règles.

Valeur apportée  :

• Expérience d’utilisation améliorée  : réduire la charge cognitive grâce à la divulgation progressive et aux flux de formulaires intelligents.
• Réduction des erreurs  : empêcher les envois non valides par le biais de la validation en temps réel et de l’entrée guidée.
• Efficacité améliorée  : automatiser les calculs et la saisie des données pour réduire les efforts des utilisateurs et utilisatrices.
• Solutions gérables  : créer des règles réutilisables et bien documentées qui s’appliquent à l’ensemble de votre entreprise.

Impact commercial  :

Les formulaires deviennent des outils puissants pour la collecte de données, la qualification des prospects et l’interaction client. L’éditeur de règles permet aux créateurs et créatrices non spécialistes d’implémenter une logique commerciale sophistiquée, réduisant les coûts de développement tout en améliorant les taux de remplissage des formulaires et la qualité des données.