Erstellen und Anzeigen einer Vorschau eines Headless-Formulars mit einer React-App introduction

Das Starterkit hilft Ihnen bei den ersten Schritten mit einer React-App. Es steht Ihnen frei, adaptive Headless-Formulare in einer Angular-, Vanilla JS- und anderen Entwicklungsumgebungen Ihrer Wahl zu entwickeln und zu verwenden.

Mit adaptiven Headless-Formularen zu beginnen ist ziemlich einfach und schnell. Klonen Sie das fertige React-Projekt, installieren Sie die Abhängigkeiten und führen Sie das Projekt aus. Sie haben ein adaptives Headless-Formular, das in eine React-App integriert ist, die ausgeführt wird. Sie können das React-Beispielprojekt verwenden, um adaptive Headless-Formulare zu erstellen und zu testen, bevor Sie sie in einer Produktionsumgebung bereitstellen.

Fangen wir an:

Bevor Sie beginnen pre-requisites

Um eine React-App zu erstellen und auszuführen, muss auf Ihrem Computer Folgendes installiert sein:

Erste Schritte

Nachdem die Anforderungen erfüllt sind, führen Sie die folgenden Schritte aus, um zu beginnen:

​1. Einrichten des Headless-Starter-Kits für adaptive Formulare install

Das Starter Kit ist eine React-App mit einem Beispiel-Headless-adaptiven Formular und entsprechenden Bibliotheken. Verwenden Sie das Kit, um Ihre adaptiven Headless-Formulare und die entsprechenden React-Komponenten zu entwickeln und zu testen. Führen Sie die folgenden Befehle aus, um das Starter Kit für adaptive Headless-Formulare einzurichten:

​2. Vorschau des adaptiven Headless-Formulars preview

Nach der Einrichtung des Starter Kits können Sie eine Vorschau des adaptiven Headless-Beispielformulars anzeigen und es durch Ihr eigenes benutzerdefiniertes Formular ersetzen. Sie können auch das Starterkit konfigurieren, um ein Formular von einem AEM Forms-Server abzurufen. So zeigen Sie eine Vorschau des Formulars an

​3. Erstellen und Rendern Ihres eigenen adaptiven Headless-Formulars custom

Ein adaptives Headless-Formular stellt das Formular und seine Komponenten (z. B. Felder und Schaltflächen) im JSON-Format (JavaScript Object Notation) dar. Der Vorteil der Verwendung des JSON-Formats besteht darin, dass es einfach geparst und von verschiedenen Programmiersprachen verwendet werden kann, was es zu einer bequemen Möglichkeit macht, Formulardaten zwischen Systemen auszutauschen. Öffnen Sie die /react-starter-kit-aem-headless-forms/form-definations/form-model.json-Datei, um das in der App enthaltene Beispiel-Headless-adaptive Formular anzuzeigen.

Erstellen wir ein Contact Us Formular mit vier Feldern: „Name“, „E-Mail“, „Kontaktnummer“ und „Nachricht“. Die Felder werden als Objekte (Elemente) innerhalb der JSON-Datei definiert, wobei jedes Objekt (Element) Eigenschaften aufweist, wie „Typ“, „Bezeichnung“, „Name“ und „Erforderlich“. Das Formular enthält auch eine Schaltfläche vom Typ „Senden“. Hier finden Sie die JSON für das Formular.

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

Um das Formular wiederzugeben, ersetzen Sie das Beispiel-JSON-/react-starter-kit-aem-headless-forms/form-definations/form-model.json für adaptive Headless-Formulare durch das obige JSON, speichern Sie die Datei, warten Sie, bis das Starter-Kit kompiliert und das Formular aktualisiert wird.

Sie haben das adaptive Headless-Formular erfolgreich gerendert.

Bonus

Legen wir den Titel der Web-Seite, die das Formular hostet, auf Contact Us | WKND Adventures and Travel fest. Um den Titel zu ändern, öffnen Sie die Datei react-starter-kit-aem-headless-forms/public/index.html zur Bearbeitung und legen Sie den Titel fest.

Nächster Schritt

Standardmäßig verwendet das Starterkit Adobe-Komponenten zum Rendern des Formulars. Sie können eigene Komponenten oder Komponenten von Drittanbietern erstellen und verwenden. Beispielsweise die Google Material-Benutzeroberfläche oder die Chakra-Benutzeroberfläche.

Rufen wir Google Material-Benutzeroberfläche verwenden auf, um das Contact Us Formular zu rendern.