Show Menu
ARGOMENTI×

Esercitazione: Creare un modulo adattivo

Questa esercitazione è un passaggio della serie Crea il 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: form-preview-mobile.gif

Passaggio 1: Creare il modulo adattivo

  1. Accedete all’istanza di creazione di AEM e passate ad Adobe Experience Manager > Moduli > Moduli e documenti . L’URL predefinito è http://localhost:4502/aem/forms.html/content/dam/formsanddocuments .
  2. Toccare Crea e selezionare Modulo adattivo. Viene visualizzata un’opzione per selezionare un modello. Toccate il modello Vuoto per selezionarlo e toccate Avanti .
  3. Viene visualizzata un’opzione per Aggiungi proprietà . I campi Titolo e Nome 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 utente di AEM Forms.
    • Nome: Specificare 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. Potete 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. Toccare 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, vedere Introduzione alla creazione di moduli adattivi.

Passaggio 3: Aggiunta di componenti per acquisire e visualizzare informazioni

I componenti sono elementi costitutivi di un modulo adattivo. AEM Forms offre numerosi componenti per acquisire e visualizzare informazioni in un modulo adattivo. È possibile trascinare i componenti da a un modulo. Per informazioni sui componenti disponibili e sulle funzionalità corrispondenti, vedere Introduzione alla creazione di moduli adattivi.
  1. Trascinate il componente Casella numerica sul 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 attivate l’opzione Campo richiesto, abilitate l’opzione Usa tipo di input numero HTML5 e toccate aem_6_3_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à Text Box 1 Text Box 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
Allow multiple lines Disattivato Abilitato Disattivato
  1. Trascinare un componente Casella numerica prima del componente piè di pagina. Aprite le proprietà del componente, impostate i valori elencati nella tabella seguente, toccate .
    Proprietà
    Valore
    Titolo
    Codice ZIP
    Nome elemento
    customer_ZIPCode
    Numero massimo di cifre
    6
    Campo obbligatorio
    Abilitato
    Tipo di pattern di visualizzazione
    Nessun pattern
  2. Trascinate un componente E-mail prima del componente piè di pagina. Aprite le proprietà del componente, impostate i valori elencati nella tabella seguente e toccate .
    Proprietà
    Valore
    Titolo
    E-mail
    Nome elemento
    customer_Email
    Campo obbligatorio
    Abilitato
  3. Trascinare un componente File allegato prima del componente piè di pagina. Aprite le proprietà del componente, impostate i valori elencati nella tabella seguente e toccate .
Proprietà Valore
Titolo Approvazione governativa
Nome elemento customer_Address_Proof
Campo obbligatorio Abilitato
  1. Trascinate il componente Pulsante di invio sul modulo adattivo. Posizionarlo prima del componente piè di pagina. Aprite le proprietà del componente, modificate Nome elemento in address_addizione_update_submit , toccate . Il layout del modulo è completo e il modulo ha il seguente aspetto:

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 Invia.
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, consultate Configurazione delle notifiche e-mail.
  2. Toccate Contenitore modulo nel browser Contenuto e toccate . Il browser delle proprietà si apre a sinistra.
  3. Vai a Invia > Invia azione . Selezionate Invia e-mail . Specificate i seguenti valori e toccate .
    Proprietà
    Valore
    Da
    A
    ${customer_Email}
    Oggetto
    Riconoscimento: Avete aggiunto l'indirizzo di spedizione sul sito Web We.Retail.
    Modello e-mail
    Salve ${customer_Name} e il seguente indirizzo è aggiunto come indirizzo di spedizione per il vostro account:
    ${customer_Name} , ${customer_Shipping_Address} , ${customer_State} , ${customer_ZIPCode}
    Saluti, We.Retail
    Includi allegati
    Abilitato
    Il modulo è pronto. Ora è possibile visualizzare l'anteprima del modulo e verificare la funzionalità. Se avete utilizzato il nome indicato nell'esercitazione e accedete al modulo sul computer in cui è in esecuzione AEM Forms Server, 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 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 insieme le opzioni Anteprima ed Emulatore per visualizzare in anteprima un modulo per dispositivi di diverse dimensioni di schermo.
  1. Toccare l'opzione Anteprima sul lato destro dell'editor modulo. Il modulo si apre in modalità di anteprima. Se avete 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 il 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 di ringraziamento predefinita. Potete anche specificare una pagina di ringraziamento personalizzata. Per informazioni dettagliate, consultate Configurazione della pagina di reindirizzamento.
Il modulo adattivo per aggiungere un indirizzo è pronto. Se avete utilizzato il nome indicato nell'esercitazione e accedete al modulo sul computer in cui è in esecuzione AEM Forms Server, il modulo è disponibile all'indirizzo http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html .