Création de fragments de formulaire dans l’éditeur universel

Les fragments de formulaire sont des composants réutilisables qui éliminent le travail de développement répétitif et assurent la cohérence entre les formulaires de votre entreprise. Au lieu de recréer des sections courantes telles que les informations de contact, les détails d’adresse ou les accords de consentement pour chaque formulaire, vous pouvez créer ces éléments une fois sous forme de fragments et les réutiliser dans plusieurs formulaires.

Ce que vous accomplirez dans cet article :

  • Comprendre la valeur commerciale et les fonctionnalités techniques des fragments de formulaire
  • Créer des fragments de formulaire réutilisables à l’aide de l’éditeur universel
  • Intégrer des fragments dans des formulaires existants avec la configuration appropriée
  • Gérer le cycle de vie des fragments et maintenir la cohérence entre les formulaires

Avantages commerciaux :

  • Temps de développement réduit  : créer des sections de formulaire courantes une fois et les réutiliser partout.
  • Amélioration de la cohérence  : dispositions et contenu normalisés dans tous les formulaires
  • Maintenance simplifiée  : mettez à jour un fragment une seule fois pour refléter les modifications dans tous les formulaires qui l’utilisent.
  • Conformité améliorée  : assurez-vous que les sections réglementaires restent cohérentes et à jour.

Les fragments de formulaire dans Edge Delivery Services prennent en charge des fonctionnalités avancées, notamment les fragments imbriqués, plusieurs instances au sein d’un seul formulaire et une intégration transparente aux sources de données.

Compréhension des fragments de formulaire

Les fragments de formulaire dans Edge Delivery Services offrent de puissantes fonctionnalités pour le développement de formulaires modulaires :

Fonctionnalités principales :

  • Gestion de la cohérence  : les fragments conservent des dispositions et un contenu identiques dans plusieurs formulaires. Avec une approche « Modifier une fois, refléter partout », les mises à jour d’un fragment s’appliquent automatiquement à tous les formulaires en mode Aperçu.
  • Utilisation multiple  : ajoutez le même fragment plusieurs fois dans un seul formulaire, chacun avec des données indépendantes se liant à différentes sources de données ou éléments de schéma.
  • Structures imbriquées  : créez des hiérarchies complexes en incorporant des fragments dans d’autres fragments pour des architectures de formulaire sophistiquées.

Exigences techniques :

  • Cohérence d’URL GitHub  : le fragment et tout formulaire l’utilisant doivent spécifier la même URL de référentiel GitHub.
  • Modification autonome  : les fragments ne peuvent être modifiés que dans leur formulaire autonome ; les modifications ne peuvent pas être apportées dans le formulaire hôte.

Comportement de la publication :

IMPORTANT
En mode Aperçu, les modifications de fragment sont immédiatement répercutées sur tous les formulaires. En mode Publication, vous devez republier le fragment et les formulaires qui l’utilisent pour afficher les mises à jour.
CAUTION
Évitez les références de fragment récursives (imbrication d’un fragment dans lui-même), car cela entraîne des erreurs de rendu et un comportement inattendu.

Prérequis

Exigences techniques en matière de configuration :

  • Référentiel GitHub configuré avec une connexion établie entre votre environnement AEM et le référentiel GitHub
  • Dernier bloc de formulaires adaptatifs ajouté à votre référentiel GitHub (pour les projets Edge Delivery Services existants)
  • Instance de création AEM Forms avec modèle Edge Delivery Services disponible
  • Accès à l’URL de votre instance de création AEM Forms as a Cloud Service et à l’URL du référentiel GitHub

Connaissances et autorisations requises :

  • Compréhension de base des concepts de conception de formulaire et de la hiérarchie des composants
  • Familiarité avec l’interface de l’éditeur universel et les workflows de création de formulaires
  • Autorisations au niveau de la création dans AEM Forms pour créer et gérer des ressources de formulaire
  • Compréhension des normes de formulaire de votre entreprise et des exigences en matière de composants réutilisables

Utilisation de fragments de formulaire Edge Delivery Services

Vous pouvez créer des fragments de formulaire Edge Delivery Services dans l’éditeur universel et ajouter les fragments créés aux formulaires Edge Delivery Services. Vous pouvez effectuer les actions suivantes avec les fragments de formulaire Edge Delivery Services :

Création de fragments de formulaire

Pour créer un fragment de formulaire dans l’éditeur universel, procédez comme suit :

  1. Connectez-vous à votre instance de création AEM Forms as a Cloud Service.

  2. Sélectionnez Adobe Experience Manager  > Formulaires  > Formulaires et documents.

  3. Cliquez sur Créer > Fragment de formulaire adaptatif.

    Création d’un fragment

    L’assistant Créer un fragment de formulaire adaptatif s’affiche.

  4. Sélectionnez le modèle basé sur Egde Delivery Services dans l’onglet Sélectionner le modèle et cliquez sur Suivant.
    Sélection de modèle Edge Delivery Services

  5. Indiquez le titre, le nom, la description et les balises du fragment. Assurez-vous de spécifier un nom unique pour le fragment. S’il existe déjà un autre fragment portant le même nom, la création du fragment échoue.

  6. Spécifiez l’URL GitHub. Par exemple, si votre référentiel GitHub est nommé edsforms, il se trouve sous le compte wkndforms, avec l’URL https://github.com/wkndforms/edsforms.

    Propriétés de base

  7. (Facultatif) Cliquez pour ouvrir l’onglet Modèle de formulaire, puis dans le menu déroulant Choisir parmi, sélectionnez l’un des modèles de fragment suivants :

    Affichage du type de modèle dans l’onglet Modèle de formulaire

    • Modèle de données de formulaire (FDM)  : intégrez des objets et des services de modèle de données provenant de sources de données dans votre fragment. Choisissez le modèle de données de formulaire (FDM) si votre formulaire nécessite la lecture et l’écriture de données provenant de plusieurs sources.

    • Schéma JSON  : intégrez votre formulaire à un système back-end en associant un schéma JSON qui définit la structure des données. Cela vous permet d’ajouter du contenu dynamique à l’aide des éléments de schéma.

    • Aucun  : indique que le fragment doit être créé de zéro sans utiliser de modèle de formulaire.

    note note
    NOTE
    Pour savoir comment intégrer des formulaires ou des fragments à un modèle de données de formulaire (FDM) dans l’éditeur universel afin d’utiliser diverses sources de données back-end, consultez Intégrer des formulaires avec le modèle de données de formulaire dans l’éditeur universel.
  8. (Facultatif) Spécifiez la Date de publication ou la Date de dépublication du fragment dans l’onglet Avancé.

    Onglet Avancé

  9. Cliquez sur Créer pour générer le fragment. Une boîte de dialogue de réussite s’affiche avec les options de modification.

    Modification de fragment

  10. Cliquez sur Modifier pour ouvrir le fragment dans l’éditeur universel avec le modèle par défaut appliqué.

    Fragment dans l’éditeur universel en vue de la création

  11. Concevoir le contenu de votre fragment  : ajoutez des composants de formulaire (champs de texte, listes déroulantes, cases à cocher) pour créer la section réutilisable. Pour obtenir des conseils détaillés sur les composants, consultez Prise en main d’Edge Delivery Services pour AEM Forms à l’aide de l’éditeur universel.

  12. Configurer les propriétés du composant  : définissez les noms de champ, les règles de validation et les valeurs par défaut en fonction de votre cas d’utilisation.

  13. Enregistrer et prévisualiser  : enregistrez votre fragment et utilisez le mode Aperçu pour vérifier la disposition et la fonctionnalité.

    Copie d’écran d’un fragment de formulaire de coordonnées terminé dans l’éditeur universel, affichant les champs Nom, Téléphone, E-mail et Adresse qui peuvent être réutilisés dans plusieurs formulaires.

Points de contrôle de validation :

  • Le fragment se charge sans erreur dans l’éditeur universel.
  • Tous les composants de formulaire s’affichent correctement.
  • Les propriétés des champs et les règles de validation fonctionnent comme prévu.
  • Le fragment est enregistré et disponible dans la console Formulaires et documents.

Une fois votre fragment terminé, vous pouvez l’intégrer dans n’importe quel formulaire Edge Delivery Services.

Ajout de fragments de formulaire dans un formulaire

Cet exemple illustre la création d’un formulaire Employee Details qui utilise le fragment Contact Details pour les sections d’informations du personnel et des superviseurs et superviseuses. Cette approche garantit la cohérence de la collecte de données tout en réduisant les efforts de développement.

Pour intégrer un fragment de formulaire dans votre formulaire :

  1. Ouvrez le formulaire en mode d’édition.

  2. Ajoutez le composant Fragment de formulaire au formulaire.

  3. Ouvrez l’explorateur de contenu et accédez au composant Formulaire adaptatif dans l’arborescence de contenu.

  4. Accédez à la section dans laquelle vous avez l’intention d’ajouter un fragment. Par exemple, accédez au panneau Détails de la personne employée.

    Accès à la section

  5. Cliquez sur l’icône Ajouter et ajoutez le composant Fragment de formulaire dans la liste Composants de formulaire adaptatif.
    Ajout d’un fragment de formulaire

    Lorsque vous sélectionnez le composant Fragment de formulaire, le fragment est ajouté à votre formulaire. Vous pouvez configurer les propriétés du fragment ajouté en ouvrant ses Propriétés. Par exemple, masquez le titre du fragment à partir de ses Propriétés.

    Configuration des propriétés du fragment

  6. Sélectionnez la Référence de fragment dans l’onglet De base. Tous les fragments de formulaires disponibles pour votre formulaire, selon le modèle du formulaire, s’affichent.

    Par exemple, accédez à /content/forms/af et sélectionnez le fragment Contact Details.

    Sélection d’un fragment

  7. Cliquez sur Sélectionner.

    Le fragment de formulaire est ajouté par référence au formulaire et est synchronisé avec le fragment de formulaire autonome.

    Copie d’écran montrant le fragment relatif aux coordonnées, intégré au formulaire des effectifs d’un salarié ou d’une salariée dans l’éditeur universel, présentant la façon dont les fragments conservent leur structure lorsqu’ils sont réutilisés.

    note note
    NOTE
    Le bouton Modifier le fragment permet aux utilisateurs et utilisatrices d’accéder directement au fragment de formulaire pour le modifier.

    Vous pouvez prévisualiser le formulaire pour découvrir comment il s’affiche en mode Prévisualisation.

    Prévisualisation

    De même, vous pouvez répéter les étapes 3 à 7 pour insérer le fragment Contact Details pour le panneau Supervisor Details.

    Formulaire Informations de la personne employée

Gestion de fragments de formulaire

Vous pouvez effectuer plusieurs opérations sur des fragments de formulaire depuis l’interface d’utilisation d’AEM Forms.

  1. Connectez-vous à votre instance de création AEM Forms as a Cloud Service.

  2. Sélectionnez Adobe Experience Manager  > Formulaires  > Formulaires et documents.

  3. Sélectionnez un fragment de formulaire et la barre d’outils affiche les opérations suivantes que vous pouvez effectuer sur le fragment sélectionné.

    Gestion du fragment

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 html-authored no-header
    Opération Description
    Modifier Ouvre le fragment de formulaire en mode d’édition.
    Propriétés Fournit des options pour modifier les propriétés du fragment de formulaire.
    Copier Fournit des options pour copier le fragment de formulaire et le coller à l’emplacement souhaité.
    Prévisualisation Fournit des options de prévisualisation du fragment en HTML ou une prévisualisation personnalisée en fusionnant les données d’un fichier XML avec le fragment.
    Téléchargement Télécharge le fragment sélectionné.
    Démarrer la révision/Gérer la révision Permet de lancer et de gérer la révision du fragment sélectionné.
    Publier/Dépublier Publie/annule la publication du fragment sélectionné.
    Supprimer Supprime le fragment sélectionné.
    Comparer Compare deux fragments de formulaire différents à des fins de prévisualisation.

Bonnes pratiques

Conception de fragment et dénomination :

  • Utiliser des noms descriptifs et uniques  : choisissez des noms qui indiquent clairement l’objectif du fragment (par exemple, « coordonnées-avec-validation » plutôt que « fragment1 »).
  • Planifier la réutilisation  : concevez les fragments de manière à ce qu’ils soient indépendants du contexte et conviennent ainsi à différents types de formulaires.
  • Destiner les fragments à un objectif précis  : créez des fragments à usage unique plutôt que des composants complexes et multifonctions.

Workflow de développement :

  • Tester les fragments indépendamment  : vérifiez la fonctionnalité du fragment avant de l’intégrer aux formulaires.
  • Maintenir la cohérence des URL GitHub  : assurez-vous que la même URL de référentiel est utilisée sur tous les fragments et formulaires associés.
  • Objectif du fragment de document  : incluez des descriptions et des balises claires pour aider les personnes membres de l’équipe à comprendre quand utiliser chaque fragment.

Publication et maintenance :

  • Coordonner la publication  : lors de la mise à jour des fragments, prévoyez de republier simultanément tous les formulaires dépendants.
  • Gestion de versions  : utilisez des messages de validation significatifs lors de la mise à jour des fragments pour suivre les modifications au fil du temps.
  • Surveiller les dépendances  : suivez les formulaires qui utilisent chaque fragment pour évaluer l’impact de la mise à jour.
TIP
Les styles, scripts et expressions de fragment sont conservés lorsqu’ils sont incorporés. Concevez donc avec cet héritage à l’esprit.

Résumé

Vous avez appris à utiliser les fragments de formulaire dans Edge Delivery Services pour améliorer l’efficacité du développement et maintenir la cohérence entre les formulaires de votre entreprise.

Accomplissements clés :

  • Compréhension  : compréhension de la valeur commerciale et des fonctionnalités techniques des fragments de formulaire.
  • Création  : création de fragments de formulaire réutilisables à l’aide de l’éditeur universel avec la configuration appropriée.
  • Intégration  : ajout de fragments aux formulaires avec une configuration de référence et de propriété correcte.
  • Gestion  : apprentissage des opérations du cycle de vie des fragments et des workflows de maintenance.

Étapes suivantes :

  • Créer une bibliothèque de fragments couramment utilisés pour votre organisation.
  • Définir des conventions de nommage et des politiques de gouvernance pour l’utilisation des fragments.
  • Explorer une intégration avancée avec les modèles de données de formulaire pour les fragments dynamiques pilotés par les données
  • Mettre en œuvre des modèles de formulaire basés sur des fragments pour des expériences d’utilisation cohérentes.

Vos formulaires bénéficient désormais d’une architecture modulaire et gérable qui s’adapte efficacement à l’ensemble des projets tout en assurant des expériences d’utilisation cohérentes.

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab