Funzionalità di layout di Adaptive Forms

Adobe Experience Manager consente di creare un Forms adattivo di facile utilizzo che offre 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.

Tipi di layout

Un Modulo adattivo fornisce i seguenti tipi di layout:

Layout del pannello Controlla la modalità di visualizzazione degli elementi o dei componenti all’interno di un pannello su un dispositivo.

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

Layout barra degli strumenti Controlla la posizione dei pulsanti di azione nella barra degli strumenti o nel pannello di un modulo.

Tutti i layout di questi pannelli sono definiti nella /libs/fd/af/layouts posizione.

Per modificare il layout di un modulo adattivo, utilizzare la modalità di creazione in Experience Manager.

Layout pannello

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

I layout dei pannelli sono disponibili in /libs/fd/af/layouts/panel posizione. Tocca il pannello e seleziona cmppr1 per visualizzare le proprietà del pannello.

Elenco dei layout dei pannelli per il pannello principale di un modulo adattivo

Reattivo : tutto su una pagina senza navigazione

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

Utilizzando questo layout, è possibile inserire più Modulo adattivo del pannello componenti uno dopo l’altro all’interno del pannello.

Un modulo con layout reattivo come visualizzato su un piccolo schermo

Wizard

Utilizzare questo layout del pannello per fornire la navigazione guidata all’interno di un modulo. Ad esempio, utilizzare questo layout quando si desidera acquisire informazioni obbligatorie in un modulo mentre gli utenti sono guidati passo dopo passo.

Utilizza la Modulo adattivo del pannello per fornire una navigazione dettagliata all’interno di un pannello. Quando si utilizza questo layout, un utente passa al passaggio successivo solo al completamento del passaggio corrente

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

Un modulo con layout guidato

Pannello a soffietto

Utilizzando questo layout, è possibile inserire il Modulo adattivo del pannello in un pannello con navigazione a soffietto. Utilizzando questo layout è possibile creare anche pannelli ripetibili. I pannelli ripetibili consentono di aggiungere o rimuovere dinamicamente i pannelli in base alle esigenze. Puoi definire il numero minimo e il numero massimo di ripetizioni di un pannello. Inoltre, il titolo del pannello può essere determinato dinamicamente, 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 minimizzato.

Pannelli ripetibili con layout a soffietto in Forms adattivo

Layout a schede - le schede vengono visualizzate a sinistra ​

Utilizzando questo layout, è possibile inserire il Modulo adattivo del pannello in un pannello con navigazione a schede. Le schede vengono posizionate a sinistra del contenuto del pannello.

Nel layout a schede, le schede vengono visualizzate a sinistra

Schede visualizzate a sinistra di un pannello

Layout a schede - le schede vengono visualizzate nella parte superiore

Utilizzando questo layout, è possibile inserire il Modulo adattivo del pannello Componente in un pannello con navigazione a schede. Le schede vengono posizionate sopra il contenuto del pannello.

Layout a schede in Forms adattivo con schede nella parte superiore

Layout dei dispositivi mobili

I layout per dispositivi mobili consentono una navigazione agevole sui dispositivi mobili con schermi relativamente più piccoli. I layout per dispositivi mobili utilizzano stili a schede o a procedura guidata per la navigazione nei moduli. L’applicazione di un layout mobile fornisce un singolo layout per l’intero modulo.

Questo layout controlla la navigazione tramite una barra di navigazione e un menu di navigazione. Viene visualizzata la barra di navigazione < e > icona per indicare next e precedente passaggi di navigazione nel modulo.

I layout per dispositivi mobili sono disponibili in /libs/fd/af/layouts/mobile/ posizione. Per impostazione predefinita, i seguenti layout per dispositivi mobili sono disponibili in Adaptive Forms.

Elenco dei layout per dispositivi mobili in Adaptive Forms

Seleziona la Aggiungi elementi navigabili con layout reattivo al menu mobile per visualizzare le opzioni navigabili disponibili per un pannello nel layout Mobile. Le opzioni navigabili sono visibili solo se si seleziona Reattivo layout per un pannello.

Quando si utilizza un layout mobile, per accedere ai vari pannelli dei moduli è disponibile il menu del modulo. aem6forms_form_menu icona.

Layout con titoli dei pannelli 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.

Layout dei dispositivi mobili con titoli dei pannelli nelle intestazioni dei moduli

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.

Layout dei dispositivi mobili senza titoli dei pannelli nelle intestazioni dei moduli

In questa pagina