Creare e visualizzare in anteprima un modulo headless tramite un’app React introduction

Il kit di avvio ti aiuta a iniziare rapidamente a utilizzare un’app React. Puoi sviluppare e utilizzare moduli adattivi headless in un Angular, in Vanilla JS e in altri ambienti di sviluppo di tua scelta.

Iniziare a utilizzare moduli adattivi headless è molto semplice e rapido. Clona il progetto React pronto, installa le dipendenze ed esegui il progetto. Hai un modulo adattivo headless integrato in un’app React in esecuzione. Puoi utilizzare il progetto React di esempio per generare e testare moduli adattivi headless prima di distribuirli in un ambiente di produzione.

Iniziamo:

Prima di iniziare pre-requisites

Per creare ed eseguire un'app React, è necessario che nel computer sia installato quanto segue:

Introduzione

Una volta soddisfatti i requisiti, eseguire i passaggi seguenti per iniziare:

1. Configurare il kit di avvio per moduli adattivi headless install

Il kit di avvio è un’app React con un modulo adattivo headless di esempio e le librerie corrispondenti. Utilizza il kit per sviluppare e testare i moduli adattivi headless e i corrispondenti componenti React. Esegui i seguenti comandi per configurare il kit di avvio per moduli adattivi headless:

2. Anteprima del modulo adattivo headless preview

Dopo aver configurato il kit di avvio, puoi visualizzare in anteprima il modulo adattivo headless di esempio e sostituirlo con un modulo personalizzato. Puoi anche configurare il kit di avvio per recuperare un modulo da un server AEM Forms. Per visualizzare l'anteprima del modulo

3. Crea ed esegui il rendering del tuo modulo adattivo headless custom

Un modulo adattivo headless rappresenta il modulo e i relativi componenti, come campi e pulsanti, in formato JSON (JavaScript Object Notation). Il vantaggio di utilizzare il formato JSON è che può essere facilmente analizzato e utilizzato da vari linguaggi di programmazione, rendendolo un modo pratico per scambiare dati modulo tra i sistemi. Per visualizzare il modulo adattivo headless di esempio incluso nell'app, apri il file /react-starter-kit-aem-headless-forms/form-definations/form-model.json.

Creiamo un modulo per contattarci con quattro campi: "Nome", "E-mail", "Numero di contatto" e "Messaggio". I campi sono definiti come oggetti (elementi) all’interno del JSON e ogni oggetto (elemento) ha proprietà come tipo, etichetta, nome e obbligatorio. Il modulo ha anche un pulsante di tipo "invia". Ecco JSON per il modulo.

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

Per eseguire il rendering del modulo, sostituisci il modulo adattivo headless JSON /react-starter-kit-aem-headless-forms/form-definations/form-model.json con il JSON indicato sopra, salva il file e attendi che lo starter-kit compili e aggiorni il modulo.

personalizzato

Il rendering del modulo adattivo headless è stato eseguito correttamente.

Bonus

Imposta il titolo della pagina Web che ospita il modulo su Contact Us | WKND Adventures and Travel. Per modificare il titolo, aprire il file react-starter-kit-aem-headless-forms/public/index.html per la modifica e impostare il titolo.

Passaggio successivo

Per impostazione predefinita, il kit di avvio utilizza i componenti Spectrum🔗 di Adobe per eseguire il rendering del modulo. Puoi creare e utilizzare componenti personalizzati o di terze parti. Ad esempio, utilizzando l’interfaccia utente Materiale di Google o l’interfaccia utente Chakra.

utilizziamo l'interfaccia utente dei materiali di Google per eseguire il rendering del modulo Contattaci.