Recursos de layout do Adaptive Forms layout-capabilities-of-adaptive-forms

O Adobe recomenda o uso de Componentes principaisde captura de dados moderna e extensível para criar um novo Forms Adaptávelou adicionar o Forms Adaptável às páginas do AEM Sites. Esses componentes representam um avanço significativo na criação do Forms adaptável, garantindo experiências de usuário impressionantes. Este artigo descreve a abordagem mais antiga para criar o Forms adaptável usando componentes de base.

O Adobe Experience Manager permite criar Forms adaptável fácil de usar que oferece experiências dinâmicas para usuários finais. O layout de formulário controla como os itens ou componentes são exibidos em um Formulário adaptável.

Tipos de layouts types-of-layouts

Um Formulário adaptável fornece os seguintes tipos de layouts:

Layout do Painel Controla como os itens ou componentes dentro de um painel são exibidos em um dispositivo.

Layout Móvel Controla a navegação de um formulário em um dispositivo móvel. Se a largura do dispositivo for de 768 pixels ou mais, o layout é considerado um Layout de dispositivo móvel e otimizado para um dispositivo móvel.

Layout da Barra de Ferramentas Controla a colocação dos botões de Ação na barra de ferramentas ou na barra de ferramentas do painel em um formulário.

Todos esses layouts de painel estão definidos no local /libs/fd/af/layouts.

Para alterar o layout de um Formulário Adaptável, use o Modo de Criação no Experience Manager.

Layout do painel panel-layout

Um autor de formulário pode associar um layout a cada painel de um formulário adaptável, incluindo o painel raiz.

Os layouts do Painel estão disponíveis no local /libs/fd/af/layouts/panel. Selecione o painel e selecione para exibir as propriedades do painel.

Responsivo - tudo em uma página sem navegação responsive-everything-on-one-page-without-navigation-br

Use este layout de painel para criar um layout responsivo que se ajuste ao tamanho da tela do seu dispositivo sem qualquer necessidade de navegação especializada.

Usando este layout, você pode colocar vários componentes de Formulário adaptável do painel, um após o outro, dentro do painel.

Assistente wizard

Use esse layout de painel para fornecer navegação guiada dentro de um formulário. Por exemplo, use esse layout quando quiser capturar informações obrigatórias em um formulário enquanto guia os usuários passo a passo.

Use o componente Formulário adaptável do painel para fornecer navegação passo a passo dentro de um painel. Quando você usa esse layout, um usuário passa para a próxima etapa somente após a etapa atual ser concluída

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

Acordeão layout-for-accordion-design

Usando este layout, você pode colocar o componente Formulário adaptável do painel em um painel com navegação de estilo Accordion. Usando esse layout, você também pode criar painéis repetíveis. Os painéis repetíveis permitem adicionar ou remover painéis dinamicamente, conforme necessário. Você pode definir o número mínimo e máximo de vezes que um painel é repetido. Além disso, o título do painel pode ser determinado dinamicamente, com base nas informações fornecidas nos itens do painel.

A expressão de resumo pode ser usada para mostrar os valores fornecidos pelo usuário no título do painel minimizado.

Layout com guias - guias são exibidas à esquerda tabbed-layout-tabs-appear-on-the-left

Usando este layout, você pode colocar o componente Formulário adaptável do painel em um painel com navegação por guias. As guias são colocadas à esquerda do conteúdo do painel.

Guias que aparecem à esquerda de um painel

Layout com guias - guias são exibidas na parte superior tabbed-layout-tabs-appear-on-the-top

Usando este layout, você pode colocar o componente Formulário adaptável do painel em um painel com navegação por guias. As guias são colocadas em cima do conteúdo do painel.

Layouts móveis mobile-layouts

Os layouts móveis permitem uma navegação fácil nos dispositivos móveis com telas relativamente menores. Os layouts móveis usam estilos com guias ou de assistente para navegação de formulário. A aplicação de um layout móvel fornece um único layout para todo o formulário.

Esse layout controla a navegação usando uma barra de navegação e um menu de navegação. A barra de navegação mostra o ícone < e > para indicar as etapas de navegação próximo e anterior no formulário.

Os Layouts Móveis estão disponíveis no local /libs/fd/af/layouts/mobile/. Os seguintes layouts móveis estão disponíveis no Adaptive Forms, por padrão.

Selecione a opção Adicionar itens navegáveis do layout responsivo para o menu móvel para exibir as opções navegáveis disponíveis para um painel no layout móvel. As opções navegáveis só estarão visíveis se você selecionar o layout Responsivo para um painel.

Ao usar um layout Móvel, o menu de formulário, para acessar vários painéis de formulário, está disponível ao tocar no ícone .

Layout com títulos de painel no cabeçalho do formulário layout-with-panel-titles-in-the-form-header

Esse layout, como o nome sugere, mostra títulos de painel junto com o menu de navegação e a barra de navegação. Esse layout também fornece ícones Próximo e Anterior para navegação.

Layout sem títulos de painel no cabeçalho do formulário layout-without-panel-titles-in-the-form-header

Esse layout, como o nome sugere, mostra apenas o menu de navegação e a barra de navegação sem títulos de painel. Esse layout também fornece ícones Próximo e Anterior para navegação.

Consulte também see-also