Esercitazione: Creare un modulo adattivo

02-create-adaptive-form-main-image

Questa esercitazione è un passaggio della serie Crea il tuo primo modulo adattivo. Si consiglia di seguire le serie in sequenza cronologica per comprendere, eseguire e dimostrare l'uso completo dell'esercitazione.

Informazioni sull'esercitazione

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

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

Alla fine dell'articolo sarà disponibile un modulo simile al seguente:

Passaggio 1: Creare il modulo adattivo

  1. Accedete all'istanza di creazione AEM e andate a Adobe Experience Manager > Forms > Forms & Documents. L'URL predefinito è http://localhost:4502/aem/forms.html/content/dam/formsanddocuments.

  2. Toccate Crea e selezionate Modulo adattivo. Viene visualizzata un’opzione per selezionare un modello. Toccate il modello Blank per selezionarlo e toccate Next.

  3. Viene visualizzata l'opzione Aggiungi proprietà. I campi Title e Name sono obbligatori:

    • Titolo: specificate Add new or update shipping address nel campo ​Titolo. Il campo title specifica il nome visualizzato del modulo. Il titolo consente di identificare il modulo nell'interfaccia AEM Forms utente.
    • Nome: specificate shipping-address-add-update-form nel campo ​Nome. Il campo Nome specifica il nome del modulo. Nella directory archivio viene creato un nodo con il nome specificato. Quando si inizia a digitare un titolo, viene automaticamente generato il valore relativo al campo del nome. È possibile modificare il valore suggerito. Il campo del nome può includere solo caratteri alfanumerici, trattini e caratteri di sottolineatura. Tutti gli input non validi vengono sostituiti con un trattino.
  4. Toccate Crea. Viene creato un modulo adattivo e viene visualizzata una finestra di dialogo per aprire il modulo per la modifica. Toccate Apri per aprire il modulo appena creato in una nuova scheda. Il modulo viene aperto per la modifica. Inoltre, consente di visualizzare 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, vedere Introduzione alla creazione di moduli adattivi.

    nuovo modulo adattivo

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

  1. Toccate interruttore-side-panel > treeexpandall. Si apre il Browser componenti. Trascinate il componente Header dal browser componenti al modulo adattivo.

  2. Toccate Logo. Viene visualizzata la barra degli strumenti. Toccate aem_6_3_edit sulla barra degli strumenti, digitate We.Retail, quindi toccate aem_6_3_forms_save.

  3. Toccate Immagine. Viene visualizzata la barra degli strumenti. Toccate cmppr. Il browser delle proprietà si apre a sinistra dello schermo. Esplorate e caricate l’immagine del logo. Toccate aem_6_3_forms_save. L’immagine viene visualizzata nell’intestazione.

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

    Ottieni file

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

    forma adattiva con intestazioni e piè di pagina

Passaggio 3: Aggiunta di componenti per acquisire e visualizzare informazioni

I componenti sono elementi costitutivi di un modulo adattivo. AEM Forms offre molti componenti per acquisire e visualizzare informazioni in un modulo adattivo. È possibile trascinare i componenti da treeexpandall a un modulo. Per informazioni sui componenti disponibili e sulle funzionalità corrispondenti, vedere Introduzione alla creazione di moduli adattivi.

  1. Trascinare il componente Casella numerica nel modulo adattivo. Posizionarlo prima del componente piè di pagina. Aprite le proprietà del componente, modificate Titolo del componente in Customer ID, modificate Nome elemento in customer_ID, abilitate l'opzione Campo richiesto, abilitate l'opzione Usa tipo di input di numero HTML5 e toccate aem_6_forms_save.

  2. Trascinare 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. Trascinare un componente Casella numerica prima del componente piè di pagina. Aprire le proprietà del componente, impostare i valori elencati nella tabella seguente, Toccare aem_6_3_forms_save.

    Proprietà Valore
    Titolo Codice ZIP
    Nome elemento customer_ZIPCode
    Numero massimo di cifre 6
    Campo obbligatorio Abilitato
    Tipo di pattern di visualizzazione Nessun pattern
  4. Trascinare un componente E-mail prima del componente piè di pagina. Aprite le proprietà del componente, impostate i valori elencati nella tabella seguente e toccate aem_6_3_forms_save.

    Proprietà Valore
    Titolo E-mail
    Nome elemento customer_Email
    Campo obbligatorio Abilitato
  5. Trascinare un componente File Attachment prima del componente piè di pagina. Aprite le proprietà del componente, impostate i valori elencati nella tabella seguente e toccate aem_6_3_forms_save.

    Proprietà Valore
    Titolo Prova indirizzo approvata governativa
    Nome elemento customer_Address_Proof
    Campo obbligatorio Abilitato
  6. Trascinare un componente Pulsante Invia nel modulo adattivo. Posizionarlo prima del componente piè di pagina. Aprite le proprietà del componente, modificate Nome elemento in address_addition_update_submit, toccate aem_6_3_forms_save. Il layout del modulo è completo e il modulo ha il seguente aspetto:

    forma adattiva con tutti i componenti

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 messaggio e-mail e altro ancora. Nei moduli adattivi sono disponibili ulteriori azioni di invio pronte all’uso. Per informazioni dettagliate, vedere Configurazione dell'azione di invio.

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

  1. Configurare il server e-mail. Per informazioni dettagliate, vedere Configurazione delle notifiche e-mail.

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

  3. Vai a Invio > Invia azione. Selezionare Invia e-mail. Specificate i seguenti valori e toccate aem_6_3_forms_save.

    Proprietà Valore
    Da donotreply@weretail.com
    A ${customer_Email}
    Oggetto Riconoscimento: Avete aggiunto l'indirizzo di spedizione sul sito Web We.Retail.
    Modello e-mail Ciao ${customer_Name}, il seguente indirizzo è aggiunto 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 l'anteprima del modulo e verificare la funzionalità. Se si è utilizzato il nome indicato nell'esercitazione e si accede al modulo sul computer che esegue AEM server Forms, il modulo è disponibile all'indirizzo http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html.

Passaggio 5: Visualizzare l'anteprima e inviare il modulo adattivo

È possibile utilizzare l'opzione Anteprima per valutare l'aspetto e il funzionamento 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 offrono inoltre la possibilità di emulare l'esperienza di un modulo per diversi dispositivi. Ad esempio, iPhone, iPad e Desktop. È possibile utilizzare le opzioni Anteprima e Emulatore righello in combinazione tra loro per visualizzare in anteprima un modulo per dispositivi di diverse dimensioni dello schermo.

  1. Toccare l'opzione Anteprima a destra dell'editor del modulo. Il modulo si apre in modalità di anteprima. Se si è utilizzato il nome indicato nell'esercitazione, l'URL di anteprima del modulo è http://localhost:4502/content/dam/formsanddocuments/shipping-address-add-update-form/jcr:content?wcmmode=disabled
  2. Utilizzare righello per visualizzare l'aspetto del modulo su vari dispositivi.
  3. Compila i campi del modulo e tocca Invia. Il modulo viene inviato e si viene reindirizzati alla pagina Grazie predefinita. Potete anche specificare una pagina di ringraziamento personalizzata. Per informazioni dettagliate, vedere 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 server AEM Forms, il modulo è disponibile all'indirizzo http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html.

In questa pagina