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 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 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:

[ ![](do-not-localize/form-preview-mobile.gif)](assets/form-preview-mobile.gif)

Passaggio 1: Crea il modulo adattivo

  1. Accedi all'istanza di authoring AEM e passa a Adobe Experience Manager > Forms > Forms & Documents. 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 il modello Vuoto per selezionarlo e tocca Avanti.

  3. Viene visualizzata un'opzione per Aggiungi proprietà. I campi Titolo e Nome sono obbligatori:

    • Titolo: specifica Add new or update shipping address nel campo Titolo. Il campo titolo specifica il nome visualizzato del modulo. Il titolo consente di identificare il modulo nell’interfaccia utente di AEM Forms.
    • Nome: specifica shipping-address-add-update-form nel campo Nome. 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 interruttore-side-panel > treeexpandall. Viene visualizzato il browser Componenti. Trascina il componente 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. ​​Naviga 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

  4. Trascina il componente Piè di pagina da espandi ad albero 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. È possibile trascinare i componenti da ad albero a un modulo. Per informazioni sui componenti disponibili e sulle funzionalità corrispondenti, consulta Introduzione alla creazione di moduli adattivi.

  1. Trascina il componente Casella numerica nel modulo adattivo. Posizionarlo prima del componente piè di pagina. Apri le proprietà del componente, cambia Titolo del componente in Customer ID, cambia Nome elemento in customer_ID, abilita l'opzione Campo richiesto, abilita l'opzione 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

  1. Trascinare un componente 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

  2. Trascina un componente 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

  3. Trascinare un componente 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 Prova dell'indirizzo approvata governativa
Nome elemento customer_Address_Proof
Campo obbligatorio Abilitato

  1. Trascina un componente Pulsante di invio nel modulo adattivo. Posizionarlo prima del componente piè di pagina. Apri le proprietà del componente, cambia Nome elemento in address_adaden_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 informazioni dettagliate, consulta Configurazione della notifica e-mail.

    /content/help/en/experience-manager/6-4/sites-administering/notification.html

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

  3. Vai a Invio > Invia azione. Selezionare 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 indicato nell'esercitazione e si accede al modulo sul computer che esegue il server AEM Forms, il modulo è disponibile all'indirizzo http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html.

Passaggio 5: Anteprima e invio del modulo adattivo

È possibile utilizzare l'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. È possibile utilizzare le opzioni Anteprima e Emulatore righer insieme per visualizzare un'anteprima del modulo per dispositivi di diverse dimensioni dello schermo.

  1. Toccare l’opzione Anteprima sul lato destro dell’editor moduli. Il modulo viene aperto in modalità anteprima. Se hai usato il nome menzionato l’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 viene reindirizzato alla pagina Grazie predefinita. Puoi anche specificare una pagina di ringraziamento personalizzata. Per informazioni dettagliate, consulta 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 all'indirizzo http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html.

In questa pagina