Criar um formulário adaptável headless usando o editor adaptável do Forms create-a-headless-adaptive-form-using-adaptive-forms-editor

O AEM Forms as a Cloud Service oferece um editor simples para criar Forms adaptável headless. Com mais de 24 componentes principais disponíveis, você pode criar facilmente um formulário arrastando e soltando componentes no editor. Além disso, o editor de regras permite adicionar validações aos campos de formulário.

NOTE
Se você é novo no Headless Adaptive Forms, a Adobe recomenda examinar o tutorial Criar e publicar um formulário headless usando o kit de início para saber as noções básicas e criar um formulário adaptável headless antes de usar o editor Adaptive Forms para formulários headless.

Execute as seguintes etapas para criar um formulário adaptável headless usando o editor adaptável do Forms:

Antes de começar:

Você precisa do seguinte para criar um Formulário adaptável usando o editor Forms adaptável:

Para AEM 6.5 Forms:

  • Acesso a uma instância de autor do Forms AEM 6.5.16.0 ou posterior.

  • Componentes principais dos formulários adaptáveis

  • Modelo dos Componentes principais do Forms adaptável

  • Um tema de formulário adaptável para o modelo baseado em Componentes principais

  • Adicione seus usuários ao grupo forms-users. Os membros do grupo forms-users têm permissões para criar um Formulário adaptável.

Para AEM Forms as a Cloud Service:

  • Acesso a uma instância do as a Cloud Service do AEM Forms ou a um ambiente as a Cloud Service do AEM Forms local.

  • Um modelo de formulário adaptável: um modelo fornece uma estrutura básica e define a aparência (layouts e estilos) de um formulário adaptável. Ele tem componentes pré-formatados que contêm determinadas propriedades e estrutura de conteúdo. Também fornece as opções para definir um tema e uma ação de envio. O tema define a aparência, e a ação de envio define a ação a ser executada no envio de um formulário adaptável. Por exemplo, enviar os dados coletados para uma fonte de dados. O serviço de nuvem fornece um modelo OOTB, chamado de em branco:

  • Um tema de formulários adaptáveis: um tema contém detalhes de estilo para os componentes e painéis. Os estilos incluem propriedades como cores de fundo, cores de estado, transparência, alinhamento e tamanho. Ao aplicar um tema, o estilo especificado é refletido nos componentes correspondentes. O modelo Canvas está incluído em todos os novos programas do AEM Forms as a Cloud Service.

  • Permissões: adicionar usuários ao grupo forms-users. Os membros do grupo forms-users tem permissões para criar formulários adaptáveis. Para obter uma lista detalhada de grupos de usuários específicos de formulários, consulte Grupos e permissões.

Criação de um Formulário adaptável create-an-adaptive-form-components

  1. Faça logon na sua instância de Autor do Experience Manager Forms.

  2. Insira suas credenciais na página de logon do Experience Manager. Após fazer logon, e no canto superior esquerdo, toque em Adobe Experience Manager > Forms > Formulários e documentos.

  3. Toque em Criar > Formulários adaptáveis. O Assistente será aberto. Na guia Origem, selecione um modelo:

    Modelo

    Ao selecionar um modelo, o tema e a ação de envio especificados no modelo são selecionados automaticamente e o botão Criar será habilitado. Você pode ir para as guias Estilo ou Envio para selecionar um tema ou uma ação de envio diferente. Se o modelo selecionado não especificar um tema, o botão criar permanecerá desabilitado. É possível ir para a guia Estilos para selecionar um tema manualmente.

  4. Na guia Estilo, selecione um tema:

    • Quando o modelo selecionado especifica um tema, ele é selecionado automaticamente no assistente. Você também pode escolher um tema diferente da guia de Estilo.

    • Se o modelo selecionado não especificar um tema, será possível usar a guia de Estilo para escolher um tema. O botão Criar só será ativado depois que um tema for selecionado.

  5. (Opcional) Na guia Dados, selecione um modelo de dados:

    • Modelo de dados do formulário: um Modelo de dados do formulário permite integrar entidades e serviços de diferentes fontes de dados a um formulário adaptável. Escolha a opção Modelo de dados de formulário se o formulário adaptável que você está criando envolve a obtenção e gravação de dados de e para várias fontes de dados.

    • Esquema JSON: Esquema JSON O formulário adaptável permite uma integração perfeita com o sistema back-end de sua organização, fornecendo a capacidade de associar um esquema JSON, que representa a estrutura dos dados que estão sendo produzidos ou consumidos. Essa associação permite que os autores adicionem conteúdo dinamicamente ao Formulário adaptável usando os elementos do esquema. Os elementos do esquema são facilmente acessíveis na guia Objetos do modelo de dados do navegador de conteúdo durante o processo de criação e todos os campos são adicionados automaticamente a qualquer formulário adaptável recém-criado.

    Por padrão, todos os campos do esquema JSON associado são selecionados e convertidos automaticamente nos componentes de Formulários adaptáveis correspondentes, simplificando o processo de criação. O assistente oferece a conveniência adicional de permitir a escolha seletiva de quais campos devem ser incluídos no Formulário adaptável usando caixas de seleção.

  6. Na guia Envio, selecione uma ação de envio:

    • Ao selecionar um modelo, a ação de envio especificada no modelo é selecionada automaticamente. É possível selecionar uma ação de envio diferente na guia Envio. A guia Envio exibe todas as ações de envio disponíveis.

    • Quando o modelo selecionado não especificar uma ação de envio, você poderá usar a guia Envio para selecionar uma

  7. (Opcional) Na guia Entrega, é possível especificar uma data de publicação ou cancelamento da publicação para um Formulário adaptável.

  8. Toque em Criar. Uma caixa de diálogo para especificar o título, o nome e o local para salvar o Formulário adaptável será exibida:

    • Título especifica o nome de exibição do formulário. O título ajuda a identificar o formulário na interface do usuário do Experience Manager Forms.
    • Nome: especifica o nome do formulário. Um nó com o nome especificado será criado no repositório. Ao começar a digitar um título, o valor do campo de nome é gerado automaticamente. É possível alterar o valor sugerido. O campo de nome pode incluir apenas caracteres alfanuméricos, hifens e sublinhados. Todas as entradas inválidas são substituídas por um hífen.
    • Caminho: especifica o local no qual o Formulário adaptável deverá ser salvo. É possível salvar o formulário adaptável diretamente em /content/dam/formsanddocuments ou criar uma pasta como /content/dam/formsanddocuments/adaptiveforms para salvar um Formulário adaptável. Certifique-se de criar a pasta antes de usá-la no caminho. O campo Caminho não cria uma pasta automaticamente.
  9. Toque em Criar. Um Formulário adaptável será criado e aberto no editor de Formulários adaptáveis. O editor exibirá o conteúdo disponível no modelo. Com base no tipo de formulário adaptável, os elementos de formulário presentes no esquema JSON associado ou no modelo de dados de formulário são exibidos na guia Objetos do modelo de dados do Navegador de conteúdo na barra lateral. Também é possível arrastar e soltar esses elementos para criar seu formulário adaptável.

Agora, você pode arrastar e soltar os componentes do Adaptive Forms no contêiner do Adaptive Forms para criar o formulário.

Exibir a representação JSON de um formulário adaptável preview-form

Selecione o Formulário adaptável e toque em Visualizar. A pré-visualização do formulário é exibida. Para exibir a definição de formulário (JSON) do formulário, substitua a extensão .html na URL por .model.json

Por exemplo, http://[author-server]:[port]/editor.html/content/forms/af/contact-us.model.json

Você pode usar a API getForm do Forms Adaptive Headless para buscar a definição do formulário (JSON) e usá-la no aplicativo.

Exibir definição de formulário(JSOI)

recommendation-more-help
ce8b2828-9203-402e-a565-7b758c99b2ba