Funzionalità di layout di Forms adattivo basate sui componenti core
Adaptive Forms fornisce componenti di prima classe per il layout e la progettazione efficace dei moduli. Il layout controlla il modo in cui i componenti vengono visualizzati in un modulo. Forms adattivo supporta vari layout: pannello, procedura guidata, pannello a soffietto, schede nelle schede superiore/orizzontale e schede nelle schede sinistra/verticale.
Prerequisito
Prima di esplorare le varie funzionalità di un layout, assicurati che i Componenti core siano abilitati per il tuo ambiente. Per istruzioni dettagliate su come abilitare i componenti core per il tuo ambiente, fai clic qui.
Tipi di layout Forms adattivi
Il modulo adattivo basato su componenti core supporta i seguenti tipi di layout:
- Layout pannello
- Layout guidato
- Layout verticale
- Layout orizzontale
- Layout Accordion
Il layout del pannello è utile per organizzare i campi correlati in modo da semplificare la navigazione e la ricerca del contenuto corrispondente. Il layout del pannello dispone i componenti del modulo all’interno di sezioni o pannelli distinti in un modulo adattivo.
Layout pannello
È possibile utilizzare il componente pannello per aggiungere il layout del pannello in un modulo. Per istruzioni dettagliate su come configurare varie proprietà del componente Pannello, consulta l'articolo componente Pannello.
Il layout della procedura guidata semplifica un modulo complesso suddividendolo in passaggi distinti. Ogni passaggio rappresenta una parte diversa del processo e gli utenti possono spostarsi tra i passaggi in sequenza, spesso con i pulsanti Successivo e Precedente. È possibile utilizzare il layout della procedura guidata per creare un modulo che comprenda più sezioni o passaggi.
Layout procedura guidata
È possibile utilizzare il componente procedura guidata per aggiungere il layout della procedura guidata in un modulo. Per istruzioni dettagliate su come configurare le varie proprietà del componente della procedura guidata, fare riferimento all'articolo componente della procedura guidata.
Il layout delle schede verticali è noto anche come tabulazioni nel layout sinistro. Il layout tabulazioni verticali organizza pannelli o sezioni lungo il lato sinistro di un modulo. Si tratta di un layout comune per i moduli in cui pannelli/sezioni sono impilati verticalmente per facilitarne la lettura e la navigazione.
Layout schede verticali
È possibile utilizzare il componente schede verticali per aggiungere il layout delle schede verticali in un modulo. Per istruzioni dettagliate su come configurare le varie proprietà del componente Schede verticali, consulta l'articolo Componente Schede verticali.
Il layout delle schede orizzontali è noto anche come Tabulazioni nel layout superiore. Il layout tabulazioni orizzontali dispone i pannelli o le sezioni affiancate in una riga. Questo layout presenta le sezioni del modulo in modo lineare per tutta la larghezza del modulo o del pannello.
Layout schede orizzontali
È possibile utilizzare il componente schede orizzontali per aggiungere il layout delle schede orizzontali in un modulo. Per istruzioni dettagliate su come configurare le varie proprietà del componente schede orizzontali, consulta l'articolo componente schede orizzontali.
Il layout del Pannello a soffietto mostra il contenuto in sezioni o pannelli comprimibili in un Modulo adattivo. Quando una sezione viene espansa, il contenuto viene visualizzato all’interno di, mentre le altre sezioni rimangono compresse. Questo layout è ideale per visualizzare grandi quantità di informazioni in un formato compatto.
Layout Accordion
È possibile utilizzare il componente Pannello a soffietto per aggiungere il layout Pannello a soffietto in un modulo. Per istruzioni dettagliate su come configurare le varie proprietà del componente Pannello a soffietto, consulta l'articolo Componente Pannello a soffietto.
Per informazioni su come inserire un layout e aggiungervi componenti modulo, consultare la sezione Come inserire un layout e aggiungervi componenti modulo?
Come scegliere il layout corretto per i moduli adattivi?
È importante selezionare il layout corretto per il modulo adattivo per ottimizzare l’esperienza utente e la funzionalità dei moduli. La tabella ti aiuta a comprendere le diverse opzioni di layout disponibili e ti guida nella selezione del layout più adatto in base alle tue esigenze e ai tuoi casi d’uso specifici:
- Indietro: pulsante "Indietro"
- Passaggi facoltativi ignorati
Come si inserisce un layout e vi si aggiungono i componenti del modulo?
Nel diagramma seguente vengono illustrati i passaggi necessari per inserire un layout in un modulo e aggiungervi componenti modulo:
Considera il modulo di richiesta IT visualizzato nella sezione Tipi di layout di Forms adattivi. Il modulo raccoglie informazioni dai dipendenti che riscontrano problemi tecnici relativi alla rete o al notebook. Include tre pannelli:
-
Dettagli dipendente: il pannello raccoglie informazioni sul dipendente e contiene tre caselle di testo con etichetta Nome, ID e-mail e Reparto.
-
Dettagli del problema: il pannello acquisisce i dettagli del problema. Include una casella di controllo per la categoria del problema con tre opzioni: Rete, Computer o Altro. Sono inoltre presenti due caselle di testo con l'etichetta Please Specify (Specifica) e Comments (Commenti).
-
Allegati: il pannello consente agli utenti di caricare documenti di supporto relativi al problema.
Esaminiamo il processo dettagliato per l’inserimento di un layout e l’aggiunta di componenti. In questo esempio, in un modulo viene inserito un layout con schede orizzontali.
1. Inserire un componente layout in un modulo
-
Accedi all'istanza Experience Manager Forms.
-
Nell'angolo superiore sinistro selezionare Adobe Experience Manager > Forms > Forms e documenti.
-
Apri un modulo adattivo esistente in modalità di modifica, se è già stato creato.
In alternativa, puoi anche creare un nuovo modulo adattivo.
-
Nell’editor modulo, individua la sezione che consente di aggiungere un layout.
-
Fai clic sull'icona Aggiungi. L’icona è un segno più (+) che indica l’opzione per aggiungere nuovi componenti.
Facendo clic sull'icona Aggiungi viene visualizzata una finestra di dialogo Inserisci nuovo componente in cui sono visualizzati vari componenti da inserire.
note note NOTE In alternativa, puoi anche trascinare e rilasciare il componente layout. -
Sfoglia i componenti disponibili nella finestra di dialogo e seleziona il layout desiderato dall’elenco. Nel nostro caso, selezioniamo il componente Schede orizzontali per inserire il layout delle schede orizzontali.
Quando si aggiunge al modulo il componente Schede orizzontali, inizialmente è costituito da due pannelli vuoti, denominati Item1 e Item2, per impostazione predefinita. Devi aggiungere manualmente i componenti del modulo a questi pannelli.
-
Apri le proprietà del componente Schede orizzontali e specifica il nome del componente.
Ad esempio, in questo caso, aggiungiamo il nome del componente Schede orizzontali come Modulo di richiesta IT. -
Fai clic su Fine.
Una volta aggiunto il componente layout nel modulo, modifica il numero di pannelli in base ai requisiti.
2. Aggiungere pannelli al layout
Aggiungi un nuovo pannello al componente Schede orizzontali:
-
Apri le proprietà del componente Schede orizzontali e fai clic sulla scheda Elementi.
-
Fai clic sull'icona Aggiungi per aggiungere un nuovo pannello.
Quando si fa clic sull'icona Aggiungi, viene visualizzata la finestra di dialogo Inserisci nuovo componente.
-
Seleziona il componente del pannello.
Quando selezioni il componente pannello, il nuovo pannello viene aggiunto nel layout orizzontale.
Assegna un nome al nuovo pannello. In caso contrario, non puoi salvare le proprietà del componente Schede orizzontali.
-
Specificate i nomi dei pannelli come mostrato nella figura riportata di seguito:
-
Fai clic su Fine.
Dopo aver fatto clic su Fine, i tre pannelli vengono visualizzati affiancati in una riga. I nomi dei pannelli vengono visualizzati come intestazioni per ciascun pannello e puoi aggiungere componenti modulo a ciascun pannello.
Puoi configurare le proprietà del componente pannello. Ad esempio, il modulo di richiesta IT non include i titoli dei pannelli, ecco i passaggi per configurare le proprietà del componente pannello.
-
Apri le proprietà del primo pannello.
-
Selezionare la casella di controllo Nascondi titolo dalla scheda Base.
-
Fai clic su Fine.
Allo stesso modo, potete nascondere i titoli anche per gli altri due pannelli. Al termine, puoi procedere con l’aggiunta di componenti modulo a ciascun pannello.
3. Aggiungere componenti modulo al pannello
-
Individua la sezione all’interno del pannello che consente di aggiungere componenti.
-
Fai clic sull'icona Aggiungi. L’icona è un segno più (+) che indica l’opzione per aggiungere nuovi componenti.
Facendo clic sull'icona Aggiungi viene visualizzata una finestra di dialogo Inserisci nuovo componente in cui sono visualizzati vari componenti da inserire.
-
Sfoglia i componenti disponibili nella finestra di dialogo che viene visualizzata e seleziona il componente desiderato. Nel nostro caso, seleziona il componente Casella di testo.
-
Apri le proprietà del componente aggiunto e specifica il nome. Consente di modificare le proprietà del componente Casella di testo aggiunto e di specificarne il nome.
-
Allo stesso modo, aggiungi altri due componenti Casella di testo e assegna ai componenti un nome ID e-mail e un Reparto.
Dopo aver aggiunto i componenti nel primo pannello, puoi procedere con l’aggiunta dei componenti al secondo pannello.
-
Per cambiare pannello, fare clic su Seleziona pannello nella barra degli strumenti.
Quando fai clic su Seleziona pannello, viene visualizzato l'elenco dei pannelli aggiunti nel componente Schede orizzontali.
-
Selezionare 2 pannello dall'elenco dei pannelli e la visualizzazione cambia dal primo pannello al secondo.
-
Ripetete i passi descritti dal punto 2 al punto 4 per aggiungere i componenti desiderati nel pannello 2 come mostrato nella figura seguente:
-
Passare al pannello 3 seguendo i passaggi descritti nei passaggi 6 e 7.
-
Ripeti i passaggi descritti dal passaggio 2 al passaggio 4 per aggiungere il componente desiderato nel pannello 3:
-
Fai clic su Anteprima nell'angolo in alto a destra dell'ambiente di authoring.
Puoi anche trascinare i componenti per aggiungere i componenti del modulo a ciascun pannello.
Puoi anche eliminare il componente modulo dal pannello utilizzando l'icona .
Puoi anche aggiungere le convalide richieste per i componenti, in base alle esigenze.
Come si sostituisce un layout esistente con un nuovo layout?
È possibile sostituire un layout di un modulo con un nuovo layout, che comporta la modifica della disposizione e della visualizzazione dei componenti all’interno di un modulo.
Per sostituire il layout esistente di un modulo, effettuare le seguenti operazioni:
-
Fare clic sull'icona Sostituisci nella barra degli strumenti del componente layout per visualizzare la finestra di dialogo Sostituisci componente.
-
Selezionare il layout desiderato dalla finestra di dialogo Sostituisci componente.
Dopo aver selezionato il layout, la disposizione dei componenti all’interno del layout cambia di conseguenza. Ad esempio, seleziona il componente Schede verticali dalla finestra di dialogo Sostituisci componente; la disposizione del pannello cambia in Schede a sinistra:
Byte aggiuntivi
Per trascinare i componenti nell’editor di moduli, effettua le seguenti operazioni:
-
Individua la sezione che ti consente di aggiungere componenti.
-
Passa al pannello a sinistra nell'ambiente di authoring e fai clic su Componenti.
Quando si fa clic sull'opzione Componenti, viene visualizzato l'elenco dei componenti disponibili.
-
Sfoglia i componenti disponibili e seleziona il componente desiderato.
-
Trascina il componente facendo clic e tenendo premuto il pulsante, quindi trascinalo sull’area del pannello per posizionarlo.
-
Rilascia il componente nel pannello rilasciando il mouse.
Passaggi successivi
Una volta acquisite familiarità con le varie funzionalità di layout di un modulo adattivo basato su componenti core, puoi procedere con i passaggi successivi:
Consulta anche
- Creare un modulo adattivo di AEM
- Aggiungere un modulo adattivo AEM a una pagina AEM Sites
- Applicare i temi a un modulo adattivo AEM
- Aggiungere componenti a un modulo adattivo di AEM
- Utilizzare il CAPTCHA in un modulo adattivo AEM
- Generare la versione PDF (DoR) di un modulo adattivo AEM
- Tradurre un modulo adattivo di AEM
- Abilitare Adobe Analytics per un modulo adattivo per tenere traccia dell’utilizzo dei moduli
- Collegare un modulo adattivo a Microsoft SharePoint
- Collegare un modulo adattivo a Microsoft Power Automate
- Collegare un modulo adattivo a Microsoft OneDrive
- Collegare un modulo adattivo all’archiviazione BLOB di Microsoft Azure
- Collegare un modulo adattivo a Salesforce
- Utilizzare Adobe Sign in un modulo adattivo di AEM
- Aggiungere una nuova lingua per un modulo adattivo
- Inviare dati del modulo adattivo a un database
- Inviare dati del modulo adattivo a un endpoint REST
- Inviare dati del modulo adattivo al flusso di lavoro di AEM
- Utilizzare il portale dei moduli per elencare moduli adattivi di AEM su un sito web di AEM
- Aggiungere versioni, commenti e annotazioni a un modulo adattivo
- Confrontare i moduli adattivi