Personnaliser les composants principaux des formulaires adaptatifs

Identifier et dupliquer le composant principal

Lors de la configuration de l’environnement de développement, vous avez créé un projet basé sur l’archétype. Dans le projet d’archétype AEM, identifiez le composant principal spécifique que vous souhaitez personnaliser. Une fois identifié, créez un duplicata du composant dans votre projet basé sur l’archétype AEM. Conservez-le en parallèle à d’autres composants principaux de formulaire adaptatif. Cette étape permet de s’assurer que vos efforts de personnalisation n’affectent pas le composant original, ce qui vous donne plus de liberté dans vos expériences.

Personnaliser le composant copié

Ouvrez le composant dupliqué et commencez à apporter les modifications nécessaires en fonction de vos besoins :

• Personnaliser la structure de HTML  : personnalisez la structure de HTML en fonction de vos besoins en matière de conception tout en respectant les bonnes pratiques en matière de style des BEM (Block Element Modifier) pour un code gérable et évolutif.
• Mettre à jour le libellé  : mettez à jour le libellé du composant pour fournir un nom clair et descriptif à la version personnalisée. Reportez-vous aux modèle de libellé prêt à l’emploi pour assurer la cohérence.
• Personnaliser le widget  : ajustez le widget utilisé dans le composant (listes déroulantes, cases à cocher) pour l’aligner sur votre cas d’utilisation spécifique. Consultez l’exemple d’implémentation de widget à titre de référence.
• Texte d’aide et info-bulles  : personnalisez le texte d’aide ou les info-bulles associés au composant pour offrir du contexte et des conseils aux utilisateurs et utilisatrices. Utilisez le modèle de texte d’aide prêt à l’emploi comme point de départ.
• Attributs de données  : incorporez tous les attributs de données nécessaires dans les éléments de HTML du composant. Ces attributs sont essentiels au bon fonctionnement du composant au moment de l’exécution. Consultez la documentation pour comprendre le rôle des attributs de données dans les composants principaux de formulaire adaptatif.

Implémenter la logique back-end

Si votre personnalisation nécessite une logique back-end, vous pouvez étendre les modèles Sling existants. Reportez-vous à l’exemple fourni pour intégrer de manière transparente la fonctionnalité souhaitée à votre composant personnalisé.

Configurer la boîte de dialogue du composant

Configurez la boîte de dialogue associée à votre composant personnalisé. Utilisez l’exemple de boîte de dialogue du composant fourni dans la documentation pour garantir que les interactions et les paramètres d’utilisation sont gérés de manière appropriée.

Déployer et tester le composant dans votre environnement de développement local

Utilisez Maven pour créer et déployer le composant dans votre environnement de développement local. Une fois le composant déployé, créez un formulaire adaptatif pour tester le composant personnalisé.

Déployer le composant personnalisé dans votre environnement de production

Après avoir testé le composant dans votre environnement de développement local, déployez-le dans vos environnements de production.