Skapa och förhandsgranska ett Headless-formulär med en React-app introduction

Startsatsen hjälper dig att komma igång snabbt med en React-app. Du kan utveckla och använda Headless Adaptive-formulär i Angular, Vanilla JS och andra utvecklingsmiljöer.

Att börja med Headless Adaptive forms är enkelt och snabbt. Klona det färdiga React-projektet, installera beroendena och kör projektet. Du har ett Headless Adaptive-formulär som är integrerat i en React-app. Du kan använda exempelprojektet för att skapa och testa Headless Adaptive-formulär innan du distribuerar dem i en produktionsmiljö.

Låt oss börja:

Innan du börjar pre-requisites

Om du vill skapa och köra en React-app bör du ha följande installerat på datorn:

Kom igång

Så här kommer du igång:

​1. Konfigurera startpaket för Headless Adaptive forms install

Startsatsen är en React-app med exempelformuläret Headless Adaptive och motsvarande bibliotek. Använd paketet för att utveckla och testa dina Headless Adaptive-formulär och motsvarande React-komponenter. Kör följande kommandon för att konfigurera startsverktyget för Headless Adaptive-formulär:

​2. Förhandsgranska den Headless Adaptive-formen preview

När du har konfigurerat startpaketet kan du förhandsgranska den Headless Adaptive-formen och ersätta den med en egen anpassad form. Du kan också konfigurera startsatsen för att hämta ett formulär från en AEM Forms-server. Förhandsgranska formuläret

​3. Skapa och återge en egen Headless Adaptive-form custom

Ett Headless Adaptive-formulär representerar formuläret och dess komponenter, till exempel fält och knappar, i JSON-format (JavaScript Object Notation). Fördelen med JSON-formatet är att det enkelt kan tolkas och användas av olika programmeringsspråk, vilket gör det enkelt att utbyta formulärdata mellan system. Om du vill visa exempelformuläret Headless Adaptive som ingår i appen öppnar du filen /react-starter-kit-aem-headless-forms/form-definations/form-model.json.

Låt oss skapa ett Contact Us-formulär med fyra fält: Namn, E-post, Kontaktnummer och Meddelande. Fälten definieras som objekt (objekt) i JSON, där varje objekt (objekt) har egenskaper som typ, etikett, namn och obligatoriskt. Formuläret har också en knapp av typen "skicka". Här är formulärets JSON.

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

Om du vill återge formuläret ersätter du exempelformuläret Headless Adaptive från JSON /react-starter-kit-aem-headless-forms/form-definations/form-model.json med ovanstående JSON, sparar filen, väntar på att starter-kit ska kompilera och uppdatera formuläret.

Du har återgett formen Headless Adaptive.

Bonus

Vi ställer in titeln på webbsidan som är värd för formuläret till Contact Us | WKND Adventures and Travel. Om du vill ändra titeln öppnar du filen react-starter-kit-aem-headless-forms/public/index.html för redigering och anger titeln.

Nästa steg

Som standard används Adobe Spectrum -komponenter för att återge formuläret. Du kan skapa och använda egna komponenter eller tredjepartskomponenter. Du kan till exempel använda användargränssnittet för Google-material eller Chakra-gränssnittet.

Låt oss använda Google-materialgränssnittet för att återge formuläret Contact Us.