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 le statistiche di utilizzo e 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 AEM e passate a Adobe Experience Manager > Forms > Forms 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 Forms utente AEM.
    • 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. Toccare 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.

Passaggio 3: Aggiunta di componenti per acquisire e visualizzare informazioni

I componenti sono elementi costitutivi di un modulo adattivo. AEM Forms fornisce molti componenti per acquisire e visualizzare le 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à 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
    Allow multiple lines Disattivato Abilitato Disattivato
  3. 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
  4. 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
  5. 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
  6. 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_addition_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 si è utilizzato il nome indicato nell'esercitazione e si accede al modulo sul computer che esegue 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 del 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 si è utilizzato il nome indicato nell'esercitazione e si accede al modulo sul computer su cui è in esecuzione server AEM Forms, il modulo è disponibile all'indirizzo http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html .