Navigare nell’interfaccia dell’editor universale per AEM Forms
L’editor universale fornisce un’interfaccia visiva per la creazione di moduli AEM con Edge Delivery Services. L’editor universale offre un’esperienza WYSIWYG (What You See Is What You Get) che mostra esattamente l’aspetto dei moduli per gli utenti.
Questa guida ti aiuta a comprendere l’interfaccia per creare moduli in modo efficiente. Se non hai mai sperimentato la creazione di moduli o anche se hai esperienza nello sviluppo, questa guida ti aiuterà a:
Scoprire le abilità essenziali:
- Navigare nell’interfaccia in modo sicuro ed efficiente
- Utilizzare gli strumenti appropriati per le attività comuni di creazione dei moduli
- Sfruttare le scelte rapide da tastiera per aumentare la produttività
- Risolvere i problemi comuni dell’interfaccia
Conoscere a fondo i principali flussi di lavoro:
- Configurare l’area di lavoro per una produttività ottimale
- Creare moduli dal concetto alla pubblicazione
- Eseguire test e visualizzare l’anteprima dei moduli tra dispositivi
- Collaborare con i membri del team nei progetti modulo
Guida introduttiva rapida
Utenti nuovi: inizia con Strumenti essenziali per scoprire le funzionalità principali che userai più spesso.
Utenti esperti: passa a Funzionalità avanzate per avere strumenti e integrazioni specializzati.
Riferimento rapido: utilizza le sezioni Panoramica dell’interfaccia e Scelte rapide da tastiera per eseguire ricerche rapide.
Panoramica dell’interfaccia
L’interfaccia dell’editor universale è strutturata in quattro aree principali, ognuna delle quali è progettata per attività specifiche:
Flusso interfaccia: la maggior parte degli utenti lavora principalmente nell’area di lavoro editor (D) e nel pannello Proprietà ©, utilizzando la barra degli strumenti (B) per azioni quali anteprima e pubblicazione.
Strumenti essenziali per la creazione di moduli
Inizia qui se hai poca esperienza con l’editor universale. Questi sono gli strumenti di base che utilizzerai per la maggior parte delle attività di creazione moduli:
1. Area di lavoro dell’editor -La tua area di lavoro principale
Nell’area di lavoro dell’editor puoi creare i moduli visivamente. Mostra esattamente come il modulo apparirà agli utenti.
Azioni chiave:
- Aggiungere componenti facendo clic sul pulsante Aggiungi nel pannello Proprietà
- Selezionare gli elementi facendo clic direttamente su di essi nell’area di lavoro
- Visualizzare le modifiche in tempo reale durante la configurazione dei componenti
- Testare le interazioni in modalità anteprima
2. Pannello Proprietà - Configurare i componenti
Nel pannello Proprietà (lato destro) puoi personalizzare i componenti selezionati e gestire la struttura del modulo.
Funzioni essenziali:
- Modalità delle proprietà (scelta rapida da tastiera
d): configura le impostazioni del componente selezionato - Struttura del contenuto (scelta rapida da tastiera
f): naviga nella struttura del modulo - Aggiungere componenti (scelta rapida da tastiera
a): inserisci nuovi campi modulo - Azioni dei componenti: duplica o elimina gli elementi selezionati
3. Nozioni di base sulla barra degli strumenti - Anteprima e pubblicazione
La barra degli strumenti dell’editor universale fornisce azioni chiave per il test e la pubblicazione dei moduli.
Strumenti fondamentali
- Modalità anteprima (scelta rapida da tastiera
p): testa il modulo così come verrà visualizzato dagli utenti - Modalità reattiva: verifica l’aspetto del modulo sui dispositivi mobili
- Apri pagina (scelta rapida da tastiera
o): visualizza modulo in una nuova scheda - Pubblica: rendi il modulo attivo per gli utenti
4. Flusso di lavoro di avvio rapido
Per il primo modulo:
- Aggiungere un componente modulo adattivo: inserisci il componente
Adaptive Formin una sezione. - Iniziare la compilazione: aggiungi componenti utilizzando il pulsante Aggiungi (
a) - Configura campi: seleziona i componenti e utilizza le Modalità delle proprietà (
d) - Testa il modulo: utilizza la modalità anteprima (
p) per interagire con il modulo - Verifica la visualizzazione per dispositivi mobili: passa alla modalità reattiva per i test su dispositivi mobili
- Pubblica: fai clic su Pubblica quando è pronto
Punto di controllo per la convalida:
- Puoi aggiungere e configurare campi modulo?
- La modalità anteprima funziona correttamente?
- Tutti i campi obbligatori sono configurati correttamente?
- Il modulo viene visualizzato correttamente sui dispositivi mobili?
Intestazione di Experience Cloud
L’Intestazione Experience Cloud fornisce gli strumenti di navigazione e gestione account. La maggior parte dei creatori di moduli la utilizza occasionalmente per passare da uno Adobe all’altro o per accedere alla guida.
Elementi chiave:
Usi più comuni:
- Ottenere assistenza: fai clic sull’icona della Guida per accedere alla documentazione e al supporto
- Passaggio tra organizzazioni: utilizzare il menu a discesa Organizzazione se si dispone dell’accesso per più organizzazioni
Barra degli strumenti dell’editor universale
La barra degli strumenti dell’editor universale contiene gli strumenti principali di modifica e pubblicazione dei moduli. Questi sono organizzati in base alla frequenza di utilizzo e al flusso di lavoro tipico.
Strumenti flusso di lavoro giornalieri
Questi strumenti vengono utilizzati nella maggior parte delle sessioni di creazione moduli:
Modalità anteprima (p scelta rapida)
Scopo: testare il modulo esattamente come verrà visualizzato dagli utenti
Quando utilizzare: prima della pubblicazione, dopo aver apportato modifiche, per testare la funzionalità del modulo
Best practice: visualizza l’anteprima dopo ogni modifica importante per rilevare i problemi in anticipo.
Modalità reattiva
Scopo: controllare la visualizzazione del modulo sui dispositivi mobili
Quando utilizzare: dopo aver creato il modulo, prima della pubblicazione
Best practice: testa sempre la visualizzazione per dispositivi mobili. Molti utenti accederanno ai moduli dal proprio telefono.
Aprire la pagina (o scelta rapida)
Scopo: visualizzare il modulo in una nuova scheda senza l’interfaccia dell’editor
Quando utilizzare: per test a schermo intero, condivisione con gli stakeholder per la revisione
Pubblica
Scopo: rendere il modulo attivo e accessibile agli utenti
Quando utilizzare: dopo un test approfondito in modalità Anteprima e Reattiva
Elenco di controllo convalida prima della pubblicazione:
- Modulo testato in modalità Anteprima
- Reattività dispositivi mobili verificata
- Tutti i campi obbligatori configurati
- Azioni di invio correttamente funzionanti
Strumenti di navigazione
Pulsante Home
Scopo: tornare alla pagina iniziale dell’editor universale
Quando utilizzare: avvio del lavoro in un modulo diverso
Barra di posizione (l scelta rapida)
Scopo: passare direttamente a qualsiasi modulo tramite URL
Quando utilizzare: passaggio rapido tra moduli specifici
Strumenti di configurazione avanzati
Questi strumenti vengono utilizzati per scenari specifici o configurazioni avanzate:
Proprietà AEM Form
Scopo: configurare le impostazioni a livello di modulo come Modello dati modulo (FDM), configurando le azioni di invio e le date di pubblicazione
Quando utilizzare: configurazione delle integrazioni di dati, pianificazione della pubblicazione
Il pannello Proprietà modulo include le sezioni seguenti:
-
Invio: definisci cosa accade dopo che un utente invia il modulo. È possibile scegliere tra più azioni di invio, ad esempio l’invio di dati tramite e-mail, l’invio a SharePoint, l’utilizzo di un modello dati modulo o l’integrazione con servizi come Adobe Experience Platform o Microsoft Power Automate. Per un elenco completo delle azioni di invio supportate, fai riferimento all’articolo Azione di invio.
-
Precompilazione: configura il popolamento automatico dei campi modulo prima che l’utente interagisca con il modulo. Puoi connetterti a origini dati, ad esempio un Modello dati modulo (FDM), oppure utilizzare parametri URL per precompilare i campi, migliorando l’esperienza utente e riducendo l’input manuale. Per ulteriori informazioni, consulta l’articolo Servizio di precompilazione.
-
Ringraziamento: personalizza i contenuti visualizzati dagli utenti dopo l’invio del modulo. Puoi visualizzare un messaggio di conferma o reindirizzarli a un’altra pagina web, garantendo un’esperienza di completamento fluida e professionale. Per scoprire come configurare un messaggio di ringraziamento per i moduli, consulta l’articolo Configurare un messaggio di ringraziamento.
Editor regole (accesso anticipato)
Scopo: aggiungere comportamenti dinamici, convalide e logica condizionale
Quando utilizzare: creazione di moduli interattivi con logica di business complessa
Impostazioni dell’intestazione di autenticazione
Scopo: impostare intestazioni di autenticazione personalizzate per i test di sviluppo
Quando utilizzare: sviluppo locale con moduli richiesti per l’autenticazione
Opzioni aggiuntive (Menu con puntini di sospensione)
Scopo: accedere ad azioni meno comuni, ad esempio l’annullamento della pubblicazione
Quando utilizzare: disconnessione dei moduli, accesso alle opzioni avanzate
Pannello Proprietà
Il pannello Proprietà (lato destro) è il centro di controllo per la creazione e la configurazione dei moduli. Cambia in base a ciò che selezioni e fornisce strumenti diversi per attività diverse.
Strumenti di base per la creazione di moduli
Questi strumenti sono essenziali per la creazione e l’organizzazione dei moduli:
Aggiungere componenti (a scelta rapida)
Scopo: inserire nuovi campi ed elementi del modulo
Funzionamento: mostra i componenti disponibili per il contenitore selezionato
Componenti comuni:
- Input di testo, e-mail, campi telefono
- Menu a discesa, pulsanti di scelta, caselle di controllo
- Caricamento di file, selettore data
- Pannelli e sezioni per l’organizzazione
Modalità proprietà (scelta rapida da tastiera d)
Scopo: configurare le impostazioni per i componenti selezionati
Quando utilizzarli: dopo aver aggiunto un componente per personalizzarne il comportamento
Impostazioni chiave:
- Etichette di campo e testo segnaposto
- Regole di convalida (obbligatorio, formato, lunghezza)
- Valori predefiniti e testo di istruzioni
- Regole di visibilità condizionale
Struttura contenuto (scelta rapida da tastieraf)
Scopo: navigare e organizzare la struttura del modulo
Quando utilizzarle: moduli complessi con più sezioni, ricerca di componenti specifici
Vantaggi:
- Navigazione rapida per qualsiasi componente
- Gerarchia dei moduli visivi
- Riordinamento semplice degli elementi
Azioni dei componenti
Scopo: gestire i componenti esistenti
Azioni disponibili:
- Duplica: copia rapidamente i componenti
- Elimina: rimuovi i componenti (nessun prompt di conferma)
Funzioni e integrazioni avanzate
Questi strumenti abilitano funzionalità avanzate per moduli:
Origine dati
Scopo: connetti i moduli ai sistemi di dati di back-end
Quando utilizzarla: con moduli che devono leggere/scrivere su database o servizi esterni
Funzionalità
- Configurazione modello dati modulo (FDM)
- Compilazione dati dinamici
- Invio a sistemi esterni
Generare varianti
Scopo: utilizza l’intelligenza artificiale per creare diverse versioni del contenuto del modulo
Quando utilizzarla: per la sperimentazione con testo, layout o approcci diversi
| code language-none |
|---|
|
Ulteriori informazioni: Guida di generare varianti
Bozze di contenuto
Scopo: creare e salvare le versioni preliminari del testo
Quando utilizzarle: per iterazione nella copia del modulo, salvataggio di opzioni di testo alternative
Test A/B
Scopo: confronta le varianti del modulo per ottimizzare le prestazioni
Quando utilizzare: ottimizzazione dei tassi di conversione, test delle diverse progettazioni
Sperimentazione
Scopo: eseguire test controllati sulle progettazioni dei moduli
Quando utilizzare: ottimizzazione dei moduli basati su dati, test dell’esperienza utente
| code language-none |
|---|
|
Gestione attività
Scopo: organizzare il flusso di lavoro del team per i progetti modulo
Quando utilizzare: sviluppo di moduli per più persone, tracciamento di progetti
Personalizzazione
Scopo: connettersi ad Adobe Experience Platform per esperienze personalizzate
Quando utilizzare: creazione di moduli personalizzati basati su dati utente
| code language-none |
|---|
|
Area di lavoro dell’editor
L’area di lavoro dell’editor è l’area di lavoro principale in cui vengono creati visivamente i moduli. Mostra esattamente come il modulo apparirà agli utenti e fornisce feedback in tempo reale mentre apporti modifiche.
Funzioni chiave:
- Modifica WYSIWYG: visualizza subito le modifiche mentre le apporti
- Interazione diretta: fai clic su un componente per selezionarlo e modificarlo
- Anteprima in tempo reale: passa alla modalità anteprima per testare la funzionalità
- Visualizzazione reattiva: attiva/disattiva le visualizzazioni del dispositivo per verificarne la compatibilità
Best practice
- Iniziare con la struttura: aggiungi sezioni principali prima dei componenti dettagliati
- Testare frequentemente: utilizza regolarmente la modalità anteprima per rilevare i problemi in anticipo
- Pensare mobile-first: verifica la modalità reattiva durante il processo di progettazione
Scelte rapide da tastiera
Impara ad usare queste scelte rapide per creare moduli in modo più rapido ed efficiente:
adfpolSuggerimento pro: utilizza queste scelte rapide da tastiera in combinazione. Ad esempio, seleziona un componente, premi d per configurarlo, quindi p per testare le modifiche.
Flussi di lavoro comuni
Creazione del primo modulo
- Aggiungi struttura: utilizzare
aper aggiungere un pannello per le sezioni del modulo - Aggiungi campi: inserire input di testo, e-mail e altri componenti
- Configura proprietà: selezionare ogni campo e premere
dper impostare le etichette e la convalida - Funzionalità del test: premere
pper visualizzare l’anteprima e testare il modulo - Controlla visualizzazione su su dispositivo mobile: utilizzare la modalità reattiva per verificare la visualizzazione su dispositivo mobile
- Pubblica: fare clic su Pubblica per andare live
Modifica di moduli esistenti
- Naviga nella struttura: utilizzare la struttura contenuto (
f) per trovare rapidamente i componenti - Seleziona e modifica: fare clic direttamente sui componenti o utilizzare la struttura contenuto
- Testa le modifiche: visualizzare anteprima (
p) dopo ogni modifica significativa - Convalida flusso di lavoro: testare il flusso di modulo completo prima della ripubblicazione
Collaborazione con i team
- Gestione attività: assegnare sezioni di modulo specifiche ai membri del gruppo
- Condividi per revisione: utilizzare Apri pagina (
o) per condividere anteprime chiare - Test congiunto: utilizzare la modalità Anteprima per le sessioni di test collaborativo
- Tracciamento avanzamento: controllare le notifiche per aggiornamenti attività
Risoluzione dei problemi comuni
Problemi di interfaccia
Problema: i pulsanti della barra degli strumenti, il pannello delle proprietà o altri elementi dell’interfaccia non vengono visualizzati
Soluzioni:
- Aggiorna la pagina: un semplice aggiornamento del browser spesso risolve i problemi di caricamento
- Verifica compatibilità browser: utilizzare Chrome, Firefox o Safari
- Cancella cache del browser: rimuovere i file memorizzati nella cache che potrebbero non essere aggiornati
- Verifica autorizzazioni: assicurarsi di disporre dell’accesso corretto per la modifica dei moduli
Problema: impossibile selezionare i componenti o il pannello Proprietà non viene aggiornato
Soluzioni:
- Fai clic direttamente sui componenti: evita di fare clic su aree vuote
- Utilizza la struttura del contenuto: premi
fe seleziona i componenti dalla struttura - Verifica la presenza di elementi sovrapposti: alcuni componenti potrebbero bloccarne altri
- Ricarica il modulo: utilizza la barra di posizione (
l) per ricaricare il modulo corrente
Problema: la modalità anteprima non funziona correttamente o mostra errori
Soluzioni:
- Verifica la convalida del modulo: verifica che tutti i campi obbligatori siano configurati correttamente
- Testa prima in modalità di modifica: verifica il funzionamento dei componenti prima dell’anteprima
- Cancella cache del browser: gli script memorizzati nella cache potrebbero interferire con l’anteprima
- Verifica la configurazione del componente: rivedi le impostazioni della modalità delle proprietà per individuare eventuali errori
Best practice per la creazione efficiente dei moduli
Suggerimenti per l’organizzazione
- Utilizza nomi descrittivi: etichetta i componenti in modo chiaro nella modalità Proprietà
- Raggruppa campi correlati: utilizza i pannelli per organizzare in modo logico le sezioni del modulo
- Pianifica prima di creare: crea uno schizzo della struttura del modulo prima di iniziare
- Semplifica: evita di caricare eccessivamente gli utenti con troppi campi
Esperienza utente
- Testa frequentemente: utilizza la modalità Anteprima dopo ogni modifica importante
- Pensa come gli utenti: considera l’esperienza completa di compilazione dei moduli
- Fornisci etichette chiare: rendi evidenti gli scopi del campo agli utenti
- Aggiungi testo utile: utilizza il testo della Guida per campi complessi
Ottimizzazione delle prestazioni
- Riduci a icona i componenti: utilizza solo i campi modulo necessari
- Ottimizza immagini: comprimi tutte le immagini utilizzate nei moduli
- Test su dispositivi mobili: garantisci buone prestazioni sulle connessioni mobili più lente
- Convalida anticipata: imposta una convalida corretta per evitare errori di invio
Passaggi successivi
Ora che conosci l’interfaccia dell’editor universale:
- Esercitati con un modulo semplice: inizia con i campi di base per imparare
- Esplora le funzionalità avanzate: prova gli strumenti e le integrazioni basati sull’intelligenza artificiale appena sono pronti
- Scopri l’authoring dei moduli: consulta la Guida introduttiva
- Editor di regole master: aggiungi comportamenti dinamici con la Guida dell’editor regole
Ricorda: l’editor universale è progettato per rendere intuitiva la creazione di moduli. Inizia con le funzionalità essenziali ed esplora gradualmente quelle avanzate ogni volta che ne hai bisogno.