DocumentazioneAEM 6.5Guida utente

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

Last update: Wed Mar 20 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

02-create-adaptive-form-main-image

Questo tutorial è un passaggio del Creare il primo modulo adattivo serie. 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 all’authoring 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 authoring dell’AEM e passa a Adobe Experience Manager > Forms > Forms e documenti. L’URL predefinito è http://localhost:4502/aem/forms.html/content/dam/formsanddocuments.

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

  3. Opzione per Aggiungi proprietà viene visualizzato. Il Titolo e Nome I campi sono obbligatori:

    • Titolo: Specifica Add new or update shipping address nel Titolo campo. Il campo titolo specifica il nome visualizzato del modulo. Il titolo ti aiuta a identificare il modulo nell’AEM Forms dell'utente.
    • Nome: Specifica shipping-address-add-update-form nel Nome campo. 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 modulo appena 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 di authoring di moduli adattivi e sui componenti disponibili, consulta Introduzione all’authoring di moduli adattivi.

    Un modulo adattivo appena creato.

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 interruttore-pannello laterale > treeexpandall . Viene visualizzato il browser Componenti (Component). Trascina 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. Seleziona 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 Piè di pagina componente da treeexpandall al 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. AEM Forms fornisce molti componenti per acquisire e visualizzare informazioni in un modulo adattivo. Puoi trascinare i componenti da treeexpandall in un modulo. Per informazioni sui componenti disponibili e sulle funzionalità corrispondenti, consulta Introduzione all’authoring di moduli adattivi.

  1. Trascina Componente casella numerica al modulo adattivo. Posizionalo prima del componente Piè di pagina. Apri le proprietà del componente, modifica Titolo del componente a Customer ID, modifica Nome elemento a customer_ID, abilita Campo obbligatorio , abilita 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 Attivato Attivato Attivato
    Consenti più righe Disattivato Attivato Disattivato

  3. Trascina un 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 Attivato
    Tipo di pattern di visualizzazione Nessun pattern

  4. Trascina una 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 Attivato

  5. Trascina una 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 Attivato

  6. Trascina un Pulsante Invia al modulo adattivo. Posizionalo prima del componente Piè di pagina. Apri le proprietà del componente, modifica 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, consulta 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 informazioni, consulta Configurazione delle notifiche e-mail.

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

  3. Vai a Invio > Azione di 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 Ciao ${customer_Name}, Il seguente indirizzo viene aggiunto come indirizzo di spedizione per il tuo account:
    ${customer_Name}, ${customer_Shipping_Address}, ${customer_State}, ${customer_ZIPCode}
    Saluti, We.Retail
    Includi allegati Attivato

    Modulo pronto. Ora è possibile visualizzare in anteprima il modulo e verificarne la funzionalità. Se hai usato il nome indicato nell’esercitazione e accedi al modulo sul computer che esegue AEM Forms , il modulo è 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 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 entrambi Anteprima e Emulatore righello insieme per visualizzare in anteprima un modulo per dispositivi con dimensioni di schermo diverse.

  1. Seleziona la Anteprima sul lato destro dell’editor di moduli. Il modulo viene aperto in modalità anteprima. Se hai utilizzato 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. Utilizzare righello per visualizzare l'aspetto del modulo su vari dispositivi.
  3. Compila i campi del modulo e seleziona Invia. Il modulo viene inviato e si viene reindirizzati al valore predefinito Grazie pagina. È inoltre possibile specificare una pagina di ringraziamento personalizzata. Per ulteriori informazioni, consulta Configurazione della pagina di reindirizzamento.

Il modulo adattivo per aggiungere un indirizzo è pronto. Se hai utilizzato il nome menzionato nell’esercitazione e accedi 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.

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