Show Menu
TÓPICOS×

Introduction to authoring adaptive forms

Visão geral

Formulários adaptáveis permitem criar formulários envolventes, responsivos, dinâmicos e adaptativos. O AEM Forms fornece uma interface de usuário intuitiva e componentes prontos para uso para criar e trabalhar com formulários adaptáveis. É possível optar por criar um formulário adaptável com base em um modelo de formulário ou schema ou sem um modelo de formulário. É importante escolher cuidadosamente o modelo de formulário que atende não apenas às suas necessidades, mas amplia seus investimentos e ativos de infraestrutura existentes. Você pode escolher entre as seguintes opções para criar um formulário adaptável:
  • Uso de um modelo de dados de formulário A integração de dados permite integrar entidades e serviços de fontes de dados diferentes em um modelo de dados de formulário que pode ser usado para criar formulários adaptáveis. Escolha o modelo de dados do formulário se o formulário adaptativo que você está criando envolver a busca e a gravação de dados de e para várias fontes de dados.
  • Usando um modelo de formulário XDP É um modelo de formulário ideal se você tiver investimentos em formulários XFA ou XDP. Ele fornece uma maneira direta de converter seus formulários baseados em XFA em formulários adaptáveis. Quaisquer regras XFA existentes são mantidas nos formulários adaptativos associados. Os formulários adaptativos resultantes suportam construções XFA, como validações, eventos, propriedades e padrões.
  • Usar uma Definição de Schema XML (XSD) ou schemas JSON XML e JSON representam a estrutura na qual os dados são produzidos ou consumidos pelo sistema de back-end em sua organização. É possível associar o schema a um formulário adaptável e usar seus elementos para adicionar conteúdo dinâmico ao formulário adaptável. Os elementos do schema estarão disponíveis para uso na guia Objetos do modelo de dados do navegador Conteúdo ao criar formulários adaptáveis.
  • Usando nenhum modelo de formulário ou sem um modelo Os formulários adaptáveis criados com essa opção não usam nenhum modelo de formulário. O XML de dados gerado desses formulários tem uma estrutura simples com campos e valores correspondentes.
Para obter mais informações sobre como criar um formulário adaptável, consulte Criar um formulário adaptável.

Interface adaptável de criação de formulário

A interface otimizada ao toque para a criação de formulários adaptáveis é intuitiva e fornece:
  • Funcionalidade de arrastar e soltar
  • Componentes de formulário padrão
  • Repositório integrado para ativos
Ao criar um formulário novo ou editar um formulário adaptável existente, você usa os seguintes elementos da interface do usuário:
A. Barra lateral B. Barra de ferramentas da página C. Página do formulário adaptável

Barra de ferramentas da página

A barra de ferramentas da página na parte superior fornece opções que permitem que você pré-visualização o formulário, altere as propriedades do formulário e edite o layout do formulário. É possível pré-visualização o formulário ao criá-lo e fazer alterações de acordo. Na barra de ferramentas da página, você verá:
  • Alternar painel lateral : Permite mostrar ou ocultar a barra lateral.
  • Opções de da página: Permite que você visualização as propriedades da página, publique/despublique um formulário, start um fluxo de trabalho de formulário e abra o formulário na interface clássica.
  • Emulador : Permite que você emule a aparência do formulário para tamanhos de exibição diferentes, como tablets e telefones.
  • Editar : Permite selecionar outros modos, como: Editar , Estilo , Desenvolvedor e Design .
    • Editar : Permite editar as propriedades do formulário e de seus componentes. Por exemplo, adicionar um componente, soltar uma imagem e especificar campos obrigatórios.
    • Estilo : Permite estilizar a aparência dos componentes do formulário. Por exemplo, no modo de estilo, é possível selecionar um painel e especificar sua cor de plano de fundo.
    • Desenvolvedor : Permite que um desenvolvedor:
      • Descubra de quais formulários são compostos.
      • Depurar o que está acontecendo onde e quando, o que por sua vez ajuda a resolver problemas.
    • Design . Permite ativar ou desativar componentes personalizados ou componentes prontos para uso que não estejam listados na barra lateral.
  • Pré-visualização : Permite que você pré-visualização a aparência do formulário ao publicá-lo.

Component toolbar

Ao selecionar um componente, você verá uma barra de ferramentas que permite que você trabalhe nele. Você obtém opções para recortar, colar, mover e especificar propriedades dos componentes. Suas opções são:
A. Configurar : Quando você toca em Configurar , as propriedades do componente ficam visíveis na barra lateral. A configuração dessas propriedades permite personalizar a experiência de captura de dados. Você pode alterar o nome do elemento do componente, especificar o texto do rótulo no campo Título do componente. O nome do elemento permite capturar valores inseridos pelos usuários usando o componente. Nas propriedades do componente, especifique o comportamento do componente e gerencie a entrada do usuário. Configure as propriedades na barra lateral para capturar os dados do usuário e usá-los para processamento adicional. As propriedades do container de formulário adaptável permitem especificar as bibliotecas do cliente, os layouts, os Temas, as configurações do Documento de registro, as configurações de salvamento, as configurações de envio e as configurações de metadados.
B. Copiar : É possível usar a opção de cópia para copiar um componente e colá-lo em outros locais no formulário. Quando você cola um componente, o componente colado recebe um novo nome de elemento, mas retém as propriedades do componente copiado.
C. Cortar : Use a opção de corte para mover um componente de um lugar para outro no formulário adaptável.
D. Excluir : Permite excluir o componente do formulário.
E. Inserir : Permite inserir um componente acima do componente selecionado.
F. Colar : Permite colar o componente que você recortou ou copiou usando as opções descritas acima.
G. Editar regras : Permite abrir o editor de regras. Para obter mais informações, consulte Editor de regras.
H. Grupo : Permite selecionar vários componentes se você deseja recortar, copiar ou colar mais de um componente juntos.
Eu. Pai : Permite selecionar o pai de um componente. Por exemplo, um campo de texto está em uma subseção, que reside em uma seção. A seção fica no painel raiz guia e o container de formulário adaptável é o pai de um painel raiz guia. Para um componente, você pode ver todas as opções com os fundos classificados na hierarquia.
Por exemplo, se você tocar em Pai para uma caixa de texto, poderá ver:
  • Subseção
  • Seção
  • guideRootPanel
  • container de formulário adaptável
J. Outros : Fornece mais opções para trabalhar com o componente selecionado.
  • expressão SOM Visualização
  • Salvar um painel como fragmento (somente para painéis)
  • Adicionar painel filho (somente para painéis)
  • Adicionar barra de ferramentas do painel (somente para painéis)
  • Substituir (não para painéis)

Adaptive form page

A página de formulário adaptável é o formulário real. É como qualquer outra página WCM modelada como o componente WCM cq:Page . A imagem a seguir mostra a estrutura de conteúdo de um formulário adaptável típico.
A estrutura de conteúdo normalmente contém os seguintes componentes principais:
  • guideContainer : A raiz de um formulário adaptável, que é marcada como Start de forma adaptável na interface de usuário do formulário adaptável. Neste componente, você pode especificar:
    • Layout móvel do formulário adaptável: Define a aparência do formulário em dispositivos móveis.
    • Página de agradecimento: Define a página na qual o usuário é redirecionado após o envio do formulário.
    • Ação Enviar: Define como o formulário é processado no servidor depois que o usuário envia o formulário.
    • Estilo : Especifica o caminho para o arquivo CSS usado para personalizar a aparência do formulário.
  • rootPanel: O painel raiz de um formulário adaptável. Ele pode conter subpainéis sob o nó itens. Cada painel, incluindo o painel raiz, pode ter um layout associado a ele. O layout do painel determina como o formulário é posicionado. Por exemplo, no layout Acordeão, seus itens são posicionados como etapas Acordeão.
  • barra de ferramentas: Um container de formulário adaptável tem uma barra de ferramentas global associada, que é global ao formulário. Essa barra de ferramentas pode ser adicionada usando a ação Adicionar barra de ferramentas na barra de edição, que permite aos autores adicionar ações, como Enviar, Salvar, Redefinir etc.
  • ativos: Esse nó contém informações adicionais usadas para a criação de formulários. Por exemplo, detalhes do modelo de formulário, detalhes da localização e assim por diante).