Een headless-formulier maken en voorvertonen met een React-app introduction

Met de startkit kunt u snel aan de slag met een React-app. U kunt Headless Adaptive-formulieren ontwikkelen en gebruiken in een Angular, Vanilla JS en andere ontwikkelomgevingen van uw keuze.

Vanaf Headless Adaptive Forms is dit heel eenvoudig en snel. Kloon het kant-en-klare React project, installeer de gebiedsdelen, en stel het project in werking. U hebt een Headless Adaptive-formulier dat in een React-app is geïntegreerd. U kunt het steekproefreactieproject gebruiken om Zwaartepunt te bouwen en te testen - adaptieve vormen alvorens het in een productiemilieu op te stellen.

Laten we beginnen:

Voordat u begint pre-requisites

Als u een React-app wilt maken en uitvoeren, moet het volgende op uw computer zijn geïnstalleerd:

Aan de slag

Wanneer u aan de vereisten voldoet, voert u de volgende stappen uit om aan de slag te gaan:

​1. Startkit voor Zwaarloze adaptieve formulieren instellen install

De startkit is een React-app met een voorbeeld van een adaptief formulier zonder koptekst en de bijbehorende bibliotheken. Gebruik de kit om uw Headless Adaptive-formulieren en bijbehorende React-componenten te ontwikkelen en te testen. Voer de volgende opdrachten uit om de startkit voor Zoogloze adaptieve formulieren in te stellen:

​2. Geef een voorvertoning weer van het adaptieve formulier zonder koptekst preview

Nadat u de startkit hebt ingesteld, kunt u een voorbeeld van het blokloze adaptieve formulier weergeven en dit vervangen door uw eigen aangepaste formulier. U kunt ook de startkit configureren om een formulier op te halen van een AEM Forms-server. Een voorbeeld van het formulier bekijken

​3. Maak en geef uw eigen Zwaarloze Adaptieve vorm custom

Een koploos adaptief formulier vertegenwoordigt het formulier en de componenten ervan, zoals velden en knoppen, in de indeling JSON (JavaScript Object Notation). Het voordeel van de JSON-indeling is dat deze eenvoudig kan worden geparseerd en gebruikt door verschillende programmeertalen, waardoor het een handige manier is om formuliergegevens uit te wisselen tussen systemen. Open het /react-starter-kit-aem-headless-forms/form-definations/form-model.json -bestand als u het voorbeeldformulier Koploos adaptief wilt weergeven dat bij de app wordt geleverd.

Maak een Contact Us -formulier met vier velden: "Naam", "E-mail", "Contactnummer" en "Bericht". De velden worden gedefinieerd als objecten (items) in de JSON, waarbij elk object (item) eigenschappen heeft zoals type, label, naam en vereiste waarden. Het formulier heeft ook een knop van het type "submit". Hier is de JSON voor het formulier.

{
  "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"
    }
  }
}

Als u het formulier wilt genereren, vervangt u het voorbeeld Koploos adaptief formulier JSON /react-starter-kit-aem-headless-forms/form-definations/form-model.json door de bovenstaande JSON, slaat u het bestand op, wacht u tot de startkit het formulier heeft gecompileerd en vernieuwt u het.

U hebt met succes het Headless Adaptive-formulier gegenereerd.

Bonus

Stel de titel van de webpagina waarop het formulier zich bevindt in op Contact Us | WKND Adventures and Travel . Om de titel te veranderen, open het react-starter-kit-aem-headless-forms/public/index.html dossier voor het uitgeven en plaats de titel.

Volgende stap

Door gebrek, gebruikt de aanzetuitrusting Adobecomponenten van het Spectrum om de vorm terug te geven. U kunt uw eigen componenten of componenten van derden maken en gebruiken. Bijvoorbeeld met Google Material UI of Chakra UI.

Laten wij materiaal UI van Googlegebruiken om de Contact Us vorm terug te geven.