Funzionalità di layout di Forms adattivo basate sui componenti core

Versione
Collegamento articolo
AEM 6.5
Fai clic qui
AEM as a Cloud Service (Componenti di base)
Fai clic qui
AEM as a Cloud Service (Componenti core)
Questo articolo

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
Layout pannello

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

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.

Layout guidato

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 guidato

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.

Layout schede verticale

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 verticale

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.

Layout schede orizzontali

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 orizzontale

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.

Layout Accordion

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

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:

Funzione obsoleta
Layout pannello
Layout procedura guidata
Schede nel layout Schede superiori/verticali
Schede nel layout Schede a sinistra/orizzontale
Layout Accordion
Scopo
Raggruppa il contenuto correlato in sezioni distinte
Guida gli utenti attraverso un processo o un modulo in più fasi
Consente il passaggio tra sezioni/viste sulla stessa pagina
Simile alle schede superiori ma disposte verticalmente a sinistra
Organizza il contenuto in sezioni comprimibili
Struttura
Sezioni distinte
Passaggi/pagine sequenziali
Schede orizzontali nella parte superiore
Schede verticali a sinistra
Pannelli/sezioni comprimibili
Navigazione
Fai clic sulle intestazioni del pannello per navigare
- Avanti: pulsante "Avanti"
- Indietro: pulsante "Indietro"
- Passaggi facoltativi ignorati
Fai clic sulle schede per cambiare sezione
Fai clic sulle schede per cambiare sezione
Fai clic sulle intestazioni per espandere/comprimere le sezioni
Esperienza utente
Organizza grandi quantità di contenuti in modo gestibile
Guida passo passo, riduzione del sovraccarico
Passaggio da una visualizzazione all'altra chiaro e accessibile
Utilizzo efficiente dello spazio verticale, schede sempre visibili
Vista compatta con sezioni espanse/compresse
Caso d’uso
Moduli complessi con sezioni suddivise in categorie
Processi di configurazione, moduli complessi
Organizzazione delle impostazioni o delle categorie di contenuto
Dashboard, visualizzazioni dati complesse
Domande frequenti, menu delle impostazioni e sezioni del contenuto dettagliato

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:

Flusso di lavoro per aggiungere un layout e 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

  1. Accedi all'istanza Experience Manager Forms.

  2. Nell'angolo superiore sinistro selezionare Adobe Experience Manager > Forms > Forms e documenti.

  3. Apri un modulo adattivo esistente in modalità di modifica, se è già stato creato.

    Aprire un modulo adattivo

    In alternativa, puoi anche creare un nuovo modulo adattivo.

  4. Nell’editor modulo, individua la sezione che consente di aggiungere un layout.

    Editor modulo

  5. Fai clic sull'icona Aggiungi. L’icona è un segno più (+) che indica l’opzione per aggiungere nuovi componenti.

    Inserisci layout

    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.
  6. 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.

    Seleziona 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.

    Schede orizzontali

  7. 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.

    Aggiungi nome per schede orizzontali

  8. Fai clic su Fine.

    Schede orizzontali

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:

  1. Apri le proprietà del componente Schede orizzontali e fai clic sulla scheda Elementi.

    Scheda elemento per schede orizzontali

  2. Fai clic sull'icona Aggiungi per aggiungere un nuovo pannello.

    Aggiungi nuovo pannello

    Quando si fa clic sull'icona Aggiungi, viene visualizzata la finestra di dialogo Inserisci nuovo componente.

  3. Seleziona il componente del pannello.

    Aggiungi nuovo pannello

    Quando selezioni il componente pannello, il nuovo pannello viene aggiunto nel layout orizzontale.

    Aggiungi nuovo pannello

    Assegna un nome al nuovo pannello. In caso contrario, non puoi salvare le proprietà del componente Schede orizzontali.

  4. Specificate i nomi dei pannelli come mostrato nella figura riportata di seguito:

    Nomi pannello

  5. 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.

    Nomi 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.

  6. Apri le proprietà del primo pannello.

    Proprietà pannello 1

  7. Selezionare la casella di controllo Nascondi titolo dalla scheda Base.

    Nascondi titolo

  8. 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

  1. Individua la sezione all’interno del pannello che consente di aggiungere componenti.

  2. Fai clic sull'icona Aggiungi. L’icona è un segno più (+) che indica l’opzione per aggiungere nuovi componenti.
    Inserisci layout

    Facendo clic sull'icona Aggiungi viene visualizzata una finestra di dialogo Inserisci nuovo componente in cui sono visualizzati vari componenti da inserire.

    Finestra di dialogo Inserisci nuovo componente

  3. 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.

  4. 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.
    Inserisci layout

  5. Allo stesso modo, aggiungi altri due componenti Casella di testo e assegna ai componenti un nome ID e-mail e un Reparto.
    Primo pannello

    Dopo aver aggiunto i componenti nel primo pannello, puoi procedere con l’aggiunta dei componenti al secondo pannello.

  6. Per cambiare pannello, fare clic su Seleziona pannello nella barra degli strumenti.

    Pannello Switch

    Quando fai clic su Seleziona pannello, viene visualizzato l'elenco dei pannelli aggiunti nel componente Schede orizzontali.

    Pannello Switch

  7. Selezionare 2 pannello dall'elenco dei pannelli e la visualizzazione cambia dal primo pannello al secondo.

    Secondo pannello

  8. Ripetete i passi descritti dal punto 2 al punto 4 per aggiungere i componenti desiderati nel pannello 2 come mostrato nella figura seguente:

    Componenti del secondo pannello

  9. Passare al pannello 3 seguendo i passaggi descritti nei passaggi 6 e 7.

  10. Ripeti i passaggi descritti dal passaggio 2 al passaggio 4 per aggiungere il componente desiderato nel pannello 3:

    Componenti del terzo pannello

  11. Fai clic su Anteprima nell'angolo in alto a destra dell'ambiente di authoring.
    Layout orizzontale

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 Elimina .

Eliminazione di un componente

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:

  1. Fare clic sull'icona Sostituisci nella barra degli strumenti del componente layout per visualizzare la finestra di dialogo Sostituisci componente.

    Sostituisci layout

  2. Selezionare il layout desiderato dalla finestra di dialogo Sostituisci componente.

    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:

    Layout verticale

Byte aggiuntivi

Per trascinare i componenti nell’editor di moduli, effettua le seguenti operazioni:

  1. Individua la sezione che ti consente di aggiungere componenti.

  2. Passa al pannello a sinistra nell'ambiente di authoring e fai clic su Componenti.

    Pannello Componenti

    Quando si fa clic sull'opzione Componenti, viene visualizzato l'elenco dei componenti disponibili.

    Pannello Componenti

  3. Sfoglia i componenti disponibili e seleziona il componente desiderato.

  4. Trascina il componente facendo clic e tenendo premuto il pulsante, quindi trascinalo sull’area del pannello per posizionarlo.

  5. 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

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab