Criar um modelo de formulário adaptável

Ao criar um formulário, você adiciona campos e componentes para definir a estrutura, o conteúdo e as ações do formulário no editor. Você adiciona campos e componentes na guideRootPanel do contêiner de formulário. Com o Editor de modelo, é possível criar um modelo que contenha a estrutura básica e o conteúdo inicial que os autores podem usar para criar formulários.

Por exemplo, você deseja que todos os autores de formulários tenham determinadas caixas de texto, botões de navegação e um botão Enviar em um formulário de inscrição. É possível criar um modelo com os componentes que os autores podem usar para criar um formulário consistente com outros formulários de inscrição. Quando os autores usam o modelo para criar um formulário adaptável, o novo formulário herda a estrutura e os componentes especificados no modelo. O Editor de modelos permite:

  • Adicione componentes de cabeçalho e rodapé de um formulário na camada de estrutura.
  • Forneça o conteúdo inicial do formulário.
  • Especifique um tema, Enviar ações.

Você pode baixar e instalar AEM Forms pacote de conteúdo de referência de Distribuição de software portal para importar temas e modelos de referência para o seu ambiente.

Trabalhar com modelos

Você pode acessar o editor de modelos no menu Ferramentas navegando até Adobe Experience Manager > Ferramentas > Geral > Modelos. Aqui, os modelos são organizados em pastas habilitadas para modelos editáveis.

O Experience Manager fornece uma pasta global para organizar templates. No entanto, não está ativado por padrão. Você pode solicitar ao Administrador que ative a pasta global ou crie uma pasta para modelos. Para obter mais informações sobre como criar pastas, consulte Pastas de modelo.

Criação de um modelo

Depois de criar uma pasta, abra-a e execute as seguintes etapas para criar um template:

  1. Toque Criar na pasta que você criou.

  2. Na seção Selecionar um tipo de modelo , selecione Modelo de formulário adaptável e tocar Próximo.

  3. Na seção Detalhes do modelo , forneça um Título de modelo e toque em Criar.
    Você também pode fornecer uma descrição.

  4. Toque Concluído para retornar ao console ou toque em Abrir para abrir o template no editor.

Interface do usuário do editor de modelos

Ao abrir um modelo para edição, você pode ver os seguintes componentes do Editor de AEM:

  • Barra de ferramentas da página
    Contém as seguintes opções:

    • Alternar painel lateral: Permite mostrar ou ocultar a barra lateral.
    • Informações da página: Permite que você especifique informações como o tempo de publicação/cancelamento de publicação, miniaturas, bibliotecas do lado do cliente, política de página e biblioteca do lado do cliente de design de página.
    • Seletor de modo: Permite alterar o modo.
      Você pode escolher Estrutura modo, Conteúdo inicial, Controle de layout modo. O modo Estrutura permite adicionar e personalizar o cabeçalho e o rodapé. O modo Conteúdo inicial permite personalizar o conteúdo do formulário.
    • Visualizar: Permite que você visualize a aparência do modelo ao publicá-lo. Você pode usar o Seletor de camada e a Visualização para alternar os modos de edição e visualização.
  • Barra lateral: Fornece os navegadores de Conteúdo, Propriedades, Ativos e Componentes.

  • Barra de ferramentas do componente: Ao selecionar um componente, você verá uma barra de ferramentas que permite personalizar o componente.

  • Página: A área onde você adiciona conteúdo para criar o modelo.

Edição de um modelo

Um modelo de Formulário adaptável é criado usando duas camadas:

  • Estrutura
  • Conteúdo inicial

O seletor de camada está disponível ao lado da opção Visualização no canto superior direito da tela.

Estrutura

Ao selecionar a camada de estrutura no Editor de modelo, é possível ver os contêineres de layout acima e abaixo do Contêiner de formulário adaptável. Os autores podem usar esses contêineres de layout para cabeçalho e rodapé. Você pode adicionar, editar ou personalizar o cabeçalho e o rodapé. Arraste e solte o componente Cabeçalho do formulário adaptável no contêiner de layout acima do Contêiner do formulário adaptável para personalizar o cabeçalho do modelo. Arraste e solte o componente Rodapé do formulário adaptável no contêiner de layout abaixo do Contêiner de formulário adaptável para personalizar o rodapé do modelo.

Contêiner de layout na camada de estrutura

Contêineres de layout na camada de estrutura

A. Contêiner de layout para o componente Cabeçalho B. Contêiner de layout para o componente Rodapé

Arraste e solte o componente Cabeçalho do formulário adaptável no contêiner de layout acima do Contêiner do formulário adaptável. Após adicionar o componente, é possível especificar suas propriedades que permitem adicionar um logotipo e fornecer seu título.

Da mesma forma, ao arrastar e soltar o componente de rodapé no contêiner de layout abaixo do Contêiner de formulário adaptável, é possível fornecer as informações de direitos autorais e os detalhes da empresa.

Cabeçalho e rodapé adicionados na camada Estrutura

Cabeçalho e rodapé adicionados na camada Estrutura

Bloquear/desbloquear componentes na camada de estrutura

Ao editar o modelo com a camada de estrutura selecionada, é possível desbloquear o cabeçalho e o rodapé do modelo. Se um componente estiver desbloqueado no modelo, os autores de formulário poderão editar o componente no Formulário adaptável que usa o modelo. Bloquear um componente impede que os autores de formulários o editem no Formulário adaptável. A opção Bloquear está disponível na barra de ferramentas do componente.

Por exemplo, você adiciona o componente de cabeçalho no modelo. Ao selecionar o componente, você pode ver uma opção de bloqueio na barra de ferramentas do componente. Normalmente, o cabeçalho inclui o nome e o logotipo da empresa e você não deseja que os autores de formulários alterem o logotipo e o cabeçalho em um modelo. Em um formulário adaptável criado usando o modelo com o componente de cabeçalho bloqueado, os autores de formulário não podem alterar o logotipo e o nome da empresa.

OBSERVAÇÃO

Bloquear ou desbloquear imagem ou logotipo no componente de cabeçalho, individualmente, não é recomendado. Você pode desbloquear o componente de cabeçalho.

Conteúdo inicial

Quando a opção Conteúdo inicial é selecionada, o Contêiner de formulário adaptável do modelo é aberto como um Formulário adaptável para edição. Assim como a criação de um formulário adaptável, você pode especificar as configurações iniciais, como selecionar um tema e enviar ações.

Os autores de formulários o usam como base para criar um formulário. A estrutura do fluxo de conteúdo é especificada na camada Conteúdo inicial do modelo. Para alternar para a edição do conteúdo inicial do modelo de formulário, antes de Visualizar na barra de ferramentas da página, toque em lista suspensa de tela > Conteúdo inicial.

Na camada Conteúdo inicial , crie o modelo de Formulário adaptável usado pelos autores como base. A criação de um modelo é semelhante à criação de um formulário. Você usa as opções disponíveis na Barra lateral. A barra lateral fornece navegadores de conteúdo, propriedades, ativos e componentes.

OBSERVAÇÃO

Ao selecionar Armazenar conteúdo ou Armazenar PDF como a Ação de envio, você obtém uma opção para especificar o Caminho de armazenamento. Se você especificar o caminho no modelo, todos os formulários criados a partir dele terão o mesmo caminho. Você pode especificar o caminho de armazenamento correto ou garantir que os autores de formulários o atualizem para impedir que os dados de cada formulário sejam armazenados no mesmo local.

Criação de um modelo de formulário adaptável com guias e painéis

Por exemplo, você deseja criar um modelo com as seguintes guias:

  • Informações gerais
  • Informações profissionais

Você adicionou um logotipo, forneceu um título e adicionou um rodapé na camada da estrutura. Bloqueie o cabeçalho e o rodapé para impedir que os autores de formulários os editem quando usam o modelo para criar formulários.

Altere a camada de Estrutura para Conteúdo inicial e comece a adicionar conteúdo ao formulário. Para criar uma estrutura com guias, adicione um Painel filho no guia Painel raiz do contêiner de Formulário adaptável. Para adicionar um painel:

  • Você pode adicionar um painel tocando no botão + ao selecionar o botão Arraste componentes aqui opção.

  • Você pode arrastar e soltar o componente do painel do navegador de componentes na barra lateral.

  • Você pode adicionar o painel filho da guideRootPanel na barra de ferramentas do componente.

Para criar as guias Informações gerais e Informações profissionais , adicione dois painéis no painel filho da guideRootPanel. Selecione os painéis e toque em cmppr para abrir as propriedades na barra lateral. Altere os nomes dos elementos como general-info e professional-infoe títulos como Informações gerais e Informações profissionais, respectivamente. Na barra lateral, toque em conteúdo para abrir o navegador de conteúdo. Na guia Objetos de formulário , selecione guideRootPanel. No editor, o guideRootPanel é selecionado. Toque cmppr na barra de ferramentas do componente para abrir suas propriedades. No campo Layout do painel , selecione Guias em cima e tocar Concluído. A estrutura do modelo com guias é aplicada.

Adição de conteúdo em guias

Depois de adicionar painéis e estruturá-los como guias, é possível adicionar campos dentro das guias. Ao selecionar uma guia no editor, é possível ver a variável Arraste componentes aqui opção. Você pode arrastar e soltar componentes como caixas de texto, itens de lista e botões. Você pode arrastar e soltar componentes do navegador de componentes na barra lateral.

Cada componente tem propriedades que aprimoram a captura e a manipulação de dados. Por exemplo, é possível ativar a variável Campo obrigatório de um componente. Seus autores podem especificar uma mensagem que seus clientes veem ao ignorar o preenchimento de um campo obrigatório. Especifique a mensagem em Mensagem de campo necessária propriedade.

No modelo de exemplo, os campos Nome, Número de telefone e Data de nascimento são adicionados na guia Informações gerais . Na guia Informações profissionais , são adicionados o tipo de emprego atualmente empregado, os campos de qualificação educacional .

Depois de adicionar campos, é possível adicionar botões, como Enviar e Redefinir.

Ativação do template

Ao criar um modelo, ele é adicionado como rascunho. Ative o modelo para usá-lo na criação do Adaptive Forms. Para ativar um template:

  1. Navegar para Adobe Experience Manager > Ferramentas > Modelos e abra a pasta na qual você criou o template.

  2. O modelo criado é marcado como Rascunho.

  3. Selecione o modelo e toque em Habilitar na barra de ferramentas.
    Ao criar um formulário adaptável, você pode ver o modelo listado quando for solicitado a escolher um modelo.

Importação ou exportação de um template

Um formulário funciona com seu modelo. Quando você faz o download de um formulário adaptável criado usando um modelo personalizado, o modelo não é baixado. Ao importar o formulário em um AEM Forms , ele é importado sem seu template. Se um formulário for importado, mas seu modelo não estiver disponível, o formulário não será renderizado. Você pode empacotar o modelo personalizado de /conf nó no https://<server>:<port>/crx/packmgre importe-o no AEM Forms instância em que deseja fazer upload do formulário. Você também pode Crie um modelo usando o AEM Arqueype e implante-o na sua instância do Cloud Services.

OBSERVAÇÃO
  • Você pode associar um Esquema do modelo de dados de formulário para um modelo de Formulário adaptável em um editor de modelos. Consulte Criação de um formulário adaptável para obter mais informações.
  • Você também pode configurar o Documento de registro diretamente do editor de formulário adaptável ou do editor de modelo de formulário adaptável. Para obter mais informações, consulte Gerar documento de registro para Forms adaptável.

Criação de um formulário adaptável usando o modelo

Depois de criar e ativar um modelo, ele estará disponível no gerenciador de formulários ao criar um Formulário adaptável. Para usar um modelo e criar um formulário adaptável, consulte Criação de um formulário adaptável.

Recomendações

  • Ao modificar as propriedades do formulário no editor de modelo, não use a propriedade BindReference.
  • Se quiser adicionar um ponto de interrupção, crie-o ao criar um modelo de Formulário adaptável.
    Para obter mais informações sobre pontos de interrupção, consulte Layout responsivo.

Nesta página