Fonctionnement des formulaires adaptatifs découplés
Un formulaire adaptatif découplé est essentiellement une structure JSON (schéma) composée de champs de formulaire (zone de texte, choix et de nombreux autres champs) et de règles correspondantes (logique conditionnelle) pour ajouter un comportement interactif au formulaire. Vous pouvez utiliser des API REST dans votre application ou site web pour demander la structure JSON hébergée et effectuer le rendu natif de la structure JSON en tant que formulaire dans votre application ou site web. Un seul formulaire adaptatif découplé peut alimenter plusieurs pages web et applications sans qu’il soit nécessaire d’y apporter des modifications spécifiques à l’application ou au site web.
Architecture architecture
Une architecture standard de formulaires adaptatifs découplés est centrée sur un serveur Adobe Experience Manager Forms qui héberge des formulaires adaptatifs découplés. Les applications front-end (web, mobiles, JavaScript, chatbots, etc.) rendent les formulaires pour chaque canal.
L’architecture type d’un déploiement de formulaires adaptatifs découplés ressemble à ce qui suit :
Composant d’une mise en œuvre des formulaires adaptatifs découplés
Serveur Adobe Experience Manager : en plus de servir d’hôte pour les formulaires adaptatifs découplés, Adobe Experience Manager fournit les fonctionnalités back-end suivantes :
- API RESTful pour répertorier, récupérer, préremplir, valider, envoyer et suivre le statut d’envoi des formulaires découplés.
- Éditeur visuel pour développer facilement un formulaire adaptatif découplé.
- Modèle de données de formulaire pour recevoir ou envoyer des données à des sources de données disparates.
- Un moteur de workflow pour automatiser les tâches complexes.
Formulaires adaptatifs découplés : un formulaire adaptatif découplé est représenté sous la forme d’un fichier .json. La structure JSON définit les composants, les contraintes et la structure d’un formulaire.
Applications front-end : les applications front-end telles que les applications monopages, les applications mobiles et les applications JavaScript utilisent des formulaires adaptatifs découplés (la représentation de formulaire JSON) et effectuent le rendu du formulaire sur un client. Vous pouvez utiliser le composant de rendu React fourni avec les formulaires adaptatifs découplés pour effectuer le rendu d’un formulaire adaptatif ou créer votre propre composant personnalisé pour effectuer le rendu natif des formulaires adaptatifs découplés. Pour les cas d’utilisation natifs de formulaires mobiles et hors ligne, l’approche recommandée consiste à créer votre propre application et à récupérer les définitions de formulaire via l’API. Voir Bonnes pratiques relatives aux formulaires mobiles .
Outils de développement
Au cours d’un cycle de développement type, vous commencez par créer et héberger des formulaires adaptatifs découplés sur le serveur Adobe Experience Manager Forms. Ensuite, vous mappez les composants de l’interface utilisateur ou utilisez une bibliothèque de composants d’interface utilisateur publique, comme Material UI de Google ou Chakra UI, pour appliquer un style à vos formulaires. Lors de la dernière étape, vous récupérez et affichez des formulaires adaptatifs découplés dans votre application (site web, application mobile, applications JavaScript, applications conversationnelles ou de nombreuses autres surfaces).
Les outils suivants permettent de créer et d’intégrer des formulaires adaptatifs découplés à vos applications :
SDK Web Forms (Runtime côté client) : le SDK Web Forms est une bibliothèque JavaScript côté client. Il vous permet d’appliquer des validations côté client sur les champs de formulaire, de conserver l’état du formulaire et de fournir des points d’extension pour connecter le formulaire au calque de l’interface utilisateur ou au composant rendu des formulaires adaptatifs. Il permet aux clients de valider les contraintes appliquées à divers champs d’un formulaire et les points d’extension de connecter la structure JSON du formulaire au framework de l’interface utilisateur. Le SDK Web Forms comprend les composants suivants :
- Processeur des règles commerciales: le processeur des règles de fonctionnement accepte la structure JSON des formulaires en tant qu’entrée, gère le statut des champs de formulaire, exécute les règles et les gestionnaires d’événements présents dans le fichier JSON.
- React Binder : fournit des hooks au-dessus du contrôleur pour ajouter un statut aux composants de formulaire. Ce composant est également utile pour préremplir un formulaire.
- Bibliothèque de composants : elle fournit des composants React Spectrum et utilise des crochets dans le module React Binder pour ajouter un état à ces composants.
En plus de fournir les API pour valider les contraintes appliquées aux différents champs d’un formulaire, le SDK Web Forms fournit des hooks pour connecter les formulaires adaptatifs découplés au framework de l’interface utilisateur. Il fournit également un moteur de rendu React pour les formulaires adaptatifs découplés afin de faciliter l’intégration d’un formulaire adaptatif découplé à votre application. Les composants de la SDK Web disponibles sont les suivants :
Tous ces composants sont inclus dans l’archétype AEM. Lorsque vous créez un projet AEM Archetype 37 ou version ultérieure pour les formulaires adaptatifs découplés, la dernière version des bibliothèques répertoriées ci-dessus est incluse dans le projet.
- Laboratoire de code : Laboratoire de code est un environnement interactif conçu pour que les développeurs puissent tester les fonctionnalités du Forms adaptatif découplé, en apprendre davantage à son sujet et les tester.
Application commencée : Adobe a également publié une application commencée pour vous aider à démarrer rapidement avec les formulaires adaptatifs découplés.
Storybook : le storybook donne un aperçu des différents composants des formulaires adaptatifs découplés. Il fournit également la liste de tous les composants pris en charge, leurs propriétés et contraintes correspondantes.
Extension Visual Studio Code : l’extension Visual Studio Code permet de créer une structure JSON valide. Elle assure la prise en charge et la validation IntelliSense pour la structure JSON des formulaires et fournit des fonctions courantes telles que l’ajout, la suppression ou l’attribution d’un nouveau nom aux composants d’une structure JSON.
API HTTP et JavaScript : les API HTTP permettent de répertorier, d’extraire, de valider, d’envoyer et de suivre le statut d’envoi des formulaires découplés.
Formule JSON : il s’agit d’une implémentation de la grammaire d’expression des formulaires pour vous aider à interroger la structure JSON et à créer des règles pour les formulaires adaptatifs découplés. La grammaire est un mashup de fonctions et d’opérateurs de type feuille de calcul et JMESPath, un langage de requête JSON. Vous pouvez utiliser le playground pour découvrir la syntaxe et les fonctionnalités des formules JSON.
Spécifications du Forms adaptatif version 2.0 : la spécification du Forms adaptatif version 2.0 fournit des informations détaillées sur tous les composants, contraintes et méthodes disponibles pour définir les formulaires adaptatifs découplés. La spécification est disponible au format PDF.