Funzionalità di layout di Adaptive Forms layout-capabilities-of-adaptive-forms

L’Adobe consiglia di utilizzare l’acquisizione dati moderna ed estensibile Componenti coreper creazione di un nuovo Forms adattivoo aggiunta di Forms adattivo alle pagine AEM Sites. Questi componenti rappresentano un progresso significativo nella creazione di Forms adattivi, garantendo esperienze utente straordinarie. Questo articolo descrive un approccio precedente all’authoring di Forms adattivi utilizzando i componenti di base.

Versione
Collegamento articolo
AEM 6.5
Fai clic qui
AEM as a Cloud Service
Questo articolo

Adobe Experience Manager consente di creare 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 types-of-layouts

Un modulo adattivo offre i seguenti tipi di layout:

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

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

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

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

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

Layout pannello panel-layout

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

I layout del pannello sono disponibili all'indirizzo /libs/fd/af/layouts/panel posizione. Seleziona il pannello e seleziona cmppr1 per visualizzare le proprietà del pannello.

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

Reattivo - tutto su una pagina senza navigazione responsive-everything-on-one-page-without-navigation-br

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

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

Un modulo che utilizza il layout dinamico come visualizzato su un piccolo schermo

Procedura guidata wizard

Utilizza questo layout di pannello per fornire una navigazione guidata all’interno di un modulo. Utilizzare ad esempio questo layout per acquisire informazioni obbligatorie in un modulo guidando gli utenti passo dopo passo.

Utilizza il Modulo adattivo pannello per una navigazione dettagliata all’interno di un pannello. Quando utilizzi questo layout, un utente passa al passaggio successivo solo dopo aver completato il passaggio corrente

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

Un modulo che utilizza il layout della procedura guidata

Pannello a soffietto layout-for-accordion-design

Utilizzando questo layout, è possibile inserire Modulo adattivo pannello componente in un pannello con navigazione in stile Pannello a soffietto. Utilizzando questo layout, puoi anche creare pannelli ripetibili. I pannelli ripetibili consentono di aggiungere o rimuovere in modo dinamico i pannelli in base alle esigenze. Puoi definire il numero minimo e 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 di riepilogo può essere utilizzata per mostrare i valori forniti dall’utente nel titolo del pannello ridotto a icona.

Pannelli ripetibili con layout a soffietto in Forms adattivo

Layout a schede: le schede vengono visualizzate a sinistra tabbed-layout-tabs-appear-on-the-left

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

Nel layout con schede, le schede vengono visualizzate a sinistra

Schede visualizzate a sinistra di un pannello

Layout a schede: le schede vengono visualizzate nella parte superiore tabbed-layout-tabs-appear-on-the-top

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

Layout a schede in Forms adattivo con schede in alto

Layout dispositivi mobili mobile-layouts

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

Questo layout controlla la navigazione tramite una barra di navigazione e un menu di navigazione. La barra di navigazione mostra < e > icona per indicare avanti e precedente passaggi di navigazione nel modulo.

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

Elenco dei layout mobili in Forms adattivo

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

Quando si utilizza un layout Mobile, per accedere ai vari pannelli del modulo tocca il menu del modulo aem6forms_form_menu icona.

Layout con titoli dei pannelli nell’intestazione del modulo layout-with-panel-titles-in-the-form-header

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

Layout mobili con titoli dei pannelli nelle intestazioni dei moduli

Layout senza titoli dei pannelli nell’intestazione del modulo layout-without-panel-titles-in-the-form-header

Come suggerisce il nome, questo layout mostra solo il menu di navigazione e la barra di navigazione senza i titoli dei pannelli. Questo layout fornisce anche le icone Successivo e Precedente per la navigazione.

Layout mobili senza titoli dei pannelli nelle intestazioni dei moduli

Consulta anche see-also

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