Introduction to authoring adaptive forms

Panoramica

I moduli adattivi consentono di creare moduli coinvolgenti, reattivi, dinamici e adattivi. AEM Forms offre un'interfaccia utente intuitiva e componenti forniti con i prodotti per la creazione e l'utilizzo di moduli adattivi. È possibile scegliere di creare un modulo adattivo basato su un modello di modulo o uno schema oppure senza un modello di modulo. È importante scegliere con attenzione il modello di modulo che non solo si adatta alle proprie esigenze ma che amplia gli investimenti infrastrutturali e le risorse esistenti. Per creare un modulo adattivo è possibile scegliere tra le seguenti opzioni:

  • Uso di un modello dati modulo
    L'integrazione dei dati consente di integrare entità e servizi da origini dati diverse in un modello di dati del modulo che è possibile utilizzare per creare moduli adattivi. Scegliere il modello dati del modulo se il modulo adattivo creato prevede il recupero e la scrittura di dati da e verso più origini dati.

  • Utilizzando un modello di modulo XDP Si tratta di un modello di modulo ideale se si dispone di investimenti in moduli XFA o XDP. Fornisce un modo diretto per convertire i moduli basati su XFA in moduli adattivi. Eventuali regole XFA esistenti vengono conservate nei moduli adattivi associati. I moduli adattivi risultanti supportano i costrutti XFA, ad esempio convalide, eventi, proprietà e pattern.

  • L'utilizzo di uno schema XML Definition (XSD) o di uno schema XML e JSON rappresenta la struttura in cui i dati vengono prodotti o utilizzati dal sistema back-end della tua organizzazione. È possibile associare lo schema a un modulo adattivo e utilizzarne gli elementi per aggiungere contenuto dinamico al modulo adattivo. Gli elementi dello schema saranno disponibili per l'uso nella scheda Oggetti modello dati del browser Contenuto durante la creazione di moduli adattivi.

  • Uso di uno o più modelli di modulo

I moduli adattivi creati con questa opzione non utilizzano alcun modello di modulo. I dati XML generati da tali moduli hanno una struttura semplice con campi e valori corrispondenti.

Per ulteriori informazioni sulla creazione di un modulo adattivo, vedere Creazione di un moduloadattivo.

Interfaccia utente per la creazione di moduli adattivi

L’interfaccia touch per la creazione di moduli adattivi è intuitiva e fornisce:

  • Funzionalità di trascinamento
  • Componenti per moduli standard
  • Archivio integrato per le risorse

Quando si crea un nuovo modulo o si modifica un modulo adattivo esistente, si utilizzano i seguenti elementi dell'interfaccia utente:

Interfaccia utente per la creazione di moduli adattivi

A. Barra laterale B. Pagina della barra degli strumenti C. Pagina del modulo adattivo

La barra laterale consente di:

  • Vedere il contenuto del modulo, ad esempio pannelli, componenti, campi e layout.

  • Modificare le proprietà del componente.

  • Cercare, visualizzare e utilizzare le risorse nell'archivio AEM Digital Asset Management (DAM).

  • Aggiungere componenti al modulo.

    Barra laterale
    Fare clic per ingrandire

A. Browser dei contenuti B. Browser delle proprietà C. Browser delle risorse D. Browser componenti

La barra laterale comprende i seguenti browser:

  • Browser contenuti

    Nel browser del contenuto, potete visualizzare

    • Oggetti modulo

      Mostra la gerarchia degli oggetti del modulo. L’autore può passare a un componente modulo specifico toccando tale elemento nella struttura ad albero oggetto modulo. L'autore può cercare gli oggetti e riorganizzarli da questa struttura ad albero.

    • Oggetti modello dati

      Consente di visualizzare la gerarchia del modello di modulo.

      Consente di trascinare gli elementi del modello di modulo nel modulo adattivo. Gli elementi aggiunti vengono automaticamente convertiti in componenti modulo, mantenendo le proprietà originali. È possibile visualizzare gli oggetti del modello dati quando il modulo utilizza lo schema XML, lo schema JSON o il modello XDP.

  • Browser proprietà

    Consente di modificare le proprietà di un componente. Le proprietà cambiano in base a un componente. Per visualizzare le proprietà del contenitore di moduli adattivi:

    Selezionate un componente, quindi toccate il livello del campo > Contenitore modulo adattivo, quindi toccate cmppr.

  • Browser risorse

    Segrega contenuti di tipi diversi, come immagini, documenti, pagine, filmati e così via.

  • Browser componenti

    Include componenti utilizzabili per creare un modulo adattivo. È possibile trascinare i componenti dal modulo adattivo per aggiungere elementi al modulo e configurare gli elementi aggiunti in base ai requisiti. La tabella seguente descrive i componenti elencati nel browser Componenti.

Componente Funzionalità
Blocco Adobe Sign Aggiunge un blocco di testo con segnaposto per i campi da compilare durante la firma tramite Adobe Sign.
Pulsante Aggiunge un pulsante che può essere configurato per eseguire azioni, ad esempio salvare, ripristinare, andare avanti, andare avanti e così via.
Captcha Aggiunge la convalida CAPTCHA utilizzando il servizio Google reCAPTCHA. Per informazioni dettagliate, vedere Uso di CAPTCHA nei moduliadattivi.
Grafico Aggiunge un grafico che può essere utilizzato in moduli adattivi e documenti per la rappresentazione visiva di dati bidimensionali in pannelli e righe di tabella ripetibili.
Casella di selezione Aggiunge una casella di controllo.
Campo immissione data Utilizzare il componente Campo immissione data nel modulo per consentire ai clienti di compilare separatamente il giorno, il mese e l'anno in tre caselle. Potete personalizzare l’aspetto del componente e modificare il formato della data. Ad esempio, puoi consentire ai clienti di inserire le date in formato MM/GG/AAAA o GG/MM/AAAA.
Selettore data Aggiunge un campo calendario per selezionare una data.
Frammento di documento Consente di aggiungere componenti riutilizzabili di una corrispondenza.
Gruppo di frammenti di documenti Consente di aggiungere un gruppo di frammenti di documento correlati che è possibile utilizzare in un modello di lettera come singola unità.
Elenco a discesa Aggiunge un elenco a discesa: selezione singola o multipla
E-mail

Aggiunge un campo per acquisire l’indirizzo e-mail. Per impostazione predefinita, il componente E-mail convalida gli indirizzi e-mail utilizzando la seguente espressione regolare.

^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$

Allegato file

Aggiunge un pulsante che consente agli utenti di sfogliare e allegare i documenti di supporto a un modulo.

Nota: Il componente File allegato supporta un set predefinito di formati di file nei moduli adattivi abilitati per Adobe Sign. Per ulteriori informazioni, vedere Formati di filesupportati.

Elenco allegati file Aggiunge un campo in cui sono elencati tutti gli allegati caricati utilizzando il componente File allegato.
Piè di pagina
Aggiunge l’intestazione della pagina che in genere include il logo di una società, il titolo del modulo e il riepilogo.
Intestazione Aggiunge il piè di pagina di pagina che in genere include informazioni sul copyright e collegamenti ad altre pagine.
Immagine Consente di inserire un’immagine.
Scelta immagine Consente ai clienti di selezionare un’immagine per fornire informazioni. Potete utilizzare le informazioni per fornire servizi personalizzati ai vostri clienti.
Pulsante Successivo Aggiunge un pulsante per passare al pannello successivo di un modulo.
Casella numerica Aggiunge un campo per l'acquisizione dei valori numerici
Stepper numerico Nel modulo è possibile utilizzare la funzione Numeric Stepper per consentire ai clienti di inserire un valore numerico che può aumentare o diminuire in base a un passaggio predefinito.
Pannello

Aggiunge un pannello o un sottopannello.

Potete anche aggiungere un componente pannello dalla barra degli strumenti del pannello principale mediante il pulsante Aggiungi pannello secondario. Analogamente, potete aggiungere una barra degli strumenti specifica per il pannello utilizzando il pulsante Aggiungi barra degli strumenti del pannello. Per configurare la posizione della barra degli strumenti del pannello, usate la finestra di dialogo Pannello di modifica.

Casella password Aggiunge un campo per l’acquisizione di una password.
Pulsante Precedente Aggiunge un pulsante che gli utenti devono usare per tornare alla pagina o al pannello precedente.
Pulsante di scelta Aggiunge pulsanti di scelta.
Pulsante Ripristina Aggiunge un pulsante per ripristinare i campi del modulo.
Pulsante di salvataggio Aggiunge un pulsante per salvare i dati del modulo.
Firma scarabocchio Aggiunge un campo per l'acquisizione delle firme a script.
Separatore Abilita la separazione visiva dei pannelli nel modulo.
Passaggio di firma Visualizza le informazioni fornite nel modulo e i campi firma che consentono all'utente di verificare e firmare il modulo.
Testo Consente di specificare testo statico.
Pulsante Invia Aggiunge un pulsante di invio per inviare il modulo all'azione di invio configurata.
Passaggio di riepilogo Invia il modulo e visualizza il testo di riepilogo specificato dagli autori dopo l'invio del modulo.
Scambia Aggiunge un interruttore che esegue un'azione di attivazione o disattivazione. Non è possibile aggiungere più di due opzioni nel componente Switch. Poiché un interruttore può avere solo due valori: Attivato o Disattivato, l'opzione obbligatoria non è applicabile. Almeno un valore viene salvato indipendentemente dall'input dell'utente.
Tabella Aggiunge una tabella che consente di organizzare i dati in righe e colonne.
Telefono

Aggiunge un campo per acquisire il numero di telefono. Il componente Telefono consente agli autori di configurare uno dei seguenti tipi di numeri di telefono. Ciascun tipo è associato a un'espressione regolare predefinita per la convalida.

  • Type International è convalidato da ^[+][0-9]{0,14}$.
  • Il tipo USPhoneNumber viene convalidato da {'+1 ('999') '999-9999}.
  • Il tipo UKPhoneNumber viene convalidato da text{'+'99 999 999 9999}.
  • Il tipo Personalizzato non fornisce un pattern di convalida predefinito. Prende il valore dell'ultimo tipo di numero di telefono selezionato. È inoltre possibile specificare un pattern di convalida personalizzato.
Condizioni d’uso
Aggiunge un campo che gli autori possono utilizzare per specificare i termini e le condizioni che gli utenti possono rivedere prima di compilare il modulo.
Casella di testo

Aggiunge una casella di testo in cui l'utente può specificare le informazioni richieste.

Per impostazione predefinita, il componente Casella di testo accetta solo testo normale. È possibile abilitare un componente Casella di testo per accettare il testo RTF. Un componente Testo RTF offre opzioni per aggiungere intestazioni, modificare gli stili di carattere (grassetto, corsivo, sottolineare i caratteri), creare elenchi ordinati e non ordinati, modificare lo sfondo del testo e il colore del testo e aggiungere collegamenti ipertestuali. Per abilitare il testo RTF per una casella di testo, abilitare l'opzione Consenti testo RTF nelle proprietà del componente.

Titolo Specifica un titolo per il modulo adattivo.
Passaggio verifica

Aggiunge un segnaposto per visualizzare il modulo compilato per la verifica da parte dell'utente.

Nota: Il modulo adattivo contenente il componente Verifica non supporta gli utenti anonimi. Inoltre, non è consigliabile utilizzare il componente Verifica in un frammento di modulo adattivo.

Procedure ottimali per l’utilizzo dei componenti

Di seguito sono riportati alcuni punti chiave e procedure ottimali da tenere presenti quando si utilizzano i componenti per moduli adattivi:

  • A ciascun componente sono associate proprietà che ne controllano l’aspetto e la funzionalità. Per configurare le proprietà di un componente, toccate il componente e toccate cmppr per aprire le proprietà del componente nel browser Proprietà.

  • Un componente è identificato con il nome del relativo elemento. Toccando cmppr, potete modificare il nome del componente modificando il valore del campo Nome ​elemento nel browser delle proprietà. Il campo Nome elemento accetta solo lettere, numeri, trattini (-) e caratteri di sottolineatura (_). Non sono consentiti altri caratteri speciali e il nome dell'elemento deve iniziare con una lettera.

  • È possibile modificare la proprietà Titolo di un componente modulo adattivo in linea nell’editor modulo senza aprire il browser Proprietà finché il titolo è visibile sul modulo. A questo scopo:

    1. Toccate per selezionare un componente con una proprietà Titolo e la cui proprietà Nascondi titolo è disabilitata.
    2. Toccate aem_6_3_edit per rendere modificabile il titolo.
    3. Modificate il titolo e toccate il tasto Invio oppure toccate un punto qualsiasi all’esterno del componente per salvare le modifiche. Toccate il tasto Esc per annullare le modifiche.
  • Alcuni componenti per moduli adattivi come E-mail e Telefono includono pattern di convalida out-of-the-box. Tuttavia, è possibile specificare la convalida personalizzata aggiornando il campo Pattern ​convalida nella scheda Pattern, all'interno delle proprietà del componente. Per ulteriori informazioni sulle convalide predefinite, vedere le descrizioni dei componenti nella tabella precedente.

  • I campi modulo adattivi, ad esempio Casella numerica e E-mail, possono essere configurati per includere tipi di input HTML5 specifici. Quando questi campi sono attivi su dispositivi mobili e tablet, la tastiera visualizza in primo piano un alfabeto, numeri e caratteri specifici, comunemente utilizzati per inserire informazioni nei campi. Consente agli utenti di immettere informazioni rapidamente senza dover alternare tra set di caratteri sul tastierino numerico. Per consentire l’input specializzato per un componente, abilitare la casella di controllo Usa numero tipo HTML nelle proprietà del componente.

  • È possibile abilitare un componente Casella di testo per accettare il testo RTF. Per abilitare il testo RTF per una casella di testo, abilitare la casella di controllo Consenti RTF nelle proprietà del componente.

  • È possibile abilitare i componenti Casella di testo, E-mail e Telefono per la compilazione automatica dei valori per campi quali nome, indirizzo, carta di credito, telefono ed e-mail dalle informazioni memorizzate nelle impostazioni di compilazione automatica del browser. Per attivare questa funzione, selezionate Abilita riempimento automatico nelle proprietà del componente, quindi selezionate un attributo di riempimento automatico. Quando un utente compila un modulo adattivo, i valori sono suggeriti dal profilo di compilazione automatica nel browser o in base ai valori precedentemente compilati dall'utente. La compilazione automatica funziona se sono attivate le impostazioni di riempimento automatico nel browser dell'utente.

  • Specificare i valori per gli elementi Pulsante di scelta e Casella di controllo nel {value}={text} formato nelle proprietà del componente.

  • Per impostazione predefinita, il componente File allegato consente a un utente di allegare un solo file. Tuttavia, è possibile configurare le proprietà del componente per supportare più allegati. Inoltre, se un utente allega più file con lo stesso nome file, gli allegati possono causare alcuni problemi. Si consiglia pertanto di associare un identificatore univoco per ciascun allegato inviato all'invio del modulo. A questo scopo:

    1. Nel server AEM Forms , accedi a Adobe Experience Manager > Strumenti > Operazioni > Console Web.
    2. Individuate e toccate Adattivo Forms Configuration Service.
    3. Nella finestra di dialogo Servizio di configurazione Forms adattivo, abilita Rendi univoci i nomi dei file. Per impostazione predefinita, è disattivata.
  • Per consentire agli utenti di allegare un PDF utilizzando il browser Safari, assicurarsi che application/pdf venga aggiunto alla proprietà Tipi di file supportati del componente Allegato file. I moduli adattivi creati con versione precedente di AEM Forms possono contenere .pdf invece di application/pdf nella proprietà Tipi di file supportati.

Per ulteriori procedure ottimali sui moduli adattivi, vedere Procedure consigliate per l'utilizzo dei moduliadattivi.

Nota

I componenti per moduli adattivi non supportano i linguaggi RTL (Right to Left). Ad esempio, ebraico.

Barra degli strumenti della pagina

La barra degli strumenti della pagina nella parte superiore contiene opzioni che consentono di visualizzare l'anteprima del modulo, modificare le proprietà del modulo e il layout del modulo. È possibile visualizzare l'anteprima del modulo al momento della creazione e apportare le modifiche necessarie. Nella barra degli strumenti della pagina sono disponibili:

  • Attiva/disattiva pannello laterale o pannellolaterale: Consente di mostrare o nascondere la barra laterale.

  • Informazioni pagina tema-opzioni: Consente di visualizzare le proprietà della pagina, pubblicare/annullare la pubblicazione di un modulo, avviare un flusso di lavoro del modulo e aprire il modulo nell’interfaccia classica.

  • Emulatore righello: Consente di emulare l'aspetto del modulo per dimensioni di visualizzazione diverse, ad esempio tablet e telefoni.

  • Modifica: Consente di selezionare altre modalità, ad esempio: Modifica, Stile, Sviluppatore e Progettazione .

    • Modifica: Consente di modificare le proprietà del modulo e dei suoi componenti. Ad esempio, aggiungere un componente, rilasciare un’immagine e specificare campi obbligatori.

    • Stile: Consente di formattare l'aspetto dei componenti del modulo. Ad esempio, in modalità stile, potete selezionare un pannello e specificarne il colore di sfondo.

    • Sviluppatore: Consente a uno sviluppatore di:

      • Scopri di quali moduli sono composti.
      • Eseguire il debug di ciò che sta accadendo dove e quando, che a sua volta aiuta a risolvere i problemi.
    • Progettazione: Consente di abilitare o disabilitare componenti personalizzati, o componenti out-of-the-box non elencati nella barra laterale.

  • Anteprima: Consente di visualizzare un'anteprima dell'aspetto del modulo al momento della pubblicazione.

Component toolbar

Barra degli strumenti del componente nell’interfaccia touch

Quando selezionate un componente, compare una barra degli strumenti che consente di utilizzarlo. Sono disponibili opzioni per tagliare, incollare, spostare e specificare le proprietà dei componenti. Le opzioni disponibili sono:

A.Configure: Toccando Configura, le proprietà del componente sono visibili nella barra laterale. La configurazione di queste proprietà consente di personalizzare l'esperienza di acquisizione dei dati. Potete modificare il nome dell’elemento del componente, specificare il testo dell’etichetta nel campo Titolo del componente. Il nome dell’elemento consente di acquisire i valori immessi dall’utente mediante il componente. Nelle proprietà del componente, potete specificare il comportamento del componente e gestire l’input dell’utente. Configurare le proprietà nella barra laterale per acquisire i dati utente e utilizzarli per un’ulteriore elaborazione. Le proprietà per il contenitore di moduli adattivi consentono di specificare librerie client, layout, temi, impostazioni del documento di registrazione, impostazioni di salvataggio, impostazioni di invio e impostazioni di metadati.

B.Copia: È possibile utilizzare l'opzione Copia per copiare un componente e incollarlo in altre aree del modulo. Quando incollate un componente, il componente incollato riceve un nuovo nome di elemento ma mantiene le proprietà del componente copiato.

C.Taglia: È possibile utilizzare l’opzione Taglia per spostare un componente da una posizione all’altra nel modulo adattivo.

D. Elimina: Consente di eliminare il componente dal modulo.

E. Inserisci: Consente di inserire un componente sopra il componente selezionato.

F. Incolla: Consente di incollare il componente tagliato o copiato utilizzando le opzioni descritte sopra.

G. Modifica regole: Consente di aprire l'editor delle regole. Per ulteriori informazioni, vedere Editor regole.

H. Gruppo: Consente di selezionare più componenti per tagliare, copiare o incollare più componenti contemporaneamente.

I. Elemento padre: Consente di selezionare l’elemento padre di un componente. Ad esempio, un campo di testo si trova all'interno di una sottosezione, che risiede in una sezione. La sezione si trova nel pannello principale della guida e il contenitore di modulo adattivo è l'elemento principale di un pannello principale della guida. Per un componente, è possibile visualizzare tutte le opzioni con i bordi inferiori ordinati della gerarchia.

Ad esempio, toccando Elemento padre per una casella di testo, è possibile visualizzare:

  • Sottosezione
  • Sezione
  • guideRootPanel
  • Contenitore di moduli adattivi

J. Altri: Offre ulteriori opzioni per l’utilizzo del componente selezionato.

  • Visualizza espressione SOM
  • Salvare un pannello come frammento (solo per i pannelli)
  • Aggiungere un pannello secondario (solo per i pannelli)
  • Barra degli strumenti del pannello Aggiungi (solo per i pannelli)
  • Sostituisci (non per i pannelli)

Adaptive form page

La pagina del modulo adattivo è il modulo effettivo. È come qualsiasi altra pagina WCM modellata come il componente WCM cq:Page . L'immagine seguente mostra la struttura del contenuto di un tipico modulo adattivo.

Struttura del contenuto di una pagina WCM modulo adattivo

La struttura del contenuto contiene in genere i seguenti componenti primari:

  • guideContainer: Livello principale di un modulo adattivo, contrassegnato come Inizio del modulo adattivo nell’interfaccia utente del modulo adattivo. In questo componente potete specificare:

    • Layout mobile del modulo adattivo: Definisce l’aspetto del modulo sui dispositivi mobili.
    • Pagina di ringraziamento: Definisce la pagina in cui l'utente viene reindirizzato dopo l'invio del modulo.
    • Invia azione: Definisce la modalità di elaborazione del modulo sul server dopo l'invio del modulo da parte dell'utente.
    • Attribuzione stile: Specifica il percorso del file CSS utilizzato per personalizzare l'aspetto del modulo.
  • rootPanel: Pannello principale di un modulo adattivo. Può contenere sottopannelli sotto il nodo degli elementi. A ciascun pannello, incluso il pannello principale, può essere associato un layout. Il layout del pannello determina il layout del modulo. Ad esempio, nel layout Accordion*, *i relativi elementi sono disposti come passi Accordion.

  • barra degli strumenti: A un contenitore di moduli adattivi è associata una barra degli strumenti globale, globale per il modulo. Questa barra degli strumenti può essere aggiunta utilizzando l’azione Aggiungi barra degli strumenti nella barra di modifica, che consente agli autori di aggiungere azioni quali Invia, Salva, Ripristina e così via.

  • risorse: Questo nodo contiene informazioni aggiuntive utilizzate per la creazione di moduli. Ad esempio, dettagli relativi al modello di modulo, alla localizzazione e così via).

In questa pagina