Creazione di componenti core basati su Adaptive Forms

L’Adobe consiglia di utilizzare i Componenti core per aggiungere un Forms adattivo a una pagina AEM Sites o a creare un Forms adattivo indipendente.

Si applica a: ❎ dei componenti core del modulo adattivo ✅ Componenti di base per moduli adattivi.

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, l’Adobe consiglia di utilizzare Componenti core Forms adattivi per creare un Forms adattivo.

Prerequisiti

Per creare un modulo adattivo è necessario quanto segue:

• Abilitare i componenti core Forms adattivi per il tuo ambiente: è richiesto il progetto Archetipo AEM versione 41 o successiva per abilitare i Componenti core per il tuo ambiente. Quando si abilitano i Componenti core per l’ambiente, viene Forms adattivo (componente core) Il modello e il tema Canvas vengono aggiunti al tuo 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 nell'ambiente. che consentono di iniziare a creare rapidamente i moduli.

  NOTA

  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 Canvas Il tema viene aggiunto per impostazione predefinita quando abiliti i componenti core per il tuo ambiente. È possibile scaricare e personalizzare i temi standard. Per pronto all’uso temi che puoi distribuire temi di esempio nell'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

1. Accedi al tuo account locale Istanza di authoring AEM.

2. Inserisci le credenziali nella pagina di accesso di Experience Manager. Dopo aver effettuato l’accesso, nell’angolo in alto a sinistra tocca Adobe Experience Manager > Moduli > Moduli e documenti.

3. Tocca Crea > Creare un Forms adattivo.

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

5. Il Aggiungi proprietà viene visualizzato. 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 nome può contenere solo caratteri alfanumerici, trattini e caratteri di sottolineatura.
   • Descrizione: Specifica le informazioni dettagliate sul modulo.
   • Libreria client tema: Specifica il tema per un modulo adattivo. Per impostazione predefinita, il adaptiveform.theme.canvas3 Il tema è selezionato. Puoi anche scegliere un tema diverso dal Libreria client tema menu a discesa.
   • Contenitore configurazione: Definisce un percorso in cui vengono memorizzati 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, digita i nuovi nomi dei tag nel Tag casella.

6. Tocca Crea. Viene creato un modulo adattivo e viene visualizzata una finestra di dialogo per aprire il modulo per la modifica.

7. Tocca 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. Puoi trascinare e rilasciare o utilizzare il tasto + [inserisci componente] per aggiungere questi componenti a un modulo. Per informazioni sulle funzioni disponibili, consulta la documentazione sui Componenti core AEM Componenti core Forms adattivi. Puoi anche visitare https://aemcomponents.dev/ per visualizzare i componenti core disponibili in azione.

Configurare l’azione di invio per un modulo adattivo

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 la Contenitore guida componente del modulo adattivo.

2. Fai clic sulle proprietà Contenitore guida icona. Viene visualizzata la finestra di dialogo Contenitore modulo adattivo (Adaptive Form Container).

3. Fai clic su Invio scheda.

   

4. Seleziona e configura un Azione di invio, in base alle tue esigenze. Per informazioni dettagliate sulle azioni di invio, vedere 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 la Contenitore guida componente del modulo adattivo.

2. Fai clic sulle proprietà Contenitore guida icona. Viene visualizzata la finestra di dialogo Contenitore modulo adattivo (Adaptive Form Container).

3. Apri Invio scheda.

   

   • Per configurare un URL di reindirizzamento, per l’opzione Invia seleziona la Reindirizza a URL e sfoglia e seleziona una pagina AEM Sites oppure specifica l’URL di una pagina esterna.

   • Per configurare un messaggio personalizzato o di ringraziamento, per all’opzione Invia, seleziona la Mostra messaggio e inserisci un messaggio nella sezione Contenuto del messaggio casella. 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

È 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. Puoi 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:

• Creare uno schema JSON e caricarlo nell’ambiente
• Creare un modello di dati 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 la Contenitore guida componente del modulo adattivo.

2. Fai clic sulle proprietà Contenitore guida icona. Viene visualizzata la finestra di dialogo Contenitore modulo adattivo (Adaptive Form Container).

3. Apri Modello dati scheda.

   

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

   • Quando selezioni il Modello modulo , utilizza Seleziona modello dati modulo per selezionare un modello di dati modulo preconfigurato.
   • Quando selezioni il Schema , utilizza Schema per selezionare uno schema JSON per il modulo.

5. Clic Fine.

Configurare un servizio di precompilazione

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:

• Creare un servizio di precompilazione personalizzato
• Utilizza il servizio di precompilazione del modello dati del modulo

Utilizzare il servizio di precompilazione del modello dati modulo per precompilare i campi di un modulo adattivo

È 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 del modulo utilizza Ottieni il servizio del modello di dati del 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 la Contenitore guida componente del modulo adattivo.
2. Fai clic sulle proprietà Contenitore guida icona. Viene visualizzata la finestra di dialogo Contenitore modulo adattivo (Adaptive Form Container).
3. Fai clic sulle proprietà Contenitore modulo adattivo icona. Viene visualizzata la finestra di dialogo Contenitore modulo adattivo per configurare i modelli dati.
   
4. Seleziona un modello di dati modulo. Apri Base scheda. Nel servizio di preriempimento, seleziona Servizio preriempimento modello dati modulo.
5. Clic Fine. Il modulo adattivo è ora configurato per l’utilizzo della precompilazione del modello dati del modulo. Ora è possibile utilizzare editor di regole per creare regole per precompilare i campi del modulo.

Passaggio successivo

• Utilizza l’editor di regole per aggiungere un comportamento dinamico al modulo
• Creazione o personalizzazione di temi per Forms adattivo basato su Componenti core

Consulta anche

• Creare componenti core basati sul modulo adattivo
• Creare o aggiungere un modulo adattivo a una pagina o a un frammento di esperienza di AEM Sites
• Modelli di temi e modelli di dati modulo di esempio