Criar um modelo de formulário adaptável

Ao criar um formulário, você adiciona campos e componentes para definir a estrutura do formulário, o conteúdo e as ações no editor. Adicione campos e componentes na guideRootPanel do contêiner de formulário. Com o Editor de modelos, você pode criar um modelo que contenha estrutura básica e conteúdo inicial que os autores possam 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 de envio em um formulário de inscrição. Você pode 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 da estrutura.
• Forneça o conteúdo inicial para o formulário.
• Especifique um tema, Enviar ações.

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

Trabalhar com modelos

É possível acessar o editor de modelos no menu Ferramentas navegando até Adobe Experience Manager > Ferramentas > Geral > Modelos. Aqui, os modelos são organizados em pastas ativadas para modelos editáveis.

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

Criação de um modelo

Após criar uma pasta, abra-a e execute as seguintes etapas para criar um template:

1. Toque Criar dentro da pasta que você criou.

2. Na seção Escolher um tipo de modelo, selecione Modelo de formulário adaptável e toque em Próxima.

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

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

Interface 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:

  • Ativar/desativar painel lateral: permite mostrar ou ocultar a barra lateral.
  • Informações da página: permite especificar informações como tempo de publicação/cancelamento de publicação, miniaturas, bibliotecas do lado do cliente, política da página e biblioteca do lado do cliente de design da 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 visualizar a aparência do modelo ao publicá-lo. Você pode usar o Seletor de camada e a Visualização para alternar entre 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ê vê uma barra de ferramentas que permite personalizar o componente.

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

Edição de um modelo

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

• Estrutura
• Conteúdo inicial

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

Estrutura

Ao selecionar a camada de estrutura no Editor de modelo, você pode ver os contêineres de layout acima e abaixo do Contêiner de formulário adaptável. Os autores podem usar esses containers de layout para cabeçalho e rodapé. É possível 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 de 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êineres de layout na camada da estrutura

A. Contêiner de layout do componente de cabeçalho B. Contêiner de layout do componente de rodapé

Arraste e solte o componente Cabeçalho do formulário adaptável no contêiner de layout acima do Contêiner de 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, você pode fornecer as informações de direitos autorais e os detalhes da empresa.

Cabeçalho e rodapé adicionados à camada Estrutura

Bloquear/desbloquear componentes na camada da 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 do formulário poderão editar o componente no Formulário adaptável que usa o modelo. Bloquear um componente impede que os autores do formulário 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 da empresa e o logotipo, e você não deseja que os autores de formulário 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.

Conteúdo inicial

Quando a opção Conteúdo inicial estiver selecionada, o Contêiner de formulário adaptável do modelo será aberto como um Formulário adaptável para edição. Assim como a criação de um Formulário adaptável, você pode especificar 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 > Conteúdo inicial.

Na camada Conteúdo inicial, crie o modelo de Formulário adaptável que seus autores usam como base. A criação de um modelo é semelhante à criação de um formulário. As opções disponíveis na Barra lateral são usadas. A barra lateral fornece conteúdo, propriedades, ativos e componentes nos navegadores.

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 dos formulários o editem quando usarem 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 guideRootPanel do contêiner de Formulário adaptável. Para adicionar um painel:

• Você pode adicionar um painel tocando no + ao selecionar a variável Arraste os componentes para cá opção.

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

• É possível adicionar um painel filho de guideRootPanel na barra de ferramentas do componente.

Para criar as guias Informações gerais e Informações profissionais, adicione dois painéis no painel secundário do guideRootPanel. Selecione os painéis e toque em para abrir as propriedades na barra lateral. Alterar 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 na barra de ferramentas do componente para abrir suas propriedades. No campo Layout do painel, selecione Guias na parte superior e toque em 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, você pode ver as Arraste os componentes para cá 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 habilitar a variável Campo obrigatório propriedade de um componente. Os autores podem especificar uma mensagem que os clientes veem quando ignoram o preenchimento de um campo obrigatório. Especificar a mensagem em Mensagem de campo obrigatório propriedade.

No modelo de exemplo, os campos Name, Phone number e Date of birth são adicionados na guia General Information. Na guia Informações Profissionais, Atualmente empregado, são adicionados os campos Tipo de emprego, Qualificação educacional.

Após adicionar campos, é possível adicionar botões como Enviar e Redefinir.

Habilitação do modelo

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

1. Navegue até Adobe Experience Manager > Ferramentas > Modelos e abra a pasta na qual você criou o template.

2. O modelo criado está marcado como Rascunho.

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

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

Um formulário funciona com seu modelo. Ao baixar um Formulário adaptável criado usando um modelo personalizado, o modelo não é baixado. Ao importar o formulário para um AEM Forms instância, ela é importada sem seu template. Se um formulário for importado, mas seu template não estiver disponível, o formulário não será renderizado. É possível empacotar o modelo personalizado de /conf nó em https://<server>:<port>/crx/packmgre conecte-o à porta no AEM Forms instância na qual você deseja carregar o formulário. Também é possível Crie um modelo usando o Arquétipo AEM e implante-o na instância do Cloud Services.

Associar um esquema do modelo de dados de formulário a um modelo

Os autores podem associar um Esquema do modelo de dados de formulário para um modelo de Formulário adaptável no editor de modelos. Ele permite que os autores selecionem um esquema no editor de modelos. Quando você associa um esquema a um modelo e um autor de formulário cria um formulário com base no modelo, o esquema é pré-selecionado para o formulário. Ele ajuda os autores de formulários a regular o uso do esquema e também economiza tempo para o autor de formulários. Para selecionar um esquema de modelo de dados de formulário no editor de modelo:

1. Toque Navegador de conteúdo localizado no lado esquerdo.
2. Ir para o contêiner de formulário Configuração.
3. Selecionar Modelo de dados.
4. Escolher o modelo de dados do formulário por meio de Selecionar modelo de dados do formulário e salve a configuração.

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

Depois de criar e ativar um modelo, ele fica disponível no gerenciador de formulários quando você cria 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.

Salvar um formulário adaptável como modelo

Você também pode salvar um Formulário adaptável como um modelo para uso futuro. Para salvar um formulário adaptável como modelo:

1. Selecione um formulário adaptável para salvá-lo como modelo.

2. Clique em Salvar como modelo. Uma caixa de diálogo é exibida.

3. Especificar Título (campo obrigatório), Localização (campo obrigatório) e Descrição (campo opcional) para o modelo.

4. Clique em Criar.

   

Recomendações

• Ao modificar as propriedades do formulário no editor de modelo, não use a propriedade BindReference.
• Caso queira 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.

Recursos do Business.Adobe.com