Compartilhar via


Tutorial: Adicionar um formulário de várias etapas à sua página

Os formulários de várias etapas são uma maneira poderosa de coletar entradas de usuários em várias etapas. As informações coletadas são armazenadas ou atualizadas no Microsoft Dataverse. Aqui estão os recursos disponíveis no formulário de várias etapas em comparação com os formulários comuns:

  • Permitem que a coleta de dados ou o processo de atualização seja dividido em várias etapas.
  • Fornece condições que alteram dinamicamente o fluxo das etapas com base nas entradas do usuário.
  • O acompanhamento de sessão permite que um usuário retome de onde parou ao seguir um processo de atualização de dados.

Assista a este vídeo (sem áudio) para ver um exemplo de formulário de várias etapas em uma página:

Neste tutorial, você aprenderá a:

  • Criar tabelas, exibições e formulários do Dataverse para usar em seu formulário de várias etapas
  • Adicionar um formulário de várias etapas a uma página da Web
  • Configurar permissões de tabela para formulários de várias etapas
  • Adicionar uma condição e redirecionar a etapa para um formulário de várias etapas

Pré-requisitos

Nota

Ao criar um formulário de várias etapas, é importante planejar as etapas primeiro. Isso facilitará o processo de configuração. Estabeleça as etapas individuais e quaisquer ramificações condicionais para o processo de várias etapas.

Criar um formulário de várias etapas

Nas etapas abaixo, criaremos um formulário de várias etapas. Este exemplo segue um processo simples para solicitar uma bolsa de estudos, mas você pode aplicar os conceitos a outros processos empresariais.

Veja um esboço das etapas de amostra:

Etapa Descrição
1 Selecione a bolsa para se candidatar e digite o nome do candidato.
2 Preencha os dados do candidato.
3 Reúna mais alguns detalhes. Posteriormente no tutorial, faremos essa etapa condicional com base nas informações da etapa 2.
4 Colete o consentimento final de saída do serviço do usuário.

Criar tabelas e formulários do Dataverse para usar no formulário de várias etapas

O vídeo a seguir mostra como criar formulários para usar no processo de formulário de várias etapas.

Precisamos armazenar nossas informações de nosso processo nas tabelas do Microsoft Dataverse.

Para cada etapa do processo que exige que um usuário crie ou atualize colunas em um registro do Dataverse, você precisará ter um formulário do Dataverse correspondente.

Em nosso exemplo, criaremos uma tabela do Dataverse chamada Candidaturas para nosso processo. Para obter mais informações sobre como criar tabelas do Dataverse, consulte Como criar e modificar tabelas do Dataverse usando o espaço de trabalho Dados

  1. Vá para Power Pages.

  2. Selecione um site onde você deseja adicionar um formulário de várias etapas e selecione Editar.

  3. No estúdio de design, selecione o espaço de trabalho Dados.

  4. Crie uma tabela do Dataverse chamada Candidaturas com as seguintes propriedades:

    Dica

    • A tabela a seguir é apenas um exemplo; sinta-se à vontade para criar tabelas que correspondam aos seus próprios processos de negócios.
    Nome da coluna Tipo de dados da coluna
    Nome do candidato Texto (renomear a colunanome)
    Bolsa Escolha (exemplos de opções: Bolsa de arquitetura americana,Bolsa de língua estrangeira,Mulheres na bolsa STEM,Bolsa para futuros líderes de design)
    Nível de classe Escolha (opções: Júnior, Sênior)
    Consentimento Sim/Não
    Custo da mensalidade Moeda
    Tipo de grau universitário Escolha (opções: Mestrado, Bacharelado )
    Tempo integral Sim/Não
    Principal Texto
    Outras bolsas Várias linhas de texto

    Criando uma tabela para usar com formulários de várias etapas no espaço de trabalho Dados.

  5. Depois de criar as tabelas, você precisará criar formulários para cada etapa do seu processo.

    Dica

    Crie os quatro formulários a seguir e organize as colunas no formulário. À medida que cada formulário é criado, selecione Publicar formulário.

    Nome do formulário Colunas no formulário
    Etapa 1 da candidatura Bolsa de estudos, nome do candidato
    Etapa 2 da candidatura Bolsa de estudos (somente leitura), nome do candidato (somente leitura), tipo de graduação, especialização, período integral, nível de classe, Stem
    Etapa 3 da candidatura Bolsa de estudos (somente leitura), nome do candidato (somente leitura), custo da mensalidade, outras bolsas de estudo
    Etapa 4 da candidatura Bolsa de estudos (somente leitura), nome do candidato (somente leitura), consentimento

    Criando formulários com formulários de várias etapas no espaço de trabalho Dados.

  6. Agora você deve ter uma série de formulários para usar em seu processo de várias etapas.

    Uma lista de formulários no espaço de trabalho Dados.

Adicionar um componente de formulário de várias etapas a uma página

Agora que temos nossa tabela e formulários, podemos criar um formulário de várias etapas em uma página da Web.

Este vídeo mostra como criar um formulário de várias etapas em uma página.

  1. Vá para o espaço de trabalho Páginas e adicione uma nova página ou edite uma página existente. Para obter mais informações sobre como criar páginas da Web, consulte Criar e desenvolver páginas.

  2. Adicione uma nova seção e selecione o componente Formulário de várias etapas.

    Se existirem outros formulários de várias etapas em seu site, você terá a opção de adicioná-los à sua página. Em nosso exemplo, criaremos um novo formulário de várias etapas para nosso tutorial, selecione + Novo formulário de várias etapas na caixa de diálogo.

  3. Você verá a janela Adicionar um formulário de várias etapas. Insira uma Candidatura (ou outro nome) para o Nome do formulário. Selecione OK.

  4. Não haverá etapas no formulário. Selecione + Adicionar a primeira etapa para adicionar a primeira etapa.

    Um formulário de várias etapas em branco adicionado a uma página da Web.

  5. Na janela Adicionar etapa, insira os seguintes valores na configuração:

    • No campo Nome da etapa, insira Etapa 1 da candidatura.
    • No campo Escolha uma tabela, selecione Candidatura (ou o que você nomeou sua tabela).
    • No campo Selecionar um formulário, selecione Etapa 1 da candidatura.
  6. Escolha a guia lateral Mais opções e observe que a opção Dados deste formulário: é definida automaticamente como Criar um novo registro. Em nosso exemplo da primeira etapa, criaremos um novo registro na tabela do Dataverse. Observe que nas etapas subsequentes modificaremos o registro criado na primeira etapa e esta opção será diferente.

  7. Selecione OK.

  8. Começaremos a adicionar mais etapas. No menu, selecione + Adicionar etapa.

  9. Na janela Adicionar etapa, insira os seguintes valores para a segunda etapa:

    • No campo Nome da etapa, insira Etapa 2 da candidatura.
    • No campo Escolha uma tabela, a tabela Candidatura (ou o nome que você deu à sua tabela) já deve estar selecionado.
    • No campo Selecionar um formulário, selecione Etapa 2 da candidatura.
  10. Escolha a guia lateral Mais opções e observe que a opção Dados deste formulário: é definida automaticamente como Atualizar um registro existente. Em nosso exemplo, a segunda etapa continua adicionando detalhes ao registro do Dataverse criado na primeira etapa.

    Nota

    Dependendo de seus processos exclusivos, você pode criar ou atualizar diferentes registros do Dataverse em diferentes etapas do processo.

  11. Selecione OK

  12. Continue a adicionar as duas etapas restantes como etapas de atualização, Etapa 3 da candidatura e Etapa 4 da candidatura seguindo as instruções acima.

    Adicionando etapas ao formulário de várias etapas.

Editar propriedades do campo

Você pode modificar algumas das propriedades de campo em seu formulário de várias etapas no estúdio de design. Vamos tornar um campo obrigatório, atualizar o rótulo e adicionar uma descrição.

  1. Selecione um campo no componente de formulário de várias etapas na página.

  2. Selecione Editar campo.

  3. Na janela Editar campo, altere o Rótulo de campo para outro valor. Selecione Tornar este campo obrigatório e selecione Mostrar uma descrição. Digite algumas instruções no campo Descrição.

    Editando propriedades do campo.

  4. Selecione OK.

Adicionar permissão de tabela

Por padrão, os visitantes do site não poderão acessar o formulário de várias etapas. Em nosso exemplo, queremos apenas permitir que usuários autenticados preencham o formulário de várias etapas. Você pode usar uma combinação de funções da Web e permissões de tabela para configurar ações de criação, leitura e atualização de dados para seu próprio processo de várias etapas.

Este vídeo mostra como configurar permissões de tabela para formulários de várias etapas.

Para novos formulários, um banner aparecerá solicitando que você adicione permissões.

Se você já configurou permissões para a tabela usada em seu formulário de várias etapas, pode selecionar a elipse (...) e escolher Permissões.

  1. Selecione + Nova permissão.

  2. A permissão da tabela recebe um nome, a tabela selecionada e o Tipo de acesso definido como Acesso global por padrão. As permissões Gravar e Criar serão selecionadas para que os visitantes do site possam usar o formulário.

  3. Selecione + Adicionar funções e depois Usuários Autenticados como a função padrão.

    Adicionando permissões de tabela à tabela de aplicativos.

  4. Selecione Salvar.

Teste do formulário de várias etapas

Nesse ponto, você pode experimentar seu formulário de várias etapas.

  1. Selecione Visualizar, seguido por Área de Trabalho.

  2. Quando a página inicial aparecer, selecione Entrar e entre com um usuário do site. Consulte Fornecer acesso a públicos-alvo externos para obter mais informações.

  3. Selecione a página onde você colocou seu componente de formulário de várias etapas.

  4. Experimente o processo como usuário e siga as etapas.

  5. Se você encontrar algum problema, revise a configuração no estúdio de design e revise cada etapa.

  6. Depois de enviar o formulário com sucesso, retorne ao estúdio de design.

  7. Selecione Data e depois a tabela Candidatura (ou qualquer nome que você tenha dado à sua tabela) e confirme se você pode ver que os registros foram criados usando o processo de formulário de várias etapas.

Adicionar uma etapa condicional ao seu formulário de várias etapas

Se precisar adicionar lógica condicional ao seu formulário de várias etapas, primeiro você precisa identificar a condição visualizando o nome lógico da coluna do Dataverse e a avaliação que deseja executar. O nome lógico de uma coluna pode ser encontrado ao exibir a configuração da coluna no espaço de trabalho Dados.

No nosso exemplo abaixo, verificaremos se um candidato está cursando um mestrado. Se um usuário estiver cursando um nível superior, ele será direcionado para etapas extras. Os demais candidatos podem pular essa etapa. Sinta-se à vontade para adicionar uma condição com base em seus próprios processos empresariais.

Vamos avaliar se o campo Tipo de grau universitário tem o valor Bacharel ou Mestre, representado pelo nome lógico do campo craxx_degreetype e os valores de escolha (Mestre = "124860001").

As etapas condicionais são configuradas no Aplicativo de Gerenciamento do Portal.

  1. No estúdio de design, no formulário de várias etapas, selecione o menu suspenso listando todas as etapas do formulário de várias etapas, escolha o link Aplicativo de Gerenciamento de Portal.

    Inicie o aplicativo de Gerenciamento do Portal.

  2. Você deve estar no Aplicativo de Gerenciamento do Portal no registro de metadados para seu formulário de várias etapas. Selecione a guia Etapas do Formulário.

  3. Selecione + Nova etapa do formulário.

  4. Dê um nome à etapa (por exemplo, Verificar o tipo de grau universitário).

  5. Especifique as configurações.

    • Defina Tipo como Condição.
    • Selecione a tabela Candidatura no menu suspenso Nome da Tabela de Destino. Defina as configurações para uma etapa de formulário de várias etapas de condição de tipo.
  6. Selecione a guia Condição e insira a condição usando o nome lógico da coluna e um valor. Em nosso exemplo, faremos algo semelhante a craxx_degreetype == 124860001 (você precisa especificar seu nome lógico e valor de seu próprio ambiente).

    Campo de entrada de texto para uma condição em uma etapa de vários formulários.

  7. Precisamos configurar o processo para ir para uma etapa se a condição não for atendida. Selecione Etapa 4 da candidatura no campo Próxima Etapa se Houver Falha na Condição.

  8. Agora precisamos configurar o processo para seguir uma etapa específica se a condição for atendida. Selecione a guia Geral.

  9. No campo Próxima etapa, selecione Etapa 3 da candidatura.

  10. Selecione Salvar e Fechar

  11. Agora você deve ver sua etapa condicional na lista de etapas. Precisamos ter certeza de que nosso usuário alcançará a etapa condicional após concluir a segunda etapa. Selecione Etapa 2 da candidatura e Editar.

  12. No campo Próxima etapa, altere o valor de Etapa 3 da candidatura para Verificar o tipo de grau universitário.

  13. Selecione a guia Definição de Formulário no campo Tipo de Fonte, selecione Resultado da Etapa Anterior e, no campo Etapa da Origem da Entidade, selecione Etapa 1 da candidatura.

  14. Selecione Salvar e Fechar.

Adicionar uma etapa de redirecionamento ao seu formulário de várias etapas

Também adicionaremos uma etapa de redirecionamento no final do processo para levar o usuário de volta à página inicial.

  1. Selecione + Nova etapa do formulário e preencha a seguinte configuração:

    • Defina o Nome como Acessar a home page*
    • Defina o Tipo como Redirecionar
  2. Selecione a guia Redirecionar.

  3. No campo ou Página da Web, selecione a home page.

  4. Selecione Salvar e Fechar.

  5. Agora você deve ver sua etapa de redirecionamento na lista de etapas. Precisamos ter certeza de que nosso usuário chegará à etapa de redirecionamento após concluir a última etapa do processo. Selecione Etapa 4 da candidatura e Editar.

  6. No campo Próxima etapa, selecione Acessar a home page.

  7. Selecione a guia Definição de Formulário no campo Tipo de Fonte, selecione Resultado da Etapa Anterior e, no campo Etapa da Origem da Entidade, selecione Etapa 2 da candidatura.

    Dica

    Escolhemos uma etapa anterior no processo (etapa 2 do aplicativo), pois os usuários chegarão a essa etapa a partir da segunda ou da terceira etapa, dependendo da condição. Queremos escolher uma etapa comum com a qual todos os usuários tenham interagido.

  8. Selecione Salvar e Fechar.

  9. Retorne ao estúdio de design e selecione o botão Sincronizar.

  10. Você deve ter um formulário completo de várias etapas com etapas, condições e um redirecionamento.

    Etapa de vários formulários concluída.

  11. Selecione Visualizar, seguido por Área de Trabalho.

  12. Quando a página inicial aparecer, selecione Entrar e entre com um usuário do site.

  13. Selecione a página onde você colocou seu componente de formulário de várias etapas.

  14. Tente várias combinações do processo para ver como funciona o formulário de várias etapas.

Consulte Também