Tabelas no formulário adaptável tables-in-adaptive-forms

O Adobe recomenda o uso da captura de dados moderna e extensível Componentes principaispara criação de um novo Forms adaptávelou adição de 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 uso de tabelas é uma maneira eficaz, simplificada e organizada de apresentar dados complexos. Ele ajuda os usuários a identificar informações facilmente e fornecer entradas em uma organização ordenada de linhas e colunas. A maioria dos formulários de serviços financeiros e organizações governamentais exigem grandes tabelas de dados para colocar números e realizar cálculos.

O AEM Forms fornece um componente Tabela no navegador de componentes na barra lateral que permite criar tabelas em formulários adaptáveis. Alguns dos principais recursos que ele oferece são:

Criar uma tabela create-a-table

Para criar uma tabela, arraste e solte o componente Tabela do navegador de componentes no sidekick do formulário adaptável. Por padrão, a tabela contém duas colunas e três linhas, incluindo a linha de cabeçalho.

Sobre as células do cabeçalho e do corpo about-header-and-body-cells

As células de cabeçalho são campos de texto. Para alterar o rótulo de um cabeçalho, clique com o botão direito do mouse na célula de cabeçalho e clique em Editar. Na caixa de diálogo Editar, atualize o rótulo na Valor e clique em OK.

Por padrão, as células do corpo são caixas de texto. Você pode substituir uma célula do corpo por qualquer outro componente de formulários adaptáveis disponível no sidekick, como uma caixa numérica, seletor de datas ou lista suspensa.

Por exemplo, a primeira linha do corpo na tabela a seguir inclui componentes de caixa de texto, seletor de datas e lista suspensa como células.

É possível mesclar duas ou mais células do corpo selecionando as células que deseja mesclar, clicando com o botão direito do mouse e selecionando Mesclar. Além disso, é possível dividir uma célula mesclada clicando com o botão direito do mouse nela e selecionando Dividir células.

Adicionar, excluir, mover linhas e colunas add-delete-move-rows-and-columns

Você pode adicionar e excluir uma linha ou coluna e mover uma linha para cima e para baixo em uma tabela.

Adicionar, excluir ou mover uma linha

Para adicionar, excluir ou mover a linha, clique em qualquer célula da linha. abrir o navegador de conteúdo e selecionar a linha correspondente, realçará a linha selecionada com a opção de barra de ferramentas de onde você pode adicionar, excluir ou mover a linha para cima ou para baixo.

Clique duas vezes na linha para configurar as propriedades de uma linha, como Nome, Referência de ligação, Configurações de repetição, Classe CSS.

Adicionar ou excluir uma coluna

Para adicionar ou excluir uma coluna, clique na célula de texto na seção de cabeçalho. Uma barra de ferramentas será aberta com as opções para adicionar ou excluir uma coluna:

Adicionar descrição da tabela add-table-description

É possível adicionar uma descrição da tabela para explicar como as informações são organizadas que os leitores de tela podem interpretar e ler. Para adicionar a descrição:

Classificar colunas em uma tabela sortcolumnstable

Você pode classificar dados com base em qualquer coluna em uma tabela no formulário adaptável. Os valores na coluna podem ser classificados em ordem crescente ou decrescente.

A classificação pode ser aplicada às colunas da tabela que contêm:

Para aplicar a classificação nas colunas da tabela, as células da coluna da tabela devem conter qualquer um dos seguintes componentes: Caixa Numérica, Escalonador Numérico, Campo de Entrada de Data, Seletor de Data, Texto ou Caixa de Texto.

Para ativar a classificação:

Definir a largura da coluna de uma tabela set-column-width

Execute as seguintes etapas para definir a largura da coluna para uma tabela:

Configurar estilo da tabela configure

Você pode definir o estilo de uma tabela usando o modo Estilo na barra de ferramentas da página. Execute as seguintes etapas para alternar para o modo de estilo e editar o estilo da tabela

Adicionar ou excluir uma linha dinamicamente add-or-delete-a-row-dynamically

As tabelas fornecem suporte pronto para adicionar ou excluir dinamicamente linhas no tempo de execução.

No tempo de execução ou pré-visualização, você verá + e botões para adicionar ou excluir uma linha.

Expressões em uma tabela expressions-in-a-table

Tabelas em formulários adaptáveis permitem escrever expressões em JavaScript para induzir comportamentos, como mostrar ou ocultar uma tabela ou uma linha, adicionar todos os números e mostrar o total em uma célula, habilitar ou desabilitar uma célula, validar a entrada do usuário e assim por diante. Essas expressões usam APIs de modelo de script de formulários adaptáveis.

Embora tabelas e linhas suportem apenas expressões de visibilidade para controlar sua visibilidade com base no valor retornado por uma expressão, as células suportam as seguintes expressões:

A expressão de visibilidade de uma tabela ou linha pode ser definida na guia de propriedades Painel da caixa de diálogo Editar componente correspondente. As expressões de uma célula podem ser definidas na guia Script da caixa de diálogo Editar componente.

Para obter a lista completa de classes de formulários adaptáveis, eventos, objetos e APIs públicas, consulte Referência da API da biblioteca JavaScript para formulários adaptáveis.

Layouts móveis mobile-layouts

As tabelas em formulários adaptáveis fornecem dispositivos móveis de experiência incomparáveis devido a seus layouts fluidos e responsivos. O AEM Forms oferece dois tipos de layouts móveis para tabelas: Cabeçalhos à esquerda e Colunas flexíveis.

É possível configurar um layout móvel para uma tabela na guia Estilo da caixa de diálogo Editar componente para uma tabela.

Cabeçalhos à esquerda headers-on-left

No layout Cabeçalhos à esquerda, o cabeçalho da tabela é transposto à esquerda com apenas uma célula que aparece em relação a um cabeçalho. Cada linha neste layout aparece como uma seção distinta. As imagens a seguir comparam uma tabela em um desktop com aquela em um dispositivo móvel.

Exibição de desktop de uma tabela com cabeçalho no layout esquerdo

Exibição móvel de uma tabela com Cabeçalho no layout esquerdo

Layout de colunas flexíveis collapsible-columns-layout

No layout de coluna Recolhível, as colunas na tabela são recolhidas para mostrar uma ou duas colunas, dependendo do tamanho do dispositivo, enquanto as outras colunas são recolhidas. Você pode clicar no ícone recolher/expandir para exibir outras colunas na tabela.

As imagens a seguir comparam como uma tabela é exibida em um dispositivo com colunas recolhidas e expandidas.

Colunas recolhidas de uma tabela com apenas duas colunas exibidas em um dispositivo móvel

Coluna expandida de uma tabela em um dispositivo móvel

Mesclar dados em uma tabela merge-data-in-a-table

Tabelas em formulários adaptáveis permitem preencher a tabela no tempo de execução usando dados de um arquivo XML. O arquivo XML de dados pode residir no sistema de arquivos local da máquina em que o servidor do AEM Forms está sendo executado ou no repositório CRX.

Vamos ver um exemplo da tabela de resumo de transações bancárias a seguir que queremos preencher com dados de um arquivo XML.

Neste exemplo, a propriedade Element name para:

O arquivo XML que contém dados no seguinte formato:

<?xml version="1.0" encoding="UTF-8"?><afData>
  <afUnboundData>
    <data>
 <typeSelect>0</typeSelect>
 <Row1>
      <tableItem1>2015-01-08</tableItem1>
      <tableItem2>Purchase laptop</tableItem2>
      <type>0</type>
      <tableItem3>12000</tableItem3>
 </Row1>
 <Row1>
      <tableItem1>2015-01-05</tableItem1>
      <tableItem2>Transport expense</tableItem2>
      <type>0</type>
      <tableItem3>120</tableItem3>
 </Row1>
 <Row1>
      <tableItem1>2014-01-08</tableItem1>
      <tableItem2>Laser printer</tableItem2>
      <type>0</type>
      <tableItem3>500</tableItem3>
 </Row1>
 <Row1>
      <tableItem1>2014-12-08</tableItem1>
      <tableItem2>Credit card payment</tableItem2>
      <type>0</type>
      <tableItem3>300</tableItem3>
 </Row1>
 <Row1>
      <tableItem1>2015-01-06</tableItem1>
      <tableItem2>Interest earnings</tableItem2>
      <type>1</type>
      <tableItem3>12000</tableItem3>
 </Row1>
 <Row1>
      <tableItem1>2015-01-05</tableItem1>
      <tableItem2>Payment from a client</tableItem2>
      <type>1</type>
      <tableItem3>500</tableItem3>
 </Row1>
 <Row1>
      <tableItem1>2015-01-08</tableItem1>
      <tableItem2>Food expense</tableItem2>
      <type>0</type>
      <tableItem3>120</tableItem3>
 </Row1>
 </data>
  </afUnboundData>
  <afBoundData>
    <data/>
  </afBoundData>
  <afBoundData/>
</afData>

No exemplo XML, os dados de uma linha são definidos pela variável <Row1> tags, que é o nome do elemento para a linha na tabela. No prazo de <Row1> tag, os dados de cada célula são definidos na tag para seu nome de elemento, como <tableItem1>, <tableItem2>, <tableItem3>, e <type>.

Para mesclar esses dados com a tabela no tempo de execução, precisamos apontar o formulário adaptável que contém a tabela para o local XML absoluto com o wcmmode desativado. Por exemplo, se o formulário adaptável estiver em https://localhost:4502/myForms/bankTransaction.html e o arquivo XML de dados é salvo em C:/myTransactions/bankSummary.xml, você pode visualizar a tabela com os dados no seguinte URL:

https://localhost:4502/myForms/bankTransaction.html?dataRef=file:/// C:/myTransactions/bankSummary.xml&wcmmode=disabled

Usar componentes XDP e tipos complexos de XSD use-xdp-components-and-xsd-complex-types

Se você criou um formulário adaptável com base em um modelo de formulário XFA, os elementos XFA estarão disponíveis na guia Modelo de dados do Localizador de conteúdo do AEM. Você pode arrastar e soltar esses elementos XFA, incluindo tabelas, no formulário adaptável.

O elemento da tabela XFA é mapeado para o componente Tabela e funciona pronto para uso em formulários adaptáveis. Todas as propriedades e funcionalidades da tabela XDP são preservadas quando movidas para o formulário adaptável e você pode executar qualquer operação nela, como faz com a tabela de formulário adaptável nativa. Por exemplo, se uma linha em uma tabela XDP for marcada como repetível, ela também será repetida quando solta em formulários adaptáveis.

Além disso, você pode arrastar e soltar o subformulário XDP para adicionar uma nova linha na tabela. No entanto, observe que soltar um subformulário aninhado não funciona.

Além disso, você pode arrastar e soltar um grupo de elementos de tipo complexo XSD para criar uma linha de tabela. Uma nova linha é criada logo abaixo da linha em que você soltou os elementos. As células criadas usando os elementos de tipo complexo XSD mantêm uma referência de ligação ao XSD. Você também pode substituir uma célula do corpo por um elemento de tipo complexo XSD soltando o elemento na célula.

Principais considerações key-considerations

Consulte também see-also