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. Sie können adaptive Headless-Formulare in einer Angular-, Vanilla JS- und anderen Entwicklungsumgebungen Ihrer Wahl entwickeln und verwenden.

Der Einstieg in adaptive Headless-Formulare ist ziemlich einfach und schnell. Klonen Sie das fertige React-Projekt, installieren Sie die Abhängigkeiten und führen Sie das Projekt aus. Sie verfügen über ein adaptives Headless-Formular, das in eine React-App integriert ist. Sie können das React-Beispielprojekt verwenden, um adaptive Headless-Formulare zu erstellen und zu testen, bevor Sie diese 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 Starterkits für adaptive Headless-Formulare install

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

2. Anzeigen des adaptiven Headless-Formulars in der Vorschau preview

Nachdem Sie das Starterkit eingerichtet haben, 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 eines eigenen adaptiven Headless-Formulars custom

Ein adaptives Headless-Formular stellt das Formular und seine Komponenten, wie Felder und Schaltflächen, im JSON-Format (JavaScript Object Notation) dar. Der Vorteil der Verwendung des JSON-Formats besteht darin, dass es von verschiedenen Programmiersprachen einfach analysiert und verwendet werden kann, sodass Formulardaten bequem zwischen Systemen ausgetauscht werden können. Um das in der App enthaltene adaptive Headless-Beispielformular anzuzeigen, öffnen Sie die Datei /react-starter-kit-aem-headless-forms/form-definations/form-model.json.

Erstellen wir ein Kontaktformular 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 verfügt auch über eine Schaltfläche vom Typ „Übermitteln“. 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 zu rendern, ersetzen Sie die JSON-Musterdatei für das adaptive Headless-Formular /react-starter-kit-aem-headless-forms/form-definations/form-model.json durch die obige JSON, speichern Sie die Datei und warten Sie, bis das Starterkit das Formular kompiliert und aktualisiert hat.

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 Ihre eigenen Komponenten erstellen und verwenden oder auch Drittanbieterkomponenten. Beispielsweise die Google Material-Benutzeroberfläche oder die Chakra-Benutzeroberfläche.

Nutzen wir die Google Material-Benutzeroberfläche, um unser Kontaktformular zu rendern.