Créer et prévisualiser un formulaire découplé à l’aide d’une application React introduction

Le kit de démarrage vous permet de commencer rapidement à l’aide d’une application React. Vous êtes libre de développer et d’utiliser des formulaires adaptatifs découplés dans un environnement de développement Angular, Vanilla JS ou autre de votre choix.

La création de formulaires adaptatifs découplés est simple et rapide. Clonez le projet React prêt à l’emploi, installez les dépendances et exécutez le projet. Vous disposez d’un formulaire adaptatif découplé intégré à une application React opérationnelle. Vous pouvez utiliser l’exemple de projet React pour créer et tester des formulaires adaptatifs découplés avant de les déployer dans un environnement de production.

C’est parti !

Avant de commencer pre-requisites

Pour créer et exécuter une application React, les éléments suivants doivent être installés sur votre ordinateur :

Prise en main

Une fois les conditions remplies, procédez comme suit pour commencer :

1. Configurer le kit de démarrage de formulaires adaptatifs découplés install

Le kit de démarrage est une application React comprenant un exemple de formulaire adaptatif découplé et les bibliothèques correspondantes. Utilisez le kit pour développer et tester vos formulaires adaptatifs découplés et les composants React correspondants. Exécutez les commandes suivantes pour configurer le kit de démarrage de formulaires adaptatifs découplés :

2. Prévisualiser le formulaire adaptatif découplé preview

Une fois que vous avez configuré le kit de démarrage, vous pouvez prévisualiser l’exemple de formulaire adaptatif découplé et le remplacer par votre propre formulaire personnalisé. Vous pouvez également configurer le kit de démarrage pour récupérer un formulaire à partir d’un serveur AEM Forms. Pour prévisualiser le formulaire

3. Créer et générer votre propre formulaire adaptatif découplé custom

Un formulaire adaptatif découplé représente le formulaire et ses composants, tels que les champs et les boutons, au format JSON (JavaScript Object Notation). L’avantage du format JSON est qu’il peut être facilement analysé et utilisé par divers langages de programmation, ce qui en fait un moyen pratique d’échanger des données de formulaire entre systèmes. Pour afficher l’exemple de formulaire adaptatif découplé fourni avec l’application, ouvrez le fichier /react-starter-kit-aem-headless-forms/form-definations/form-model.json.

Créez un formulaire de contact comportant quatre champs : Nom, E-mail, N° de contact et Message. Les champs sont définis comme des objets (éléments) au sein de JSON, chaque objet (élément) ayant des propriétés telles que le type, le libellé, le nom et l’exigence. Le formulaire comporte également un bouton de type « envoi ». Voici le code JSON du formulaire.

{
  "afModelDefinition": {
    "adaptiveform": "0.10.0",
    "items": [
      {
        "fieldType": "text-input",
        "label": {
          "value": "Name"
        },
        "name": "name"
      },
      {
        "fieldType": "text-input",
        "format": "email",
        "label": {
          "value": "Email"
        },
        "name": "email"
      },
      {
        "fieldType": "text-input",
        "format": "phone",
        "pattern": "[0-9]{10}",
        "label": {
          "value": "Contact Number"
        },
        "name": "Phone"
      },
      {
        "fieldType": "multiline-input",
        "label": {
          "value":"Message"
        },
        "name": "message"
      },
      {
        "fieldType": "button",
        "label":{
          "value": "Submit"
        },
        "name":"submit",
        "events":{
          "click": "submitForm()"
        }
      }
    ],
    "action": "https://eozrmb1rwsmofct.m.pipedream.net",
    "description": "Contact Us",
    "title": "Contact Us",
    "metadata": {
      "grammar": "json-formula-1.0.0",
      "version": "1.0.0"
    }
  }
}

Pour effectuer le rendu du formulaire, remplacez l’exemple de formulaire adaptatif découplé JSON /react-starter-kit-aem-headless-forms/form-definations/form-model.json par le fichier JSON ci-dessus, enregistrez le fichier et attendez que le kit de démarrage compile et actualise le formulaire.

.

Vous avez réussi à effectuer le rendu du formulaire adaptatif découplé.

Bonus

Définissons le titre de la page web hébergeant le formulaire sur Contact Us | WKND Adventures and Travel. Pour modifier le titre, ouvrez le fichier react-starter-kit-aem-headless-forms/public/index.html pour modifier et définir le titre.

Étape suivante

Par défaut, le kit de démarrage utilise les composants Spectrum d’Adobe pour générer le formulaire. Vous pouvez pour créer et utiliser vos propres composants ou des composants tiers. Par exemple, à l’aide de Material UI de Google ou de Chakra UI.

Nous allons utiliser Material UI de Google pour générer le formulaire de contact.