Funzionalità di layout dei moduli adattivi

Adobe Experience Manager (AEM) consente di creare moduli adattivi di facile utilizzo che offrono esperienze dinamiche agli utenti finali. Il layout del modulo controlla il modo in cui gli elementi o i componenti vengono visualizzati in un modulo adattivo.

Conoscenze preliminari

Prima di apprendere le diverse funzionalità di layout dei moduli adattivi, consultare i seguenti articoli per ulteriori informazioni sui moduli adattivi.

Introduzione a AEM Forms

Introduzione alla creazione di moduli

Tipi di layout

Un modulo adattivo fornisce i seguenti tipi di layout:

Layout del pannelloControlla il modo in cui gli elementi o i componenti all’interno di un pannello vengono visualizzati su un dispositivo.

Mobile Layout: consente di controllare la navigazione di un modulo su un dispositivo mobile. Se la larghezza del dispositivo è pari o superiore a 768 pixel, il layout viene considerato mobile e ottimizzato per un dispositivo mobile.

Layout barra degli strumentiControlla la posizione dei pulsanti Azione nella barra degli strumenti o nella barra degli strumenti del pannello in un modulo.

Tutti i layout di questi pannelli sono definiti nella posizione seguente:

/libs/fd/af/layouts.

Layout pannello

Un autore di un modulo può associare un layout a ciascun pannello di un modulo adattivo, incluso il pannello principale.

I layout del pannello sono disponibili nella posizione /libs/fd/af/layouts/panel.

modulo adattivoFigura: Elenco dei layout dei pannelli nei moduli adattivi

Reattivo: tutto in una pagina senza navigazione

Utilizzate questo layout del pannello per creare un layout reattivo che si adatti alle dimensioni dello schermo del dispositivo senza necessità di navigazione specializzata.

Utilizzando questo layout, è possibile posizionare più componenti Modulo adattivo per pannelli uno dopo l'altro all'interno del pannello.

Figura: Un modulo con layout reattivo come mostrato su uno schermo di piccole dimensioni

Figura: Un modulo con layout reattivo come mostrato su uno schermo grande

Procedura guidata: un modulo con più fasi che mostra un passaggio alla volta

Utilizzare questo layout del pannello per fornire la navigazione guidata all'interno di un modulo. Ad esempio, utilizzare questo layout per acquisire informazioni obbligatorie in un modulo e guidare gli utenti passo dopo passo.

Utilizzate il componente Panel adaptive form per fornire una navigazione dettagliata all'interno di un pannello. Quando utilizzate questo layout, un utente passa al passaggio successivo solo dopo che il passaggio corrente è stato completato

window.guideBridge.validate([], this.panel.navigationContext.currentItem.somExpression)

Figura:espressione completamento passo nel layout Procedura guidata per un modulo a più fasi

Figura: Un modulo che utilizza la procedura guidata

Layout per la progettazione a soffietto

Utilizzando questo layout, potete posizionare il componente Panel adaptive form in un pannello con navigazione in stile Accordion. Utilizzando questo layout, potete anche creare pannelli ripetibili. I pannelli ripetibili consentono di aggiungere o rimuovere i pannelli in modo dinamico in base alle esigenze. Potete definire il numero minimo e massimo di ripetizioni di un pannello. Inoltre, il titolo del pannello può essere determinato in modo dinamico, in base alle informazioni fornite negli elementi del pannello.

L'espressione Summary può essere utilizzata per mostrare i valori forniti dall'utente finale nel titolo del pannello ridotto a icona.

Figura:pannelli ripetibili creati con il layout a soffietto

Layout a schede - le schede vengono visualizzate a sinistra

Utilizzando questo layout, potete posizionare il componente Panel adaptive form in un pannello con navigazione tramite tabulazioni. Le schede vengono posizionate a sinistra del contenuto del pannello.

Figura: Schede a sinistra di un pannello

Layout a schede - le schede vengono visualizzate nella parte superiore

Utilizzando questo layout, è possibile posizionare il componente Panel adaptive form in un pannello con navigazione tramite tabulazioni. Le schede vengono posizionate sopra al contenuto del pannello.

Figura: Schede nella parte superiore di un pannello

Layout per dispositivi mobili

I layout per dispositivi mobili consentono una navigazione semplice sui dispositivi mobili con schermate relativamente più piccole. I layout per dispositivi mobili utilizzano stili a schede o procedure guidate per la navigazione del modulo. L'applicazione di un layout mobile fornisce un singolo layout per l'intero modulo.

Questo layout controlla la navigazione mediante una barra di navigazione e un menu di navigazione. La barra di navigazione mostra l'icona < e ​​per indicare i passi di navigazione next e previous nel modulo.

I layout per dispositivi mobili sono disponibili nel percorso /libs/fd/af/layouts/mobile/. Per impostazione predefinita, nei moduli adattivi sono disponibili i seguenti layout per dispositivi mobili.

Figura: Elenco dei layout per dispositivi mobili nei moduli adattivi

Quando si utilizza un layout mobile, il menu del modulo, per accedere ai vari pannelli del modulo, è disponibile toccando l'icona .

Layout con titoli del pannello nell'intestazione del modulo

Questo layout, come suggerisce il nome, mostra i titoli dei pannelli insieme al menu di navigazione e alla barra di navigazione. Questo layout include anche le icone Successivo e Precedente per la navigazione.

Figura:Layout Mobile con titoli dei pannelli nelle intestazioni del modulo

Layout senza titoli del pannello nell'intestazione del modulo

Questo layout, come suggerisce il nome, mostra solo il menu di navigazione e la barra di navigazione senza titoli del pannello. Questo layout include anche le icone Successivo e Precedente per la navigazione.

Figura:Layout Mobile senza titoli del pannello nelle intestazioni del modulo

Layout barra degli strumenti

Un Layout barra degli strumenti controlla la posizione e la visualizzazione di eventuali pulsanti di azione aggiunti ai moduli adattivi. Il layout può essere aggiunto a livello di modulo o di pannello.

Figura: Elenco dei layout della barra degli strumenti nei moduli adattivi

I layout della barra degli strumenti sono disponibili nella posizione /libs/fd/af/layouts/toolbar. per impostazione predefinita, i moduli adattivi forniscono i seguenti layout della barra degli strumenti.

Layout predefinito per la barra degli strumenti

Questo layout viene selezionato come layout predefinito quando si aggiungono pulsanti di azione in un modulo adattivo. Selezionando questo layout viene visualizzato lo stesso layout sia per desktop che per dispositivi mobili.

È inoltre possibile aggiungere più barre degli strumenti contenenti pulsanti di azione configurati con questo layout. Un pulsante di azione è associato a un controllo modulo. È possibile configurare le barre degli strumenti prima o dopo un pannello.

Figura:Vista predefinita per la barra degli strumenti

Layout fisso per dispositivi mobili per la barra degli strumenti

Selezionate questo layout per fornire layout alternativi per desktop e dispositivi mobili.

Per il layout desktop, è possibile aggiungere pulsanti Azione utilizzando alcune etichette specifiche. Con questo layout è possibile configurare una sola barra degli strumenti. Se con questo layout sono configurate più barre degli strumenti, esiste una sovrapposizione per i dispositivi mobili e una sola barra degli strumenti è visibile. Ad esempio, è possibile avere una barra degli strumenti nella parte inferiore o superiore del modulo, dopo o prima dei pannelli nel modulo.

Per il layout mobile, potete aggiungere pulsanti di azione utilizzando delle icone.

Figura:layout fisso Mobile per la barra degli strumenti