Guida a Forms di AEM 6.4
Note sulla versione
- Note sulla versione
- Riepilogo delle nuove funzioni
- Funzioni obsolete
Guida introduttiva
- Introduzione ad AEM Forms
- Introduzione alla creazione di moduli adattivi
- Introduzione alle comunicazioni interattive
- Introduzione alla gestione dei moduli
- Esercitazione: Creare il primo modulo adattivo
- Esercitazione: Creare la prima comunicazione interattiva
- Materiali di riferimento AEM Forms
Installare e configurare AEM Forms
- Architettura e topologie di implementazione per AEM Forms
- Scelta di un tipo di persistenza per un’installazione di AEM Forms
- Installare AEM Forms su OSGi
- Installare AEM Forms su JEE
- Configura Moduli AEM
Aggiornare AEM Forms
- Percorsi di aggiornamento disponibili
- Aggiornare AEM Forms su OSGi
- Aggiornare AEM Forms su JEE
Gestione di AEM Forms
- AEM Forms su gruppi e privilegi OSGi
- Creazione di nuove cartelle per classificare i moduli
- Ricerca di moduli e risorse
- Gestire i metadati dei moduli
- Scaricare un modello di modulo XFA o PDF
- Eliminazione di moduli e risorse correlate
- Ottenimento di documenti XDP e PDF in AEM Forms
- Importazione ed esportazione di risorse in AEM Forms
- Supporto di nuove impostazioni internazionali per la localizzazione di moduli adattivi
- Gestione dei dati utente
- Hardening dell’ambiente AEM Forms
Modello dati modulo
- Introduzione all’integrazione dei dati di AEM Forms
- Configurare origini dati
- Configurazione di Microsoft Dynamics
- Crea modello dati modulo
- Utilizzare il modello dati del modulo
- Utilizzare il modello dati del modulo
Forms adattivo - Authoring di base
- Procedure consigliate per l’utilizzo dei moduli adattivi
- Creazione di un modulo adattivo
- Frammenti di moduli adattivi
- Configurazione dell’azione Invia
- Uso del CAPTCHA nei moduli adattivi
- Parole chiave per moduli adattivi
- Tabelle nei moduli adattivi
- Salvataggio automatico di un modulo adattivo
- Configurazione della pagina di reindirizzamento
- Creazione di moduli adattivi con accesso facilitato
- Creazione di moduli con sezioni ripetibili
- Incorporare un modulo adattivo o una comunicazione interattiva nella pagina AEM siti
- Incorporare un modulo adattivo in una pagina web esterna
- Stile in linea dei componenti per moduli adattivi
- Introduzione alla sequenza di moduli a più passaggi
- Funzionalità di layout dei moduli adattivi
- Testo segnaposto in AEM Forms
- Anteprima di un modulo
- Riutilizzo dei moduli adattivi
- Componente separatore nei moduli adattivi
- Applicazione di firme elettroniche a un modulo utilizzando firme a mano libera
- Scelte rapide da tastiera di AEM Forms
- Associazione dei revisori per l’invio a un modulo
- Guida all’authoring nel contesto per i campi del modulo
Forms adattivo - Authoring avanzato
- Creazione di moduli adattivi tramite lo schema JSON
- Creazione di moduli adattivi tramite schema XML
- Utilizzo di Adobe Sign in un modulo adattivo
- Creazione e utilizzo dei temi
- Editor di regole per moduli adattivi
- API per richiamare il servizio del modello dati modulo dai moduli adattivi
- Invio asincrono di moduli adattivi
- Creare un modulo adattivo utilizzando un set di moduli adattivi
- Modelli di modulo adattivi
- Espressioni dei moduli adattivi
- Genera documento di record per i moduli adattivi
- Miglioramento delle prestazioni dei moduli di grandi dimensioni con caricamento lento
- Precompilare i campi del modulo adattivo
- Utilizzo di espressioni SOM nei moduli adattivi
- Aggiunta di informazioni dai dati utente ai metadati di invio del modulo
- Supporto XFA nei moduli adattivi basati su XDP
- Modifica del contenuto della pagina Zero in Designer
- Concedere l’accesso all’editor di regole a specifici gruppi di utenti
- Utilizzo AEM flusso di lavoro di traduzione per localizzare i moduli adattivi e il documento di registrazione
- Verifica automatica dei moduli adattivi
- Costruzioni di stile per i moduli adattivi
- Sincronizzazione di Adaptive Forms con i modelli di moduli XFA
- Integrare Adobe Sign con AEM Forms
- Creazione e gestione di revisioni per le risorse nei moduli
- Messaggi di errore di convalida standard per i moduli adattivi
Comunicazioni interattive
- Introduzione all’interfaccia utente per l’authoring delle comunicazioni interattive
- Creare una comunicazione interattiva
- Utilizzo dei grafici nelle comunicazioni interattive
- Testi nelle comunicazioni interattive
- Condizioni delle comunicazioni interattive
- Preparare e inviare comunicazioni interattive tramite l’interfaccia utente dell’agente
- Canale di stampa e canale web
- Proprietà di configurazione di Interactive Communications
Flussi di lavoro
- Flusso di lavoro incentrato su Forms su OSGi
- Flusso di lavoro incentrato su Forms su OSGi - Riferimento dettagliato
- Seleziona dinamicamente un utente o un gruppo per i passaggi del flusso di lavoro incentrati su AEM Forms
- Azioni e funzionalità dei flussi di lavoro AEM incentrati sui moduli sui flussi di lavoro OSGi e JEE per AEM Forms
- Avviare le API di Document Services dal flusso di lavoro AEM
AEM Forms Workspace
- Introduzione all’area di lavoro di AEM Forms
- Utilizzo dell’area di lavoro di AEM Forms
- Architettura di AEM Forms Workspace
- Funzionalità dell’area di lavoro di AEM Forms non disponibili nell’area di lavoro di Flex
- Funzionalità dell’area di lavoro di Flex non disponibili nell’area di lavoro di AEM Forms
- Interazione con la colonna vertebrale
- Descrizione dei componenti riutilizzabili
- Dettagli del documento per il renderer
- Integrazione dei componenti dell’area di lavoro AEM Forms nelle applicazioni web
- Nuovo servizio di rendering e invio
- Informazioni sulla struttura delle cartelle
- Integrazione di applicazioni di terze parti nell’area di lavoro di AEM Forms
- Descrizione dell’oggetto JSON dell’area di lavoro AEM Forms
- Introduzione alla personalizzazione dell’area di lavoro AEM modulo
- Passaggi generici per la personalizzazione dell’area di lavoro AEM Forms
- Modifica delle impostazioni internazionali dell’interfaccia utente di AEM Forms Workspace
- Creazione di una nuova schermata di accesso
- Personalizzazione delle finestre di dialogo degli errori
- Personalizzazione delle schede per un’attività
- Personalizzazione della pagina dei dettagli dell’attività
- Personalizzazione dell’elenco delle istanze del processo
- Personalizzazione delle azioni attività
- Visualizzazione di dati aggiuntivi nell’elenco ToDo
- Ottenimento di variabili di attività nell’URL di riepilogo
- Personalizzare le immagini utilizzate nelle azioni del percorso
- Minificazione dei file JavaScript
- Personalizzare le tabelle di tracciamento
- Aggiornamento del collegamento alla documentazione
- Utilizzo dei set di moduli nell’area di lavoro di AEM Forms
- API utilizzate nell’area di lavoro di AEM Forms
- Avvio di un nuovo processo con dati di processo esistenti nell’area di lavoro di AEM Forms
- Hosting di due istanze dell’area di lavoro AEM Forms su un server
- Modifica della combinazione di colori dell’interfaccia
- Modifica del font nell’interfaccia
- Modifica del logo dell’organizzazione per il branding
- Visualizzazione delle informazioni nel riquadro Riepilogo attività
- Visualizzazione dell’avatar utente
- Guida introduttiva all’area di lavoro di AEM Forms
- Gestione delle attività in una gerarchia organizzativa utilizzando la vista Gestione
- Avvio dei processi
- Tracciamento dei processi
- Gestori di accesso singolo e timeout
- Utilizzo di un modulo adattivo in HTML Workspace
- Integrazione dell’area di lavoro AEM forms con Microsoft Office SharePoint Server
- Utilizzo degli elenchi A-do
- Linee guida per la risoluzione dei problemi relativi all’area di lavoro di AEM Forms
app AEM Forms
- Introduzione all’app AEM Forms
- Configurare l’ambiente per l’app AEM Forms
- Configurare il progetto Xcode e creare l’app iOS
- Creazione di un’app AEM Forms sicura per iOS
- Configurare il progetto Visual Studio e creare l’app Windows
- Configurare il progetto Android Studio e creare l’app Android
- Creare l’app AEM Forms Android
- Distribuire l’app AEM Forms
- Personalizzazione dei movimenti
- Personalizzazione branding
- Personalizzazione del tema
- Accesso all’app AEM Forms
- Schermata principale
- Sincronizzazione dell’app
- Uso di un modulo
- Utilizzo dei punti iniziali
- Apertura di un’attività
- Salvataggio di un’attività o di un modulo come bozza
- Utilizzo del salvataggio automatico nell’app AEM Forms
- Salvare i moduli come modelli
- Aggiunta di allegati
- Utilizzo della modalità offline
- Aggiornamento delle impostazioni generali
- Risolvere i problemi relativi all’app AEM Forms
Moduli HTML5
- Introduzione ai moduli di HTML5
- Guida introduttiva ai moduli di HTML5
- Architettura dei moduli di HTML5
- Differenziazione delle funzioni tra moduli e PDF forms di HTML5
- Domande frequenti per HTML5 forms
- Progettazione di modelli di modulo per i moduli HTML5
- Best practice per i moduli HTML5
- Progettazione di moduli HTML5 con accesso facilitato
- Genera l’anteprima di un modulo XDP in HTML5
- Rendering del modello di modulo per i moduli HTML5
- Abilitazione degli allegati per un modulo HTML5
- Proxy del servizio HTML5 forms
- Ottimizzazione dei moduli HTML5
- assistenti vocali per moduli HTML5
- Creazione di un profilo personalizzato per i moduli HTML5
- Lingue da destra a sinistra nei moduli di HTML5
- Integrazione di Form Bridge con il portale personalizzato per i moduli HTML5
- Creare un aspetto personalizzato nei moduli di HTML5
- Modifica degli stili predefiniti dei moduli di HTML5
- Supporto della clausola immagine per i moduli HTML5
- Creazione di tabelle complesse con accesso facilitato nei moduli di HTML5
- Creazione di stili CSS per i moduli HTML5
- Personalizzazione dei messaggi di errore per i moduli di HTML5
- Salvataggio di un modulo HTML5 come bozza
- Abilitare la registrazione per i moduli HTML5
- Debug dei moduli di HTML5
- Supporto degli script per i moduli HTML5
- Set di moduli in AEM Forms
Lettere e corrispondenze
- Panoramica sulla gestione della corrispondenza
- Progettazione layout
- Dizionario dati
- Frammenti del documento
- Crea lettera
- Crea corrispondenza
- Funzioni remote in Expression Builder
- Gestire le immagini della firma dell’agente
- Post-elaborazione di lettere e comunicazioni interattive
- Aggiungi un’azione personalizzata alla vista Elenco risorse
- Aggiungi azione/pulsante personalizzato nell’interfaccia utente Crea corrispondenza
- Aggiungere proprietà personalizzate alle risorse di Gestione Corrispondenza
- Personalizzare l’interfaccia utente per la creazione della corrispondenza
- Personalizza editor di testo
- Gestione della corrispondenza: Risoluzione dei problemi
- API per accedere alle istanze di lettere
- Integrazione dell’interfaccia utente Crea corrispondenza con il portale personalizzato
- Caratteri speciali personalizzati in Gestione Corrispondenza
- Filigrana personalizzata nell’anteprima di PDF lettera
- Configurazione di una soluzione di gestione della corrispondenza
- Condizione in linea e ripetizione in comunicazioni interattive e lettere
- Frammenti del documento
- Proprietà di configurazione della gestione della corrispondenza
Integrare AEM Forms con le soluzioni Experience Cloud
- Creare esperienze mirate in AEM Forms
- Misurare e migliorare l’efficacia e la conversione dei moduli
- Configurazione di analisi e rapporti
- Visualizzare e comprendere i rapporti di AEM Forms Analytics
- Creazione e gestione di test A/B per i moduli adattivi
Pubblicare ed elaborare AEM Forms
- Introduzione alla pubblicazione di moduli su un portale
- Esempio per l’integrazione del componente bozze e invii con il database
- Configurazione dei servizi di archiviazione per bozze e invii
- Gestione di applicazioni e attività Forms nella casella in entrata AEM
- Cartella osservata in AEM Forms
- Componente Bozze e invii
- Incorporazione di un componente collegamento in una pagina
- Pubblicazione e annullamento della pubblicazione di moduli e documenti
- Inserimento di moduli in una pagina web tramite API
- Accesso e compilazione dei moduli pubblicati
- Invio di una conferma dell’invio di un modulo via e-mail
- Creare o configurare una cartella controllata
- Utilizzare modelli e-mail personalizzati in un passaggio Assegna attività
- Utilizzare i metadati in una notifica e-mail
Portale Forms
- Personalizzazione dei modelli per i componenti del portale dei moduli
- Abilitazione dei componenti del portale moduli
- Creazione di una pagina del portale moduli
- API per l’utilizzo dei moduli inviati nel portale moduli
- Archiviazione personalizzata per le bozze e i componenti di invio
Servizi documentali
- Panoramica di AEM Document Services
- Servizio Forms
- Servizio di output
- Servizio ConvertPDF
- Servizio Forms barcoded
- Utilizzo del servizio Assembler
- Utilizzare HSM per firmare o certificare digitalmente i documenti
- Utilizzo di AEM Document Services a livello di programmazione
- Utilizzo dell’API sendToPrinter
Document Security
- Soluzioni per la sicurezza dei documenti
- Abilita AEM per cercare documenti PDF protetti per la protezione dei documenti
- Reader che estende i documenti PDF protetti da policy utilizzando la Libreria di protezione portatile
- Abilita AEM per cercare documenti PDF e Microsoft Office protetti da protezione dei documenti
- Protect un documento per conto di un altro utente
Forms Designer
- Utilizzo di Designer
- Designer - Esercitazioni di avvio rapido
- Designer - Esempi
- Designer - Nozioni di base sugli script
- Designer - Riferimento script
- Designer - Riferimento FormCalc
- Uso della firma digitale nei moduli di HTML5
Personalizzare AEM Forms
- Framework di aspetto per i moduli adattivi e HTML5
- Creazione di un modello di modulo adattivo personalizzato
- Creazione di componenti di layout personalizzati per i moduli adattivi
- Aggiunta di un’azione personalizzata agli elementi dell’elenco moduli
- Personalizzare il layout e il posizionamento dei messaggi di errore di un modulo adattivo
- Creazione di un’azione personalizzata della barra degli strumenti
- Personalizzazione del tracciamento degli eventi del modulo
- Creare un aspetto personalizzato per i campi modulo adattivo
- Personalizzazione dei servizi di dati Bozza e Invio
- Compilazione dinamica di elenchi a discesa
- Scrittura di un’azione di invio personalizzata per i moduli adattivi
- Creazione di un layout personalizzato della barra degli strumenti
- Visualizzazione dei componenti in base al modello utilizzato
- Creazione di temi modulo adattivo personalizzati
Rapporti sulle transazioni
- Panoramica dei rapporti sulle transazioni
- Visualizzazione e comprensione dei rapporti sulle transazioni
- API fatturabili per report transazioni
- Registra una transazione per implementazioni personalizzate
Aiuto per l’amministratore per AEM Forms su JEE
- Introduzione
  - Impostazioni generali di AEM Forms
  - Aggiornare il tipo di licenza per la distribuzione
- Configurazione e gestione dei domini
  - Aggiunta di domini
  - Eliminare un dominio
  - Configurare le impostazioni di blocco dell’account
  - Modifica e conversione di domini esistenti
  - Configurazione dei provider di autenticazione
  - Sincronizzazione delle directory
  - Configurazione delle directory
- Configurazione della gestione utente
  - Modificare l’ordine di valutazione per l’autenticazione
  - Configurare la password di binding LDAP
  - Configurare AEM moduli per la preacquisizione delle informazioni di dominio
  - Configurazione dell’autenticazione basata su certificato
  - Configurare le impostazioni del provider di servizi SAML
  - Abilitazione del single sign-on nei moduli AEM
  - Configurare la gestione utente per un server LDAP abilitato per SSL
  - Importazione ed esportazione del file di configurazione
  - Configurare attributi di sistema avanzati
  - Prevenzione degli attacchi CSRF
- Configurazione e organizzazione degli utenti
  - Aggiunta e configurazione di utenti
  - Provisioning puntuale degli utenti
  - Creazione e configurazione di gruppi
  - Cercare un utente o un gruppo
  - Creazione e configurazione di ruoli
- Connessione a un sistema di gestione dei contenuti
  - Configurazione del connettore per EMC Documentum
  - Configurazione del connettore per IBM FileNet
  - Configurazione del connettore per IBM Content Manager
  - Configurazione del connettore per Microsoft SharePoint
- Gestione di certificati e credenziali
  - Aggiunta e rimozione di credenziali per nome utente e password
  - Gestione degli elenchi di revoche dei certificati
  - Nozioni di base sulla gestione di certificati e credenziali
  - Gestione dei certificati
  - Gestione delle credenziali HSM
  - Gestione delle credenziali locali
- Importazione e gestione di applicazioni e archivi
  - Modificare il numero di elementi visualizzati nelle pagine Applicazioni e servizi
  - Importare e gestire archivi
  - Importare e gestire le applicazioni
- Gestione dei servizi
  - Configurare le impostazioni del servizio
  - Avvio e arresto dei servizi
- Gestione degli endpoint
  - Aggiunta, abilitazione, modifica o rimozione di endpoint
  - Configurazione degli endpoint e-mail
  - Configurazione degli endpoint remoti
  - Configurazione degli endpoint della cartella controllati
  - Configurazione degli endpoint di Task Manager
  - Tipi di endpoint
- Configurazione delle estensioni Acrobat Reader DC
  - Tipi di certificato utilizzati dalle estensioni Acrobat Reader DC
  - Riconoscere certificati validi e scaduti nei documenti PDF
  - Configurazione delle estensioni Acrobat Reader DC per l’acquisizione dei dati
  - Verifica informazioni sull’uso delle credenziali
  - Configurazione delle credenziali per l’utilizzo con le estensioni Acrobat Reader DC
  - Verifica i diritti di utilizzo di un file PDF
  - Abilitazione dei commenti online per il plug-in browser Web Adobe Reader
  - Impostazione dei valori di timeout per l’uso con le estensioni Acrobat Reader DC
- Utilizzo di PDF Generator
  - Introduzione all’utilizzo di PDF Generator
  - Abilitazione delle conversioni di file multithread
  - Configurazione delle impostazioni di Adobe PDF
  - Configurazione delle impostazioni di protezione
  - Configurazione delle impostazioni del tipo di file
  - Importazione ed esportazione di file di configurazione di PDF Generator
  - Abilita supporto PDF/A
  - Configurazione di una stampante di rete PDFG (solo Windows)
  - Configurazione dei font di fallback
  - Modifica delle impostazioni di conversione di esportazione di PDF
  - Conversione di file tramite PDF Generator
- Configurazione di SSL
  - Panoramica sulla configurazione di SSL
  - Configurazione di SSL per il server applicazioni JBoss
  - Configurazione di SSL su Windows Vista
  - Configurazione di SSL per il server WebLogic
  - Configurazione di SSL per WebSphere Application Server
- Utilizzo della protezione dei documenti
  - Informazioni sulla protezione dei documenti
  - Consegna sicura di informazioni ad alto volume
  - Configurazione delle opzioni client e server
  - Gestione degli account utente invitati e locali
  - Controllo dell’accesso ai documenti protetti da policy
  - Monitoraggio degli eventi
  - Creazione e gestione dei criteri
  - Utilizzo delle pagine web sulla sicurezza dei documenti
  - Creazione e gestione dei set di criteri
  - Registrazione come utente
- Configurazione di Forms
  - Nozioni di base sulla configurazione dei moduli
  - Impostazione delle opzioni di internazionalizzazione
  - Configurazione della memorizzazione in cache per Forms
  - Specifica delle opzioni di configurazione XCI
  - Configurazione dell’output del modulo
  - Specifica dei font da incorporare
  - Configurazione delle posizioni per Forms
  - Specifica delle impostazioni di protezione
  - Configurazione dei messaggi di convalida
- Configurazione dell’output
  - Panoramica del servizio di output
  - Modificare il set di caratteri
  - Specificare le opzioni di configurazione XCI
  - Configurazione della memorizzazione in cache per l’output
  - Specificare le posizioni dei file per l’output
  - Rendi disponibili i font
  - Specificare i font da incorporare
  - Specificare le impostazioni di protezione
- Configurazione del flusso di lavoro dei moduli
  - Informazioni sull’amministrazione e la terminologia dei processi
  - Gestione dei processi
  - Configurazione dei calendari aziendali
  - Panoramica del flusso di lavoro Forms
  - Configurazione delle impostazioni di Fuori sede
  - Ricerca di istanze del processo
  - Configurazione delle impostazioni del server
  - Utilizzo di operazioni e rami bloccati
  - Configurazione delle code condivise
  - Utilizzo delle attività
- Configurazione di Workspace
  - Panoramica di Workspace
  - Importazione ed esportazione di impostazioni globali
  - Impostazione del messaggio del giorno
  - Personalizzazione dei modelli di ricerca
  - Gestione delle categorie visualizzate in Workspace
- Monitoraggio integrità
  - Panoramica di Health Monitor
  - Ottimizzazione delle prestazioni di Health Monitor
  - Visualizza le statistiche relative a Work Manager
  - Visualizza informazioni sul sistema
  - Eliminare i record dal database di Job Manager
- Manutenzione dei moduli AEM
  - File di registro
  - User Management
  - Monitoraggio delle distribuzioni di moduli AEM
  - Work Manager e limitazione
  - Esecuzione di moduli AEM in modalità manutenzione
- Gestione del database dei moduli AEM
  - Database DB2: Esecuzione settimanale di un processo
  - Soglia massima cursori aperti del database di Oracle
  - Database IBM DB2: Esecuzione di comandi per la manutenzione regolare
  - Rimozione dei dati del processo
  - Database Microsoft SQL Server: Ottimizzazione della configurazione
  - Suggerimenti per ridurre al minimo la crescita del database
- Manutenzione dell’Application Server
  - Siti Web del server applicazioni
  - Directory di archiviazione dei documenti globali
  - Considerazioni sull’esecuzione di AdministrationConsole
  - Avvio e arresto del server WebLogic
  - Miglioramento delle prestazioni del server applicazioni
  - Avvio e arresto di WebSphere Application Server
- Backup e ripristino dei moduli AEM
  - Backup e ripristino del repository EMC Documentum
  - Abilitazione e disabilitazione della modalità di backup sicuro
  - Backup dei dati dei moduli AEM
  - File di backup e ripristino
  - Strategia di backup e ripristino per i moduli AEM
  - Limitazioni del backup di PDF Generator
  - Strategie di backup per le cartelle controllate
  - Ripristino dei dati dei moduli AEM
  - Strategia di backup per il connettore per gli utenti EMC Documentum
  - Strategia di backup e ripristino in un ambiente cluster
- Servizio informazioni di sistema
  - Configurazione del servizio informazioni di sistema
  - API del servizio informazioni di sistema
Reporting processi
- Introduzione alla generazione di rapporti sui processi
- Guida introduttiva alla generazione di rapporti sui processi
- Come funziona il reporting dei processi
- Rapporti predefiniti in Process Reporting
- Report personalizzati in Reporting dei processi
- Query ad hoc nel reporting dei processi
- Risoluzione dei problemi di reporting dei processi
Guida per gli sviluppatori
- Nozioni di base sugli sviluppatori
- HTML Template Language
- AEM plug-in per il debug dei moduli adattivi
- Riferimento API Java di AEM Forms
- Riferimento API di AEM Forms su JEE Java
- API di Form Bridge per moduli HTML5
- Riferimento API della libreria JavaScript per Forms adattivo
- Servizio di assemblaggio e riferimento DDX
- Guida di Workbench
- Programmazione con AEM Forms su JEE

Personalizzare lo stile del modulo adattivo

Scopri come creare un tema personalizzato, personalizzare lo stile dei singoli componenti e utilizzare i font web in un tema

Questa esercitazione è un passaggio della serie Crea il tuo primo modulo adattivo . Si consiglia di seguire la serie in sequenza cronologica per comprendere, eseguire e illustrare il caso d’uso completo dell’esercitazione.

Informazioni sull'esercitazione

È possibile utilizzare i temi per fornire un aspetto e uno stile unici a un modulo adattivo. Puoi applicare i temi predefiniti forniti con l’editor di moduli adattivi o creare temi personalizzati. AEM Forms fornisce un editor di temi per creare temi personalizzati. Un singolo tema può dare un aspetto diverso allo stesso modulo adattivo aperto su dispositivi mobili, tablet o desktop. Qualsiasi conoscenza precedente di CSS o LESS non è necessaria per utilizzare l'editor di temi, ma è desiderato.

Al termine dell’esercitazione, imparerai a:

Applicare un tema preconfigurato a un modulo adattivo
Creare un tema per un modulo adattivo utilizzando l’editor di temi
Personalizzare lo stile dei singoli componenti
Sezione bonus: Utilizzare i font web in un tema personalizzato

Dopo aver completato l’esercitazione, il modulo avrà un aspetto simile al seguente:

Modulo con tema personalizzato

Prima di iniziare

Scarica le immagini in stile intestazione e logo, riportate di seguito, sul computer locale. L’intestazione del modulo adattivo shipping-address-add-update-form utilizza lo stile dell’intestazione e le immagini del logo. L’immagine in stile intestazione viene visualizzata sul lato destro dell’intestazione.

Ottieni file

Passaggio 1: Applica un tema al modulo adattivo

L’editor di moduli adattivi offre diversi temi predefiniti. Se si intende non utilizzare uno stile personalizzato per il modulo adattivo, è anche possibile pubblicare i moduli adattivi con un tema preconfigurato. I temi sono indipendenti dai moduli adattivi. È possibile applicare lo stesso tema a più moduli adattivi. Per applicare un tema a un modulo adattivo:

Apri il modulo adattivo per la modifica.

http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html
Apri le proprietà del contenitore Modulo adattivo. Nel browser delle proprietà, passa a Base > Tema modulo adattivo. Il campo Tema modulo adattivo elenca tutti i temi predefiniti e personalizzati. Per impostazione predefinita, viene applicato il tema Area di lavoro.
Seleziona un tema dal campo Tema modulo adattivo . Ad esempio, Tema sondaggio. Tocca per applicare il tema selezionato.

Modulo adattivo con tema predefinito

Figura: Modulo adattivo con tema predefinito

Modulo adattivo con il tema Survey

Figura: Forma adattiva con il tema Survey

Passaggio 2: Aggiornare il modulo adattivo

La struttura visualizzata sopra richiede modifiche nel testo segnaposto e nel logo del modulo adattivo esistente. Esegui le seguenti operazioni per apportare le modifiche richieste:

Modifica il logo e il testo esistenti dell’intestazione. Per rimuovere il logo:
1. Aprire il modulo nell’editor del modulo.
  
  http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html
2. Tocca l’immagine del logo nel componente intestazione e tocca le proprietà . Nella proprietà immagine, tocca X per rimuovere l’immagine del logo esistente.
3. Tocca Carica, seleziona il logo.png e tocca per salvare le modifiche. L'immagine è stata scaricata nella sezione Prima di iniziare .
4. Tocca il testo dell’intestazione We.Retail e tocca edit. Cambia il testo dell’intestazione in we retail. Applica la formattazione in grassetto solo a wein we retail.
Rimuovere il titolo e aggiungere il testo segnaposto:
1. Tocca il campo ID cliente e tocca le proprietà .
2. Copia il contenuto del campo Titolo nel campo Testo segnaposto .
3. Elimina il contenuto del campo Titolo e tocca .
4. Ripetere i tre passaggi precedenti per tutte le caselle di testo, le caselle numeriche e i campi e-mail del modulo.

Passaggio 3: Crea un tema personalizzato per il modulo adattivo

Puoi utilizzare editor di temi per creare temi personalizzati. L'editor a tema è un potente editor WYSIWYG. È un metodo visivo per applicare CSS a vari componenti di un modulo adattivo. Fornisce controlli più precisi per assegnare uno stile ai componenti e ai pannelli di un modulo adattivo.

Un tema è un’entità separata come i moduli adattivi. Contiene stili (CSS) per i componenti e i pannelli di un modulo adattivo. Gli stili includono proprietà CSS quali colori di sfondo, colori dello stato, trasparenza, allineamento e dimensioni. Quando si applica un tema, lo stile specificato viene applicato ai componenti corrispondenti di un modulo adattivo.

In questa esercitazione verranno formattati intestazione e piè di pagina, componenti di testo e numerici, componenti di allegato e pulsanti. Cominciamo con la creazione di un tema:

Creare un tema

Accedi all'istanza di authoring AEM e passa a Adobe Experience Manager > Forms > Temi. L'URL predefinito è http://localhost:4502/aem/forms.html/content/dam/formsanddocuments-themes.
Tocca Crea e seleziona Tema. Viene visualizzata la pagina Crea tema con i campi necessari per creare un tema. I campi Titolo e Nome sono obbligatori:
- Titolo: specifica un titolo del tema. Ad esempio, Tema globale. Il titolo ti aiuta a identificare il tema dall’elenco dei temi.
- Nome: specifica il nome del tema. Ad esempio, Tema globale. Nel repository viene creato un nodo con il nome specificato. Quando si inizia a digitare un titolo, il valore del campo nome viene generato automaticamente. È possibile modificare il valore suggerito. Il campo name può includere solo caratteri alfanumerici, trattini e caratteri di sottolineatura. Tutti gli input non validi vengono sostituiti con un trattino.
Tocca Crea. Viene creato un tema e viene visualizzata una finestra di dialogo per aprire il modulo per la modifica. Tocca Apri per aprire il tema appena creato in una nuova scheda. Il tema si apre nell’editor di temi. Per lo stile, l’editor di temi utilizza un modulo adattivo preconfigurato fornito con AEM Forms.

Per informazioni sull'utilizzo dell'interfaccia utente dell'editor di temi, consulta Informazioni sull'editor di temi.
Tocca Opzioni tema > Configura. Nel campo Anteprima modulo , seleziona il modulo adattivo shipping-address-add-update-form , tocca e tocca Salva. Ora, l’editor di temi è configurato per utilizzare il proprio modulo adattivo invece del modulo adattivo predefinito. Tocca Annulla per tornare all’editor di temi.

Figura: Editor tema con modulo adattivo per l'indirizzo di spedizione-add-update-form

Figura: Modulo adattivo con il modulo predefinito

Intestazione e piè di pagina dello stile

Le intestazioni e i piè di pagina forniscono un aspetto coerente e distintivo a un modulo adattivo. In genere, l’intestazione contiene il logo e il nome dell’organizzazione, il piè di pagina contiene informazioni sul copyright e queste rimangono identiche in più forme di un’organizzazione. Per assegnare uno stile a intestazione e piè di pagina del modulo adattivo per l’indirizzo di spedizione-add-update-form:

Passa all’opzione Intestazione > Testo nel pannello Selettori. Il pannello Selettori si trova a sinistra dell’editor di temi. Se il pannello non è visibile, tocca Attiva/disattiva pannello laterale.
Imposta le seguenti proprietà nel pannello a soffietto Testo e tocca .

Proprietà Valore

Famiglia font Arial

Colore font FFFFFF

Dimensione font 54 px
Tocca il widget di intestazione e tocca Intestazione. Le opzioni di stile del widget Intestazione vengono visualizzate a sinistra. Espandi il pannello a soffietto Dimension e posizione, imposta Altezza su 120px e tocca .
Espandi il pannello a soffietto Sfondo del widget di intestazione, imposta Colore di sfondo su F6921E.

Passa il puntatore del mouse su Immagine e sfumatura > + Aggiungi, tocca Immagine. Imposta le seguenti proprietà e tocca .

Proprietà Valore

immagine Carica header-style.png. L'immagine è stata scaricata nella sezione Prima di iniziare .

Posizione A destra in basso

Divisione in porzioni Nessuna ripetizione
Nell’editor di temi, tocca il logo nell’intestazione e tocca Logo intestazione. Espandi il pannello a soffietto Dimension e posizione, imposta le seguenti proprietà e tocca .

Proprietà	Valore
Famiglia font	Arial
Colore font	FFFFFF
Dimensione font	54 px

Proprietà	Valore
immagine	Carica header-style.png. L'immagine è stata scaricata nella sezione Prima di iniziare .
Posizione	A destra in basso
Divisione in porzioni	Nessuna ripetizione

immagine

Valore

immagine

Top: 1,5 rem
Inferiore: -35 px
Sinistra: 1rem

Suggerimento: tocca l’icona del collegamento per assegnare un valore diverso a ciascun campo.

Altezza

4,75rem

Tocca il widget piè di pagina e tocca Piè di pagina. Espandi il pannello a soffietto Sfondo, imposta il Colore di sfondo su F6921E e tocca .

Assegna uno stile al componente di acquisizione dati e applica uno sfondo al modulo adattivo

È possibile utilizzare più componenti in un modulo adattivo per acquisire i dati. Ad esempio, casella di testo e casella numerica. È possibile fornire uno stile identico a tutti i componenti di acquisizione dati o uno stile separato per ciascun componente. In questa esercitazione, alle caselle numeriche (ID cliente, CAP) e alle caselle di testo (ID cliente, Nome, Indirizzo di spedizione, Stato, E-mail) viene applicato uno stile identico. Per assegnare uno stile ai componenti di acquisizione dati:

Tocca il campo ID cliente e tocca l’opzione Widget campo . Imposta le seguenti proprietà e tocca .

Pannello a soffietto	Proprietà	Valore
Bordo	Colore bordo	A7A9AC
Bordo	Raggio bordo	Top: 7px A destra: 7px Inferiore: 7px Sinistra: 7px
Testo	Famiglia font	Arial
Testo	Colore font	939598
Testo	Dimensione font	18 px
Dimension e posizione	Larghezza	60%
Dimension e posizione	immagine	Sinistra: 10rem

Tocca l’area vuota sopra il campo ID cliente e tocca Contenitore pannello reattivo. Imposta Sfondo > Colore di sfondo su F1F2F2. Tocca .

Personalizzare lo stile dei pulsanti

È possibile utilizzare un tema personalizzato per applicare uno stile identico a tutti i pulsanti del modulo adattivo e stile in linea per applicare uno stile a un pulsante specifico. Per assegnare uno stile ai pulsanti:

Tocca il pulsante Invia e tocca l’opzione Pulsante . Imposta le seguenti proprietà e tocca .

Pannello a soffietto	Proprietà	Valore
Sfondo	Colore di sfondo	F6921E
Bordo	Colore bordo	F6921E
Bordo	Raggio bordo	Top: 7px A destra: 7px Inferiore: 7px Sinistra: 7 px
Testo	Famiglia font	Arial
Testo	Colore font	FFFFFF
Testo	Dimensione font	18 px

Applica il tema personalizzato Tema globale al modulo adattivo. Se lo stile non si riflette sul modulo adattivo, svuota la cache del browser e riprova.

Passaggio 4: Personalizzare lo stile dei singoli componenti

Alcuni stili si applicano solo a un componente specifico. Tali componenti sono formattati nell’editor di moduli adattivi.

Apri il modulo adattivo per la modifica. http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html
Nella barra superiore, seleziona l’opzione Stile .
Tocca il pulsante Allega e tocca l’icona . Imposta le seguenti proprietà nei Dimension e nel pannello a soffietto:

Proprietà Valore

Mobile Sinistra

Larghezza 10%
Tocca l’opzione bozza indirizzo approvata dal governo e tocca l’icona . Imposta le seguenti proprietà:

Proprietà	Valore
Mobile	Sinistra
Larghezza	10%

Pannello a soffietto	Proprietà	Valore
Dimensioni e posizione	Mobile	Sinistra
Dimensioni e posizione	Larghezza	73%
Dimensioni e posizione	Riempimento	Sinistra: 10 px
Dimensioni e posizione	Altezza	40 px
Dimensioni e posizione	immagine	A destra: 2rem Sinistra: 10rem
Sfondo	Colore di sfondo	FFFFFF
Bordo	Spessore bordo	1 px
Bordo	Stile bordo	Uniforme
Bordo	Colore bordo	A7A9AC
Bordo	Raggio bordo	7 px
Testo	Famiglia font	Arial
Testo	Colore font	BCBEC0
Testo	Dimensione font	18 px
Testo	Altezza riga	2

Tocca il pulsante Invia e tocca l’icona . Imposta le seguenti proprietà:

Pannello a soffietto	Proprietà	Valore
Dimension e posizione	Mobile	Destra
Dimension e posizione	immagine	Top: 5rem A destra: 14rem Inferiore: 20 px Sinistra: 20px
Sfondo	Colore di sfondo	F6921E
Bordo	Colore bordo	F6921E

styled-adaptive-form-1

Passaggio 5: Sezione bonus: Utilizzo di font web in un tema personalizzato

È possibile utilizzare vari font per progettare un modulo adattivo. Tutti i dispositivi su cui viene visualizzato il modulo adattivo potrebbero non avere i font utilizzati per progettare il modulo adattivo. È possibile utilizzare un servizio di font Web per fornire i font richiesti al dispositivo di destinazione.

Adobe Typekit è un servizio di font web. Puoi configurare e utilizzare il servizio con moduli adattivi. Per utilizzare Adobe Typekit in un modulo adattivo:

NOTA

typekit-to-adobe- fontsTypekit è ora chiamato Adobe Fonts ed è incluso con Creative Cloud e altre sottoscrizioni. Per saperne di più.

Crea un account Adobe Typekit, crea un kit, aggiungi il font Myriad Pro al kit, pubblica il kit e ottieni l'ID kit. È necessario utilizzare i font Adobe Typekit (font Web) in un modulo adattivo.
Nel server AEM Forms, passa a Adobe Experience Manager > Strumenti > Implementazione > Cloud Services. Nella pagina Cloud Services, vai a Servizi di terze parti > Typekit e fai clic su Configura ora in Typekit. Se una configurazione è già disponibile, fai clic sul pulsante + per creare una nuova istanza.

Nella finestra di dialogo Crea configurazione, specifica un Titolo per la configurazione e fai clic su Crea. Verrai reindirizzato alla pagina di configurazione. Nella finestra di dialogo Modifica componente visualizzata, fornisci il tuo ID kit e fai clic su OK.
Configura il tema per utilizzare la configurazione TypeKit. Nell'istanza dell'autore, apri Tema globale nell'editor di temi. Nell'editor dei temi, vai a Opzioni tema > Configura. Nel campo Configurazione Typekit, seleziona il kit e fai clic su Salva.

I font aggiunti al Typekit sono disponibili per la selezione nel Testo a seconda di tutti i componenti.