DocumentazioneAEM 6.5Guida utente

Tutorial: creare un modulo adattivo do-not-publish-tutorial-create-an-adaptive-form

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Creato per:

  • Amministratore
  • Utente
  • Sviluppatore

02-create-adaptive-form-main-image

Questo tutorial è un passaggio della serie Creare il primo modulo adattivo. Si consiglia di seguire la serie in sequenza cronologica per comprendere, eseguire e dimostrare il caso di utilizzo completo dell’esercitazione.

Informazioni sull’esercitazione about-the-tutorial

I moduli adattivi sono moduli di nuova generazione dinamici e reattivi. Puoi utilizzare i moduli adattivi per fornire esperienze personalizzate. È inoltre possibile integrare i 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.

La creazione e la gestione dei moduli è più semplice se si segue un processo appropriato. In questo articolo imparerai a:

Avrai un modulo simile al seguente entro la fine dell’articolo:
Anteprima modulo in dispositivi mobili

Passaggio 1: creare il modulo adattivo step-create-the-adaptive-form

  1. Accedi all'istanza di creazione dell'AEM e passa a Adobe Experience Manager > Forms > Forms e documenti. URL predefinito: http://localhost:4502/aem/forms.html/content/dam/formsanddocuments.

  2. Seleziona Crea e Modulo adattivo. Viene visualizzata un'opzione per selezionare un modello. Seleziona il modello Vuoto per selezionarlo e scegli Successivo.

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

    • Titolo: Specificare 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 Forms dell'AEM.
    • Nome: Specificare shipping-address-add-update-form nel campo Nome. Il campo Nome specifica il nome del modulo. Nell’archivio viene creato un nodo con il nome specificato. Quando si inizia a digitare un titolo, il valore del campo nome viene generato automaticamente. Puoi modificare il valore suggerito. Il campo nome può contenere solo caratteri alfanumerici, trattini e caratteri di sottolineatura. Tutti gli input non validi vengono sostituiti da un trattino.

  4. Seleziona Crea. Viene creato un modulo adattivo e viene visualizzata una finestra di dialogo per aprire il modulo per la modifica. Seleziona Apri per aprire il nuovo modulo creato in una nuova scheda. Il modulo viene aperto per la modifica. Viene visualizzata inoltre la barra laterale per personalizzare il modulo appena creato in base alle esigenze.

    Per informazioni sull'interfaccia per l'authoring di moduli adattivi e sui componenti disponibili, consulta Introduzione all'authoring di moduli adattivi.

    Modulo adattivo appena creato.

L'AEM Forms fornisce molti componenti per visualizzare informazioni su un modulo adattivo. I componenti Intestazione e Piè di pagina consentono di conferire a un modulo un aspetto coerente. In genere, un’intestazione include il logo di un’azienda, il titolo del modulo e il riepilogo. Un piè di pagina include in genere informazioni sul copyright e collegamenti ad altre pagine.

  1. Seleziona pannello laterale di attivazione > treeexpandall . Viene visualizzato il browser Componenti (Component). Trascina il componente Intestazione dal browser componenti al modulo adattivo.

  2. Seleziona Logo. Viene visualizzata la barra degli strumenti. Seleziona aem_6_3_edit sulla barra degli strumenti, digita We.Retail e seleziona aem_6_3_forms_save .

  3. Seleziona Immagine. Viene visualizzata la barra degli strumenti. Selezionare cmppr . Il browser delle proprietà si apre a sinistra dello schermo. Sfoglia e carica l'immagine del logo. Seleziona aem_6_3_forms_save . L'immagine viene visualizzata nell'intestazione.

    Se non ne hai uno, seleziona Ottieni file per scaricare il logo utilizzato in questo articolo.

Ottieni file

  1. Trascina il componente Footer da treeexpandall nel modulo adattivo. In questa fase, il modulo si presenta come segue:

    modulo adattivo con intestazioni e piè di pagina

Passaggio 3: aggiungere componenti per acquisire e visualizzare informazioni step-add-components-to-capture-and-display-information

I componenti sono elementi costitutivi di un modulo adattivo. L'AEM Forms fornisce molti componenti per acquisire e visualizzare informazioni in un modulo adattivo. Puoi trascinare i componenti da treeexpandall 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. Posizionalo 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 seleziona aem_6_3_forms_save .

  2. Trascina tre componenti Casella di testo nel modulo adattivo. Posizionale prima del componente Piè di pagina. Impostare le seguenti proprietà per queste caselle di testo.:

    table 0-row-4 1-row-4 2-row-4 3-row-4 4-row-4 html-authored no-header
    Proprietà Riquadro 1 Casella di testo 2 Riquadro 3
    Titolo Nome Indirizzo di spedizione Stato
    Nome elemento customer_Name customer_Shipping_Address customer_State
    Campo obbligatorio Abilitato Abilitato Abilitato
    Consenti più righe Disattivato Abilitato Disattivato

  3. Trascina un componente Casella numerica prima del componente piè di pagina. Apri le proprietà del componente, imposta i valori elencati nella tabella seguente, seleziona aem_6_3_forms_save .

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2
    Proprietà Valore
    Titolo Codice postale
    Nome elemento customer_ZIPCode
    Numero massimo di cifre 6
    Campo obbligatorio Abilitato
    Tipo di pattern di visualizzazione Nessun pattern

  4. Trascina un componente E-mail prima del componente piè di pagina. Apri le proprietà del componente, imposta i valori elencati nella tabella seguente e seleziona aem_6_3_forms_save .

    table 0-row-2 1-row-2 2-row-2 3-row-2
    Proprietà Valore
    Titolo E-mail
    Nome elemento customer_Email
    Campo obbligatorio Abilitato

  5. Trascina un componente File allegato prima del componente piè di pagina. Apri le proprietà del componente, imposta i valori elencati nella tabella seguente e seleziona aem_6_3_forms_save .

    table 0-row-2 1-row-2 2-row-2 3-row-2 html-authored no-header
    Proprietà Valore
    Titolo Bozza indirizzo approvato dal governo
    Nome elemento customer_Address_Proof
    Campo obbligatorio Abilitato

  6. Trascina un componente Pulsante di invio nel modulo adattivo. Posizionalo prima del componente Piè di pagina. Apri le proprietà del componente, cambia il nome elemento in address_addition_update_submit, seleziona aem_6_3_forms_save . Il layout del modulo è completo e l'aspetto del modulo è il seguente:

    modulo adattivo-con-tutti-i-componenti

Passaggio 4: configurare l’azione di invio per il modulo adattivo step-configure-submit-action-for-the-adaptive-form

Un’azione di invio viene attivata quando un utente tocca il pulsante Invia in 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. I moduli adattivi forniscono alcune ulteriori azioni di invio pronte all’uso. Per informazioni dettagliate, vedere Configurazione dell'azione Invia.

La procedura seguente consente di configurare l’azione di invio e-mail e l’azione di invio demo del modulo:

  1. Configura il server e-mail. Per ulteriori dettagli, vedere Configurazione della notifica e-mail.

  2. Selezionare Contenitore modulo nel browser Contenuti e selezionare cmppr . Il browser delle proprietà si apre a sinistra.

  3. Vai a Invio > Azione invio. Seleziona Invia e-mail. Specifica i seguenti valori e seleziona aem_6_3_forms_save .

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2
    Proprietà Valore
    Da donotreply@weretail.com
    A ${customer_Email}
    Oggetto Conferma: hai aggiunto l'indirizzo di spedizione sul sito Web We.Retail.
    Modello e-mail Salve ${customer_Name}, il seguente indirizzo viene aggiunto come indirizzo di spedizione per il tuo account:
    ${customer_Name}, ${customer_Shipping_Address}, ${customer_State}, ${customer_ZIPCode}
    Cordiali saluti, We.Retail
    Includi allegati Abilitato

    Modulo pronto. Ora è possibile visualizzare in anteprima il modulo e verificarne la funzionalità. Se si è utilizzato il nome indicato nell'esercitazione e si accede al modulo nel computer che esegue il server AEM Forms, il modulo sarà disponibile all'indirizzo http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html.

Passaggio 5: visualizzare in anteprima e inviare il modulo adattivo step-preview-and-submit-the-adaptive-form

È possibile utilizzare l'opzione Anteprima per valutare l'aspetto e il comportamento di un modulo. Puoi inviare un modulo in modalità 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 anche un’opzione per emulare l’esperienza di un modulo per vari dispositivi. Ad esempio, iPhone, iPad e Desktop. Puoi utilizzare entrambe le opzioni Anteprima e Emulatore righello insieme per visualizzare in anteprima un modulo per dispositivi con dimensioni di schermo diverse.

  1. Seleziona l'opzione Anteprima sul lato destro dell'editor di moduli. Il modulo viene aperto in modalità anteprima. Se hai usato il nome menzionato nell'esercitazione, l'URL di anteprima del modulo è http://localhost:4502/content/dam/formsanddocuments/shipping-address-add-update-form/jcr:content?wcmmode=disabled
  2. Utilizza righello per visualizzare l'aspetto del modulo su vari dispositivi.
  3. Compila i campi del modulo e seleziona Invia. Il modulo è stato inviato e si è reindirizzati alla pagina predefinita Grazie. È inoltre possibile specificare una pagina di ringraziamento personalizzata. Per ulteriori dettagli, vedere Configurazione della pagina di reindirizzamento.

Il modulo adattivo per aggiungere un indirizzo è pronto. Se è stato utilizzato il nome indicato nell'esercitazione e si accede al modulo nel computer che esegue il server AEM Forms, il modulo sarà disponibile all'indirizzo http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html.

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2