Esercitazione: Creare un modulo adattivo

02-create-adaptive-form-main-image

Questa esercitazione è un passaggio nel Creare il primo modulo adattivo serie. Si consiglia di seguire la serie in sequenza cronologica per comprendere, eseguire e illustrare il caso d’uso completo dell’esercitazione.

Informazioni sull’esercitazione

I moduli adattivi sono moduli di nuova generazione dinamici e reattivi. Puoi utilizzare i moduli adattivi per fornire esperienze personalizzate. È inoltre possibile integrare i moduli adattivi con Adobe Analytics per le statistiche di utilizzo e Adobe Campaign per la gestione delle campagne. Per ulteriori informazioni sulle funzionalità dei moduli adattivi, consulta Introduzione alla creazione di moduli adattivi.

È più facile creare e gestire i moduli seguendo un processo appropriato. In questo articolo viene illustrato come:

Avrai un modulo simile al seguente alla fine dell’articolo:

Passaggio 1: Creare il modulo adattivo

  1. Accedi all'istanza di authoring AEM e passa a Adobe Experience Manager > Forms > Forms e documenti. L’URL predefinito è http://localhost:4502/aem/forms.html/content/dam/formsanddocuments.

  2. Tocca Crea e seleziona Modulo adattivo. Viene visualizzata un’opzione per selezionare un modello. Tocca Vuoto modello per selezionarlo e toccare Successivo.

  3. Opzione per Aggiungi proprietà appare. La Titolo e Nome i campi sono obbligatori:

    • Titolo: Specifica Add new or update shipping address in Titolo campo . Il campo titolo specifica il nome visualizzato del modulo. Il titolo consente di identificare il modulo nel AEM Forms interfaccia utente.
    • Nome: Specifica shipping-address-add-update-form in Nome campo . Il campo Nome specifica il nome del modulo. Nel repository viene creato un nodo con il nome specificato. Quando si inizia a digitare un titolo, il valore del campo nome viene generato automaticamente. È possibile modificare il valore suggerito. Il campo name può includere solo caratteri alfanumerici, trattini e caratteri di sottolineatura. Tutti gli input non validi vengono sostituiti con un trattino.

  4. Tocca Crea. Viene creato un modulo adattivo e viene visualizzata una finestra di dialogo per aprire il modulo per la modifica. Tocca Apri per aprire il modulo appena creato in una nuova scheda. Il modulo viene aperto per la modifica. Visualizza inoltre la barra laterale per personalizzare il modulo appena creato in base alle esigenze.

    Per informazioni sull’interfaccia per la creazione di moduli adattivi e sui componenti disponibili, consulta Introduzione alla creazione di moduli adattivi.

    modulo adattivo appena creato

AEM Forms fornisce molti componenti per visualizzare informazioni su un modulo adattivo. I componenti Intestazione e Piè di pagina forniscono un aspetto e un aspetto uniformi del modulo. Un'intestazione include in genere il logo di una società, il titolo del modulo e il riepilogo. In genere, un piè di pagina include informazioni sul copyright e collegamenti ad altre pagine.

  1. Tocca pannello laterale di attivazione > treeexpandall. Viene visualizzato il browser Componenti. Trascina Intestazione dal browser Componenti al modulo adattivo.

  2. Tocca Logo. Viene visualizzata la barra degli strumenti. Tocca aem_6_3_edit sulla barra degli strumenti, digita We.Retail, e tocca aem_6_3_forms_save.

  3. Tocca Immagine . Viene visualizzata la barra degli strumenti. Tocca cmppr. Il browser delle proprietà si apre a sinistra dello schermo. Sfoglia e carica l'immagine del logo. Tocca aem_6_3_forms_save. L'immagine viene visualizzata nell'intestazione.

    Tocca Ottieni file per scaricare il logo utilizzato in questo articolo, se non ne hai uno.

Ottieni file

  1. Trascina Piè di pagina componente da treeexpandall al modulo adattivo. A questo punto, il modulo si presenta come segue:

    adattivo-form-with-headers-and-footers

Passaggio 3: Aggiungere componenti per acquisire e visualizzare informazioni

I componenti sono blocchi predefiniti di un modulo adattivo. AEM Forms fornisce molti componenti per acquisire e visualizzare informazioni in un modulo adattivo. Puoi trascinare i componenti da treeexpandall a un modulo. Per informazioni sui componenti disponibili e sulle funzionalità corrispondenti, consulta Introduzione alla creazione di moduli adattivi.

  1. Trascina Componente Casella numerica al modulo adattivo. Posizionarlo prima del componente piè di pagina. Apri proprietà del componente, modifica Titolo del componente Customer ID, modifica Nome elemento a customer_ID, abilita Campo obbligatorio abilita Usa tipo di input numero HTML5 e tocca aem_6_3_forms_save.

  2. Trascina tre componenti Casella di testo nel modulo adattivo. Posizionare questi elementi prima del componente piè di pagina. Impostare le seguenti proprietà per queste caselle di testo.:

    Proprietà Casella di testo 1
    		 Casella di testo 2
    		 Casella di testo 3
    Titolo Nome
    		 Indirizzo di spedizione Stadio
    Nome elemento customer_Name
    		 customer_Shipping_Address customer_State
    Campo obbligatorio Abilitato Abilitato Abilitato
    Consenti righe multiple
    		 Disattivato Abilitato Disattivato

  3. Trascina un Casella numerica prima del componente piè di pagina. Apri le proprietà del componente, imposta i valori elencati nella tabella seguente, Tocca aem_6_3_forms_save.

    Proprietà Valore
    Titolo CAP
    Nome elemento customer_ZIPCode
    Numero massimo di cifre 6
    Campo obbligatorio Abilitato
    Tipo di pattern di visualizzazione Nessun pattern

  4. Trascina un E-mail prima del componente piè di pagina. Apri le proprietà del componente, imposta i valori elencati nella tabella seguente e tocca aem_6_3_forms_save.

    Proprietà Valore
    Titolo E-mail
    Nome elemento customer_Email
    Campo obbligatorio Abilitato

  5. Trascina un File allegato prima del componente piè di pagina. Apri le proprietà del componente, imposta i valori elencati nella tabella seguente e tocca aem_6_3_forms_save.

    Proprietà Valore
    Titolo Documento d'indirizzo approvato dal governo
    Nome elemento customer_Address_Proof
    Campo obbligatorio Abilitato

  6. Trascina un Pulsante Invia al modulo adattivo. Posizionarlo prima del componente piè di pagina. Apri le proprietà del componente, modifica Nome elemento in address_addition_update_submit, tocca aem_6_3_forms_save. Il layout del modulo è completo e il modulo ha un aspetto simile al seguente:

    adattivo-form-with-all-the-components

Passaggio 4: Configurare l’azione di invio per il modulo adattivo

Un’azione di invio viene attivata quando un utente tocca il pulsante Invia su un modulo adattivo. È possibile utilizzare un’azione di invio per salvare i dati del modulo nell’archivio locale, inviare i dati del modulo a un endpoint REST, inviare i dati del modulo come e-mail e altro ancora. Nei moduli adattivi sono disponibili alcune azioni di invio predefinite. Per informazioni dettagliate, consulta Configurazione dell’azione Invia.

Utilizzando i passaggi seguenti, è possibile configurare l’azione di invio per e-mail e l’azione di invio demo del modulo:

  1. Configura il server e-mail. Per maggiori dettagli, vedi Configurazione della notifica e-mail.

  2. Tocca Contenitore modulo nel browser Contenuto e tocca cmppr. Il browser delle proprietà si apre a sinistra.

  3. Vai a Invio > Invia azione. Seleziona Invia e-mail. Specifica i seguenti valori e tocca aem_6_3_forms_save.

    Proprietà Valore
    Da donotreply@weretail.com
    A ${customer_Email}
    Oggetto Riconoscimento: Hai aggiunto l'indirizzo di spedizione sul sito web We.Retail.
    Modello e-mail Ciao ${customer_Name}, viene aggiunto il seguente indirizzo come indirizzo di spedizione per il tuo account:
    ${customer_Name}, ${customer_Shipping_Address}, ${customer_State}, ${customer_ZIPCode}
    Considerazioni, We.Retail
    Includi allegati Abilitato

    Il modulo è pronto. Ora è possibile visualizzare in anteprima il modulo e verificare la funzionalità. Se si è utilizzato il nome menzionato nell’esercitazione e si accede al modulo sul computer che esegue AEM Forms server, quindi il modulo è disponibile in http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html.

Passaggio 5: Anteprima e invio del modulo adattivo

È possibile utilizzare Opzione Anteprima per valutare l’aspetto e il comportamento di un modulo. È possibile inviare un modulo in modalità di anteprima e controllare anche le convalide applicate a un modulo. Ad esempio, se viene visualizzato un errore quando un campo obbligatorio viene lasciato vuoto.

I moduli adattivi forniscono anche un’opzione per emulare l’esperienza di un modulo per diversi dispositivi. Ad esempio, iPhone, iPad e Desktop. Puoi utilizzare entrambi Anteprima e Emulatore righello opzioni in combinazione tra di loro per visualizzare in anteprima un modulo per dispositivi con diverse dimensioni dello schermo.

  1. Tocca Anteprima sul lato destro dell’editor moduli. Il modulo viene aperto in modalità anteprima. Se hai utilizzato il nome menzionato nell’esercitazione, l’URL di anteprima del modulo è http://localhost:4502/content/dam/formsanddocuments/shipping-address-add-update-form/jcr:content?wcmmode=disabled
  2. Utilizzo righello per visualizzare l’aspetto del modulo su vari dispositivi.
  3. Compila i campi del modulo e tocca Invia. Il modulo viene inviato e l’utente viene reindirizzato all’impostazione predefinita Grazie pagina. Puoi anche specificare una pagina di ringraziamento personalizzata. Per maggiori dettagli, vedi Configurazione della pagina di reindirizzamento.

Il modulo adattivo per aggiungere un indirizzo è pronto. Se si è utilizzato il nome indicato nell'esercitazione e si accede al modulo sul computer che esegue il server AEM Forms, il modulo è disponibile in http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html.

In questa pagina