Creazione di componenti core basati su Adaptive Forms creating-an-adaptive-form-core-components

Adobe consiglia di utilizzare i Componenti core per aggiungere Forms adattivo a una pagina AEM Siteso per creare Forms adattivo autonomo.

Versione
Collegamento articolo
AEM as a Cloud Service
Fai clic qui
AEM 6.5
Questo articolo

I moduli adattivi consentono di creare moduli coinvolgenti e reattivi, che si rivelano, inoltre, dinamici e adattivi. AEM Forms fornisce un’interfaccia utente intuitiva per la creazione rapida di Adaptive Forms. L’interfaccia utente offre una navigazione rapida a schede per selezionare facilmente modelli, stili, campi e opzioni di invio preconfigurati e creare un modulo adattivo.

Prima di iniziare, scopri i tipi di componenti dei moduli disponibili:

  • Componenti core dei moduli adattivi: si tratta di componenti di acquisizione dati standardizzati. Questi componenti forniscono funzionalità di personalizzazione e riducono i tempi di sviluppo e i costi di manutenzione per le esperienze di registrazione digitale. Uno sviluppatore può facilmente personalizzare e assegnare uno stile a questi componenti. L’Adobe consiglia di utilizzare questi componenti moderni ed estensibili per sviluppare Forms adattivo.

  • Componenti di base dei moduli adattivi: si tratta dei classici (precedenti) componenti di acquisizione dati. Puoi continuare a utilizzarli per modificare i componenti di base esistenti basati su modulo adattivo. Se stai creando moduli, Adobe consiglia di utilizzare Componenti core Forms adattivi per creare un Forms adattivo.

Prerequisiti

Per creare un modulo adattivo è necessario quanto segue:

  • Abilita componenti core Forms adattivi per l'ambiente: per abilitare i componenti core per l'ambiente è necessario il progetto Archetipo AEM versione 41 o successiva. Quando si abilitano i Componenti core per l'ambiente, il modello Forms adattivo (Componente core) e il tema Canvas vengono aggiunti all'ambiente.

  • Un modello di modulo adattivo: un modello fornisce una struttura di base e definisce l’aspetto (layout e stili) di un modulo adattivo. Include componenti preformattati contenenti determinate proprietà e struttura del contenuto. Fornisce inoltre le opzioni per definire un tema e un’azione di invio. Il tema definisce l’aspetto, mentre l’azione di invio definisce l’azione da intraprendere al momento dell’invio di un modulo adattivo. Puoi anche distribuire modelli di esempio nel tuo ambiente. che consentono di iniziare a creare rapidamente i moduli.

    note note
    NOTE
    Se non disponi del modello Moduli adattivi (componente core) nell’ambiente, abilita la funzione Componenti core dei moduli adattivi per il tuo ambiente. Quando abiliti i componenti core per il tuo ambiente, viene aggiunto il modello Moduli adattivi (componente core).
  • Un tema per moduli adattivi: un tema contiene dettagli sullo stile dei componenti e dei pannelli. Gli stili includono proprietà quali i colori di sfondo, i colori degli stati, la trasparenza, l’allineamento e le dimensioni. Quando applichi un tema, lo stile specificato si riflette sui componenti corrispondenti. Il tema Canvas viene aggiunto per impostazione predefinita quando si abilitano i Componenti core per il proprio ambiente. Puoi scaricare e personalizzare i temi standard. Per temi predefiniti puoi distribuire temi di esempio nel tuo ambiente. In questo modo è possibile iniziare a definire lo stile dei moduli e fornire una struttura di base per creare o personalizzare un tema in base alle proprie esigenze aziendali.

  • Autorizzazioni: aggiungi gli utenti a un gruppo forms-users. I membri del gruppo forms-users dispongono delle autorizzazioni per creare un modulo adattivo. Per un elenco dettagliato dei gruppi di utenti specifici per moduli, consulta Gruppi e autorizzazioni.

Creare un modulo adattivo create-an-adaptive-form

  1. Accedi alla tua istanza Autore AEM locale.

  2. Inserisci le credenziali nella pagina di accesso di Experience Manager. Dopo aver effettuato l'accesso, nell'angolo superiore sinistro selezionare Adobe Experience Manager > Forms > Forms e documenti.

  3. Selezionare Crea > Crea Forms adattivo.

  4. Seleziona un modello di Componenti core Forms adattivi e fai clic su Avanti.

  5. Viene visualizzato Aggiungi proprietà. Specificare i valori per i seguenti campi proprietà. I campi Titolo e Nome sono obbligatori:

    • Titolo: Specifica il nome visualizzato del modulo. Il titolo consente di identificare il modulo nell’interfaccia utente di Experience Manager Forms.
    • 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 del nome può contenere solo caratteri alfanumerici, trattini e trattini bassi.
    • Descrizione: Specifica le informazioni dettagliate sul modulo.
    • Libreria client temi: Specifica il tema per un modulo adattivo. Per impostazione predefinita, il tema adaptiveform.theme.canvas3 è selezionato. Puoi anche scegliere un tema diverso dal menu a discesa Libreria client tema.
    • Contenitore configurazione: definisce un percorso in cui vengono archiviati i file di configurazione per Adaptive Forms. Questi file di configurazione contengono impostazioni e proprietà relative al comportamento e all’aspetto di Adaptive Forms.
    • Tag: specifica i tag per identificare in modo univoco il modulo adattivo. Aiuto sui tag nella ricerca nel modulo. Per creare i tag, digitare i nuovi nomi dei tag nella casella Tag.
  6. Seleziona Crea. Viene creato un modulo adattivo e viene visualizzata una finestra di dialogo per aprire il modulo per la modifica.

  7. Seleziona Modifica per aprire il modulo appena creato in una nuova scheda. Il modulo si apre per la modifica e visualizza il contenuto disponibile nel modello. Viene inoltre visualizzata la barra laterale per personalizzare il modulo appena creato.

Utilizzare i componenti core di Forms adattivi per creare il modulo

Dopo aver aperto il modulo per la modifica, puoi utilizzare i componenti core Forms adattivi disponibili per aggiungere campi modulo al modulo. È possibile trascinare o utilizzare l'opzione + [inserisci componente] per aggiungere questi componenti a un modulo. Per informazioni sui Componenti core Forms adattivi disponibili, consulta la documentazione dei Componenti core AEM. Puoi anche visitare https://aemcomponents.dev/ per visualizzare i componenti core disponibili in azione.

Configurare l’azione di invio per un modulo adattivo configure-submit-action-for-form

Un’azione di invio consente di scegliere la destinazione dei dati acquisiti tramite un modulo adattivo. Viene attivato quando un utente fa clic sul pulsante Invia in un modulo adattivo. I moduli adattivi includono alcune azioni di invio pronte all’uso. Puoi anche estendere un’azione di invio predefinita per creare un’azione di invio personalizzata. Per configurare un'azione di invio per il modulo:

  1. Apri il browser Contenuto e seleziona il componente Contenitore guida del modulo adattivo.

  2. Fare clic sull'icona delle proprietà del Contenitore Guida TV Proprietà Guida . Viene visualizzata la finestra di dialogo Contenitore modulo adattivo (Adaptive Form Container).

  3. Fare clic sulla scheda Invio.

    Fai clic sullicona chiave inglese per aprire la finestra di dialogo Contenitore modulo adattivo e configurare unazione di invio

  4. Seleziona e configura un'azione Invia in base alle tue esigenze. Per informazioni dettagliate sulle azioni di invio, consulta Azione di invio modulo adattivo

Reindirizza l’utente a una pagina o mostra un messaggio di ringraziamento all’invio del modulo

All'invio di un modulo è possibile reindirizzare l'utente a un'altra pagina Web o a un messaggio. Per reindirizzare l’utente o configurare il messaggio di ringraziamento:

  1. Apri il browser Contenuto e seleziona il componente Contenitore guida del modulo adattivo.

  2. Fare clic sull'icona delle proprietà del Contenitore Guida TV Proprietà Guida . Viene visualizzata la finestra di dialogo Contenitore modulo adattivo (Adaptive Form Container).

  3. Apri la scheda Invio.

    Fai clic sullicona chiave inglese per aprire la finestra di dialogo Contenitore modulo adattivo e configurare una pagina di reindirizzamento o un messaggio di ringraziamento

    • Per configurare un URL di reindirizzamento, per l'opzione Invia selezionare l'opzione Reindirizza all'URL, quindi sfogliare e selezionare una pagina AEM Sites o specificare l'URL di una pagina esterna.

    • Per configurare un messaggio personalizzato o di ringraziamento, per l'opzione Invia selezionare l'opzione Mostra messaggio e specificare un messaggio nella casella Contenuto messaggio. Si tratta di una casella di testo RTF, è possibile utilizzare l'opzione a schermo intero per visualizzare tutti gli elementi RTF disponibili.

Configurare uno schema o un modello di dati del modulo per un modulo adattivo configure-schema-or-data-model-for-form

È possibile utilizzare il modello dati modulo per collegare un modulo a un’origine dati per inviare e ricevere dati in base alle azioni degli utenti. È possibile anche collegare un modulo a uno schema JSON per ricevere i dati inviati in un formato predefinito. In base al requisito, connetti il modulo a uno schema JSON o a un modello di dati del modulo:

Configurare uno schema JSON o un modello dati modulo per il modulo

Per configurare uno schema JSON o un modello dati modulo per il modulo:

  1. Apri il browser Contenuto e seleziona il componente Contenitore guida del modulo adattivo.

  2. Fare clic sull'icona delle proprietà del Contenitore Guida TV Proprietà Guida . Viene visualizzata la finestra di dialogo Contenitore modulo adattivo (Adaptive Form Container).

  3. Apri la scheda Modello dati.

    Fai clic sullicona chiave inglese per aprire la finestra di dialogo Contenitore modulo adattivo e configurare uno schema JSON o un modello dati modulo

  4. Seleziona e configura uno schema JSON o un modello dati modulo, in base ai requisiti:

    • Quando si seleziona l'opzione Modello modulo, utilizzare l'opzione Seleziona modello dati modulo per selezionare un modello dati modulo preconfigurato.
    • Quando selezioni l'opzione Schema, utilizza l'opzione Schema per selezionare uno schema JSON per il modulo.
  5. Fai clic su Fine.

NOTE
Puoi modificare lo schema JSON o il modello dati del modulo per un modulo adattivo utilizzando le proprietà Contenitore guida.

Configurare un servizio di precompilazione configure-prefill-service-for-form

Puoi utilizzare il servizio di precompilazione per compilare automaticamente i campi di un modulo adattivo utilizzando dati esistenti. Quando un utente apre un modulo, i valori di tali campi vengono precompilati. Operazioni disponibili:

Utilizzare il servizio di precompilazione del modello dati modulo per precompilare i campi di un modulo adattivo fdm-prefill-service

È possibile utilizzare il servizio di precompilazione del modello dati modulo per precompilare i campi di un modulo adattivo utilizzando un modello dati modulo o un servizio di precompilazione personalizzato. Il servizio di precompilazione del modello dati modulo utilizza il servizio Get Service del modello dati modulo configurato per recuperare i dati. Per utilizzare il servizio di precompilazione del modello dati modulo per un modulo adattivo:

  1. Apri il browser Contenuto e seleziona il componente Contenitore guida del modulo adattivo.
  2. Fare clic sull'icona delle proprietà del Contenitore Guida TV Proprietà Guida . Viene visualizzata la finestra di dialogo Contenitore modulo adattivo (Adaptive Form Container).
  3. Fai clic sull'icona Proprietà contenitore modulo adattivo Proprietà contenitore modulo adattivo . Viene visualizzata la finestra di dialogo Contenitore modulo adattivo per configurare i modelli dati.
    Fai clic sullicona chiave inglese per aprire la finestra di dialogo Contenitore modulo adattivo e configurare una pagina di reindirizzamento o un messaggio di ringraziamento
  4. Seleziona un modello di dati modulo. Apri la scheda Base. Nel servizio di precompilazione, selezionare Servizio di precompilazione modello dati modulo.
  5. Fai clic su Fine. Il modulo adattivo è ora configurato per l’utilizzo della precompilazione del modello dati del modulo. Ora puoi utilizzare l'editor regole per creare regole per precompilare i campi del modulo.

Come rinominare un modulo adattivo per l’AEM? rename-an-AEM-Adaptive-Form

Per rinominare un modulo adattivo, effettua le seguenti operazioni:

  1. Seleziona un modulo adattivo nell’interfaccia utente di AEM Forms.

  2. Fai clic su Proprietà nella barra superiore.

    Proprietà

  3. Modifica il nome del modulo nella scheda Titolo, come illustrato nell'immagine seguente.

  4. Fare clic su Salva e chiudi.

    Rinominare un modulo adattivo AEM

Passaggio successivo

Consulta anche

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