Componente Acordeão accordion-component-adaptive-forms-core-component

O componente principal de acordeão permite que os usuários criem seções que podem ser expandidas ou recolhidas em um formulário adaptável. Ele geralmente é usado para organizar e simplificar formulários longos ou complexos, dividindo-os em seções menores e mais fáceis de se controlar. Cada seção de um acordeão é normalmente representada por um cabeçalho, no qual o usuário pode clicar para expandir ou recolher o conteúdo correspondente. O conteúdo pode ser qualquer componente principal.

exemplo

Uso usage

Há várias vantagens de se usar um acordeão em um formulário adaptável, incluindo:

  • Economia de espaço: um acordeão permite que os usuários expandam e recolham as seções de um formulário, reduzindo a quantidade de espaço necessária para exibir todos os campos do formulário ao mesmo tempo.

  • Navegação: um acordeão pode ser usado para criar uma estrutura de navegação hierárquica, facilitando para os usuários encontrarem os campos de formulário necessários.

  • Experiência do usuário: o acordeão pode ser usado para tornar o formulário mais fácil de usar, fornecendo uma maneira clara e intuitiva para os usuários acessarem e preencherem campos de formulário.

  • Formulários longos: o acordeão é um componente ideal para lidar com formulários longos, pois permite que os usuários se concentrem em uma seção de cada vez, ao invés de tentar processar informações demais de uma só vez.

Você pode usar:

  • A caixa de diálogo de configuração para definir as propriedades do componente de acordeão.

  • O popover Selecionar painel para definir a ordem dos painéis do acordeão. Isso permite que o autor organize os painéis na ordem em que eles devam aparecer.

  • Opções para um autor de formulários ativar ou desativar determinados recursos na caixa de diálogo de design. Por exemplo, um autor pode optar por desativar determinados campos ou seções de um formulário. Essas opções permitem que o autor tenha um maior controle sobre o design e as funcionalidades do formulário, facilitando a criação de formulários personalizados para necessidades específicas da organização.

As caixas de diálogo de configuração e de design, bem como o popover Selecionar painel, fazem parte dos componentes principais que foram desenvolvidos para facilitar a criação de formulários e fornecem uma maneira eficiente de criar formulários complexos.

Versão e compatibilidade version-and-compatibility

O componente principal de acordeão de formulários adaptáveis foi lançado em fevereiro de 2023 como parte dos Componentes principais 2.0.4. Esta tabela mostra todas as versões compatíveis, a compatibilidade com o AEM e inclui links para a documentação correspondente:

Versão do componente
AEM as a Cloud Service
v1
Compatível com a
versão 2.0.4 e posteriores

Para obter informações sobre as versões dos Componentes principais, consulte o documento Versões dos Componentes principais.

Detalhes técnicos technical-details

Obtenha as informações mais recentes sobre o componente de acordeão na documentação técnica no GitHub. Para obter mais informações sobre o desenvolvimento dos Componentes principais, consulte a documentação do desenvolvedor dos Componentes principais.

Caixa de diálogo de configuração configure-dialog

Você pode personalizar facilmente a experiência de acordeão para visitantes com a caixa de diálogo de configuração. Você também pode facilmente definir itens, painéis, comportamentos e a aparência do acordeão para obter uma experiência de usuário perfeita.

Guia Básico basic-tab

Guia Básico

  • Nome: é possível identificar um componente de formulário facilmente com seu nome exclusivo no formulário e no editor de regras, mas o nome não pode conter espaços ou caracteres especiais.

  • Título: o título permite identificar facilmente um componente em um formulário; por padrão, ele aparece na parte superior do componente. Se um título não for adicionado, o nome do componente será exibido em vez do texto do título.

  • Permitir rich text para título: esse recurso permite formatar títulos de texto simples, incorporando recursos como negrito, itálico, texto sublinhado, várias fontes, tamanhos de fonte, cores e uma opção adicional para aprimorar a apresentação visual e a personalização. Ele oferece maior flexibilidade e controle criativo para que os títulos se destaquem em documentos, sites ou aplicativos.
    Ao marcar a caixa de seleção Permitir rich text para título, as opções de formatação se tornam visíveis para estilizar o título do componente. Para acessar todas as opções de formatação disponíveis, clique no Ícone de tela cheia .

    Suporte a rich text

  • Ocultar título: selecione essa opção para ocultar o título do componente.

  • Agrupar dados de componentes secundários no envio do formulário (vincular dados no objeto): quando essa opção é selecionada, os dados dos componentes secundários são aninhados no objeto JSON do componente principal. No entanto, se a opção não estiver selecionada, os dados JSON enviados terão uma estrutura simples, sem qualquer objeto para o componente principal. Por exemplo:

    • Quando a opção é selecionada, os dados dos componentes secundários (por exemplo, Rua, Cidade e CEP) são aninhados no componente principal (Endereço) como um objeto JSON. Isso cria uma estrutura hierárquica e os dados são organizados no componente principal.

      Estrutura dos dados enviados:

      code language-json
      { "Address":
      
      { "Street": "123 Main Street", "City": "New York", "Zip Code": "12345" }
      
      }
      
    • Quando a opção não está selecionada, os dados JSON enviados têm uma estrutura simples sem qualquer objeto para o componente principal (Endereço). Todos os dados estão no mesmo nível, sem qualquer organização hierárquica.

      Estrutura dos dados enviados:

      code language-json
         { "Street": "123 Main Street", "City": "New York", "Zip Code": "12345" }
      
  • Referência de vínculo: uma referência de vínculo é uma referência a um elemento de dados armazenado em uma fonte de dados externa e usado em um formulário. A referência de vínculo permite vincular dinamicamente os dados a campos de formulário, de modo que o formulário possa exibir os dados mais atualizados da fonte de dados. Por exemplo, uma referência de vínculo pode ser usada para exibir o nome e o endereço de um cliente em um formulário, com base na ID do cliente inserida no formulário. A referência de vínculo também pode ser usada para atualizar a fonte de dados com os dados inseridos no formulário. Dessa forma, o AEM Forms permite criar formulários que interagem com fontes de dados externas, fornecendo uma experiência do usuário perfeita para coletar e gerenciar dados.

  • Ocultar componente: selecione essa opção para ocultar o componente do formulário. O componente permanece acessível para outros fins, como usá-lo para cálculos no Editor de regras. Isso é útil quando você precisa armazenar informações que não precisam ser vistas ou alteradas diretamente pelo usuário.

  • Desativar Componente: selecione essa opção para desativar o componente. O componente desativado não está ativo nem editável pelo usuário final. O usuário pode ver o valor do campo, mas não pode modificá-lo. O componente permanece acessível para outros fins, como usá-lo para cálculos no Editor de regras.

  • Somente leitura: selecione essa opção para tornar o componente não editável. O usuário pode ver o valor do campo, mas não pode modificá-lo. O componente permanece acessível para outros fins, como usá-lo para cálculos no Editor de regras.

Repetir acordeão repeat-accordion

repeat-accordion

É possível usar as opções de repetibilidade para duplicar painéis de acordeão e seus componentes secundários, definir uma contagem de repetição mínima e máxima e facilitar a replicação de seções semelhantes em um formulário. Ao interagir com o componente de acordeão e acessar suas configurações, as seguintes opções serão apresentadas:

  • Tornar o acordeão repetível: um recurso que permite habilitar ou desabilitar a funcionalidade de repetibilidade.
  • Repetições mínimas: estabelece o número mínimo de vezes que o painel acordeão pode ser repetido. O valor padrão é zero e ele indica que o painel acordeão não é repetido.
  • Máximo de repetições: define o número máximo de vezes que o painel acordeão pode ser repetido. Por padrão, esse valor é ilimitado.

Para gerenciar com eficácia as seções repetíveis no acordeão, siga as etapas fornecidas no artigo Criação de formulários com seções repetíveis.

Guia Itens items-tab

Guia Itens

O botão Adicionar permite selecionar um componente da janela de seleção de componentes para adicionar como um painel. Após adicionar o componente, você verá as seguintes opções:

  • Ícone - O ícone identifica o componente do painel na lista. Você pode passar o mouse sobre o ícone para ver o nome completo do componente como uma dica de ferramenta.
  • Descrição - A descrição usada como o texto do painel. Por padrão, o nome do componente é selecionado para o painel.
  • Excluir - Toque ou clique para excluir o painel do componente Acordeão.
  • Reorganizar - Toque ou clique e arraste para reorganizar a ordem dos painéis.

Guia Conteúdo de ajuda help-content

Guia Conteúdo de ajuda

  • Descrição curta: uma descrição curta é uma breve explicação em texto que fornece informações adicionais ou esclarecimentos sobre a finalidade de um campo de formulário específico. Ela ajuda o usuário a entender qual tipo de dados deve ser inserido no campo e pode fornecer diretrizes ou exemplos para ajudar a garantir que as informações inseridas sejam válidas e atendam aos critérios desejados. Por padrão, as descrições curtas permanecem ocultas. Ative a opção Sempre mostrar descrição curta para exibi-la abaixo do componente.

  • Sempre mostrar descrição curta: ative essa opção para exibir a descrição curta abaixo do componente.

  • Texto de ajuda: o texto de ajuda refere-se às informações adicionais ou orientações fornecidas ao usuário para auxiliá-lo no preenchimento correto de um campo de formulário. Ele é exibido quando o usuário clica no ícone de ajuda (i) colocado ao lado do componente. O texto de ajuda fornece informações mais detalhadas do que o rótulo do campo de formulário ou o texto do espaço reservado e foi desenvolvido para ajudar o usuário a entender os requisitos ou restrições do campo. Ele também pode oferecer sugestões ou exemplos para tornar o preenchimento do formulário mais fácil e preciso.

Guia Acessibilidade accessibility

Guia Acessibilidade

Na guia Acessibilidade, é possível definir os valores dos rótulos de acessibilidade ARIA do componente. Várias opções estão disponíveis para usar o texto para leitor de tela:

  • Texto para leitores de tela: o texto para leitores de tela refere-se ao texto adicional que é especificamente destinado a ser lido por tecnologias de acessibilidade, como leitores de tela, usadas por indivíduos com deficiências visuais. Esse texto fornece uma descrição de áudio da finalidade do campo de formulário e pode incluir informações sobre o título do campo, a descrição, o nome e quaisquer mensagens relevantes (texto personalizado). O texto do leitor de tela ajuda a garantir que o formulário seja acessível a todos os usuários, incluindo aqueles com deficiências visuais, e fornece a eles uma compreensão completa do campo de formulário e de seus requisitos.

    • Texto personalizado: selecione essa opção para usar o texto personalizado para rótulos de acessibilidade ARIA. Selecionar essa opção exibe a caixa de diálogo Texto personalizado. Você pode adicionar informações relevantes na caixa de diálogo Texto personalizado.
    • Descrição: selecione essa opção para usar a descrição para rótulos de acessibilidade ARIA.
    • Título: selecione essa opção para usar o título para rótulos de acessibilidade ARIA.
    • Nome: selecione essa opção para usar o nome para rótulos de acessibilidade ARIA.
    • Nenhum: selecione essa opção se não quiser adicionar nada aos rótulos de acessibilidade ARIA.

Caixa de diálogo Design design-dialog

A caixa de diálogo de design permite que os criadores de modelos controlem a exibição padrão dos elementos. Para o componente de acordeão de formulários adaptáveis, você pode definir o seguinte:

  • Os tipos de elementos de cabeçalho HTML que são permitidos e definidos como padrão (como H1, H2, H3 etc.)
  • Os componentes principais que um criador de formulário pode adicionar a um acordeão no editor de formulários adaptáveis
  • Nomes simples para estilos (classes CSS) que podem ser aplicados na caixa de diálogo de propriedades do componente de acordeão no editor de formulários adaptáveis.

Isso ajuda a tornar o processo de criação e personalização de formulários mais simples e eficiente.

Guia Propriedades properties-tab-design

A guia Propriedades permite que os autores de modelo definam os elementos de cabeçalho HTML padrão e permitidos para autores de formulários:

Guia de propriedades da caixa de diálogo de design

  • Elementos de cabeçalho permitidos: uma lista suspensa com várias opções que permitem ao autor do modelo escolher quais elementos de cabeçalho podem ser usados pelo autor do formulário no acordeão.

  • Elemento de cabeçalho padrão: uma lista suspensa que define os elementos de cabeçalho padrão para o componente de acordeão.

Guia Componentes permitidos allowed-components-tab

Guia Componentes permitidos da caixa de diálogo de design

A guia Componentes permitidos permite que o editor de modelos defina os componentes que podem ser adicionados como itens aos painéis do componente de acordeão no editor de formulários adaptáveis.

Guia Estilos styles-tab

Guia Estilos da caixa de diálogo de design

A caixa de diálogo de design é usada para definir e gerenciar os estilos CSS de um componente. O componente principal de acordeão de formulários adaptáveis é compatível com o sistema de estilos do AEM.

  • Classes CSS padrão: você pode fornecer uma classe CSS padrão para o componente de acordeão.

  • Estilos permitidos: você pode definir estilos fornecendo um nome e a classe CSS que o representa. Por exemplo, você pode criar um estilo chamado “texto em negrito” e fornecer a classe CSS “font-weight: bold”. Você pode usar ou aplicar esses estilos a um formulário adaptável no editor de formulários adaptáveis. Para aplicar um estilo, no editor de formulários adaptáveis, selecione o componente ao qual deseja aplicar o estilo, navegue até a caixa de diálogo de propriedades e selecione o estilo desejado na lista suspensa Estilos. Se precisar atualizar ou modificar os estilos, simplesmente retorne à caixa de diálogo Design, atualize os estilos na guia estilos e salve as alterações.

Propriedades personalizadas

accordion-custom-properties-tab
Através das propriedades personalizadas, é possível associar atributos personalizados (pares de chave-valor) a um componente principal de formulário adaptável usando o modelo de formulário. As propriedades personalizadas são refletidas na seção de propriedades da representação headless do componente. Isso permite criar um comportamento de formulário dinâmico que se adapta de acordo com os valores de atributos personalizados. Por exemplo, desenvolvedores(as) podem criar várias representações de um componente de formulário headless para plataformas móveis, de desktop ou da web, melhorando significativamente a experiência de usuário em uma grande variedade de dispositivos.

  • Nome do grupo: você pode fornecer um nome para identificar o grupo de propriedades personalizadas. É possível adicionar, excluir ou reorganizar vários grupos de propriedades personalizadas. Após adicionar o grupo de propriedades personalizadas, você verá as seguintes opções:

    • Pares de chave e valor: é possível adicionar vários nomes e valores de propriedades personalizadas clicando em Adicionar em cada grupo de propriedades personalizadas.

    • Excluir: toque ou clique para excluir o nome e o valor da propriedade personalizada.

    • Reorganizar: toque ou clique e arraste para alterar a ordem do nome e do valor da propriedade personalizada.

Consulte também see-also

recommendation-more-help
d2be9096-a81e-404b-9952-d8925af7219c