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-anpassade formulär i en Angular, Vanilla JS och andra utvecklingsmiljöer som du själv väljer.

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-anpassat formulär som är integrerat i en React-app. Du kan använda exempelprojektet för att skapa och testa Headless-adaptiva 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 ett exempel på Headless-anpassningsbart formulär och motsvarande bibliotek. Använd paketet för att utveckla och testa formulär för Headless-anpassning och motsvarande React-komponenter. Kör följande kommandon för att konfigurera startkit för Headless-anpassade formulär:

2. Förhandsgranska den Headless-anpassade formen preview

När du har konfigurerat startpaketet kan du förhandsgranska det Headless-anpassade formuläret och ersätta det med din egen anpassade 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-blankett custom

Ett anpassat formulär utan rubrik 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 kontaktformulä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 JSON för formuläret.

{
  "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 det Headless-anpassade formuläret 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 renderat den Headless Adaptive-formen.

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änder startsatsen Adobe Spectrum -komponenter för att återge formuläret. Du kan använda för att 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 användargränssnittet för Google-material för att återge formuläret Kontakta oss.