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.
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:
Creare un modulo adattivo che consenta a un cliente di aggiungere un indirizzo di spedizione
Layout dei campi di un modulo adattivo per visualizzare e accettare le informazioni di un cliente
Creare un’azione di invio per inviare un’e-mail contenente il contenuto del modulo
Avrai un modulo simile al seguente alla fine dell’articolo:
[ ](assets/form-preview-mobile.gif)
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.
Tocca Crea e seleziona Modulo adattivo. Viene visualizzata un’opzione per selezionare un modello. Tocca il modello Vuoto per selezionarlo e tocca Avanti.
Viene visualizzata un'opzione per Aggiungi proprietà. I campi Titolo e Nome sono obbligatori:
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.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.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.
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.
Tocca >
. Viene visualizzato il browser Componenti. Trascina il componente Intestazione dal browser Componenti al modulo adattivo.
Tocca Logo. Viene visualizzata la barra degli strumenti. Tocca sulla barra degli strumenti, digita We.Retail e tocca
.
Tocca Immagine . Viene visualizzata la barra degli strumenti. Tocca . Il browser delle proprietà si apre a sinistra dello schermo. Naviga e carica l’immagine del logo. Tocca
. L'immagine viene visualizzata nell'intestazione.
Tocca Ottieni file per scaricare il logo utilizzato in questo articolo, se non ne hai uno.
Trascina il componente Piè di pagina da al modulo adattivo. A questo punto, il modulo si presenta come segue:
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 a un modulo. Per informazioni sui componenti disponibili e sulle funzionalità corrispondenti, consulta Introduzione alla creazione di moduli adattivi.
Customer ID
, cambia Nome elemento in customer_ID
, abilita l'opzione Campo richiesto, abilita l'opzione Usa tipo di input numero HTML5 e tocca 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 |
Trascinare un componente Casella numerica prima del componente piè di pagina. Apri le proprietà del componente, imposta i valori elencati nella tabella seguente, Tocca .
Proprietà | Valore |
---|---|
Titolo | CAP |
Nome elemento | customer_ZIPCode |
Numero massimo di cifre | 6 |
Campo obbligatorio | Abilitato |
Tipo di pattern di visualizzazione | Nessun pattern |
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 .
Proprietà | Valore |
---|---|
Titolo | |
Nome elemento | customer_Email |
Campo obbligatorio | Abilitato |
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 .
Proprietà | Valore |
Titolo | Prova dell'indirizzo approvata governativa |
Nome elemento | customer_Address_Proof |
Campo obbligatorio | Abilitato |
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 . Il layout del modulo è completo e il modulo ha un aspetto simile al seguente:
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:
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
Tocca Contenitore modulo nel browser Contenuto e tocca . Il browser delle proprietà si apre a sinistra.
Vai a Invio > Invia azione. Selezionare Invia e-mail. Specifica i seguenti valori e tocca .
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.
È 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 insieme per visualizzare un'anteprima del modulo per dispositivi di diverse dimensioni dello schermo.
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.