Crea il tuo primo modulo adattivo

01-create-first-adaptive-form-hero-image

Introduzione

Sei alla ricerca di un'esperienza forms adatta ai dispositivi mobili che semplifica l'iscrizione, aumenta il coinvolgimento e riduce il tempo di esecuzione, moduli adattivi è la scelta ideale per te. I moduli adattivi offrono un’esperienza mobile, automatizzata e con moduli compatibili con le analisi. È possibile creare facilmente moduli di natura reattiva e interattiva, utilizzare processi automatizzati per ridurre le attività amministrative e ripetitive e utilizzare l’analisi dei dati per migliorare e personalizzare l’esperienza dei clienti con i moduli.

Questa esercitazione fornisce un framework end-to-end per creare un modulo adattivo. L’esercitazione è organizzata in un caso d’uso e in più guide. Ogni guida è utile per apprendere e aggiungere nuove funzioni al modulo adattivo creato in questa esercitazione. Hai un modulo adattivo funzionante dopo ogni guida. È disponibile la guida per la creazione di un modulo adattivo . Le guide successive saranno presto disponibili. Al termine di questa esercitazione, potrai:

  • Creare un modello di dati modulo adattivo e modulo.
  • Assegna uno stile al modulo adattivo.
  • Utilizza l’editor di regole del modulo adattivo per creare regole aziendali.
  • Test e pubblicazione di un modulo adattivo.

creazione-adattamento-modulo-workflow

Il percorso inizia con l’apprendimento del caso d’uso:

Un sito web offre una gamma di prodotti per diversi clienti. I clienti navigano nel portale, selezionano e ordinano i prodotti. Ogni cliente crea un account e fornisce indirizzi di spedizione e fatturazione. Una cliente esistente, Sara Rose, sta cercando di aggiungere il suo indirizzo di spedizione al sito web. Il sito web fornisce un modulo online per aggiungere e aggiornare gli indirizzi di spedizione.

Il sito web viene eseguito su Adobe Experience Manager (AEM) e utilizza AEM Forms per l’acquisizione e l’elaborazione dei dati. Il modulo di aggiunta e aggiornamento dell’indirizzo è un modulo adattivo. Il sito web memorizza i dettagli dei clienti in un database. Utilizzano il modulo di aggiunta e aggiornamento dell’indirizzo per recuperare e visualizzare gli indirizzi disponibili. Utilizzano anche il modulo adattivo per accettare indirizzi nuovi e aggiornati.

Prerequisito

  • Imposta un'istanza di authoring AEM.

  • Installa AEM Forms add-on sull'istanza dell'autore.

  • Ottenere il driver del database JDBC (file JAR) dal provider del database. Gli esempi nell'esercitazione sono basati sul database MySQL e utilizzano il driver di database Oracle MySQL JDBC.

  • Imposta un database contenente i dati del cliente con i campi visualizzati di seguito. Un database non è essenziale per creare un modulo adattivo. Questa esercitazione utilizza un database per visualizzare il modello dati del modulo e le funzionalità di persistenza di AEM Forms.

adaptiveformdata

Passaggio 1: Creare un modulo adattivo

03-create-adaptive-form-main-image_small_new

I moduli adattivi sono di nuova generazione, coinvolgenti, reattivi, dinamici e adattivi in natura. Utilizzando i moduli adattivi, puoi fornire esperienze personalizzate e mirate. AEM Forms fornisce un editor WYSIWYG con trascinamento per creare moduli adattivi. Per ulteriori informazioni sui moduli adattivi, consulta Introduzione alla creazione di moduli adattivi.

Obiettivi:

  • 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

  • Anteprima e invio di un modulo adattivo

    see-the-guide-sm

Passaggio 2: Crea modello dati modulo

05-create-form-data-model-main_small

Un modello di dati modulo consente di collegare un modulo adattivo a diverse origini dati. Ad esempio, AEM profilo utente, servizi web RESTful, servizi web basati su SOAP, servizi OData e database relazionali. Un modello dati Modulo è uno schema di rappresentazione dei dati unificato delle entità e dei servizi aziendali disponibili nelle origini dati connesse. È possibile utilizzare il modello dati del modulo con un modulo adattivo per recuperare, aggiornare, eliminare e aggiungere dati alle origini dati connesse.

Obiettivi:

  • Configurare l'istanza di database del sito Web (database MySQL) come origini dati

  • Creare il modello dati del modulo utilizzando il database MySQL come origine dati

  • Aggiunta di oggetti del modello dati al modello dati del modulo

  • Configurare i servizi di lettura e scrittura per il modello dati del modulo

  • Verificare il modello dati del modulo e i servizi configurati con i dati di prova

    see-the-guide-sm

Passaggio 3: Applicare regole ai campi del modulo adattivo

07-apply-rules-to-adaptive-form_small

I moduli adattivi forniscono un editor per la scrittura di regole sugli oggetti modulo adattivi. Queste regole definiscono le azioni da eseguire sugli oggetti modulo in base a condizioni preimpostate, input dell’utente e azioni dell’utente sul modulo. Consente di garantire l’accuratezza e di accelerare l’esperienza di compilazione dei moduli.

Obiettivi:

  • Creazione e applicazione di regole ai campi del modulo adattivo
  • Utilizzare le regole per attivare i servizi del modello dati modulo per aggiornare i dati al database

Passaggio 4: Personalizzare lo stile del modulo adattivo

09-Style-your-adaptive-form_small

I moduli adattivi forniscono temi e un editor per creare temi per i moduli adattivi. Un tema contiene dettagli di stile per componenti e pannelli e può essere riutilizzato in diversi moduli. Gli stili includono proprietà quali colori di sfondo, colori dello stato, trasparenza, allineamento e dimensioni. Quando si applica il tema al modulo, lo stile specificato si riflette sui componenti corrispondenti del modulo. I moduli adattivi supportano anche lo stile in linea per gli stili specifici di un modulo.

Obiettivi:

  • Applicare un tema preconfigurato a un modulo adattivo

  • Creare un tema per un modulo adattivo utilizzando l’editor di temi

  • Utilizzare i font web in un tema personalizzato

    see-the-guide-sm

Passaggio 5: Test del modulo adattivo

11-test-your-adaptive-form

I moduli adattivi sono parte integrante delle interazioni dei clienti. È importante testare i moduli adattivi con ogni modifica apportata. Il test di ogni campo di un modulo è noioso. AEM Forms fornisce un SDK (Calvin SDK) per automatizzare il test dei moduli adattivi. Calvin consente di automatizzare i test dei moduli adattivi nel browser web.

Obiettivi:

  • Installa Calvin SDK
  • Crea suite di test e casi di test per il modulo per l’indirizzo di modifica

Per informazioni sull'SDK, consulta Utilizzo di test automatici con AEM modulo adattivo.

Passaggio 6: Pubblicare il modulo adattivo

12-publish-your-adaptive-form-_small

È possibile pubblicare i moduli adattivi come modulo autonomo (applicazione a pagina singola), includerli in AEM pagina siti o in un elenco su un sito AEM utilizzando Forms Portal.

Obiettivi:

  • Pubblicare il modulo adattivo come applicazione a pagina singola

In questa pagina

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now