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
- Uma assinatura ou uma avaliação do Power Pages. Baixe uma avaliação do Power Pages aqui.
- Um site do Power Pages criado. Crie um site do Power Pages
- Conclua o tutorial Adicionar e desenvolver uma página.
- Complete o tutorial Exibir dados com segurança em páginas.
- Conclua o tutorial Adicionar um formulário a uma página.
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
Vá para Power Pages.
Selecione um site onde você deseja adicionar um formulário de várias etapas e selecione Editar.
No estúdio de design, selecione o espaço de trabalho Dados.
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 Depois de criar as tabelas, você precisará criar formulários para cada etapa do seu processo.
Dica
- Consulte Como criar e modificar formulários do Dataverse usando o espaço de trabalho Dados sobre como criar formulários do Dataverse.
- Uma boa prática é nomear seus formulários para corresponder a cada etapa do processo de várias etapas.
- Para exibir colunas no formulário, sem permitir que os usuários façam atualizações, configure as colunas para serem somente leitura ao criar os formulários.
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 Agora você deve ter uma série de formulários para usar em seu processo de várias etapas.
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.
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.
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.
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.
Não haverá etapas no formulário. Selecione + Adicionar a primeira etapa para adicionar a primeira etapa.
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.
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.
Selecione OK.
Começaremos a adicionar mais etapas. No menu, selecione + Adicionar etapa.
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.
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.
Selecione OK
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.
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.
Selecione um campo no componente de formulário de várias etapas na página.
Selecione Editar campo.
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.
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.
Selecione + Nova permissão.
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.
Selecione + Adicionar funções e depois Usuários Autenticados como a função padrão.
Selecione Salvar.
Teste do formulário de várias etapas
Nesse ponto, você pode experimentar seu formulário de várias etapas.
Selecione Visualizar, seguido por Área de Trabalho.
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.
Selecione a página onde você colocou seu componente de formulário de várias etapas.
Experimente o processo como usuário e siga as etapas.
Se você encontrar algum problema, revise a configuração no estúdio de design e revise cada etapa.
Depois de enviar o formulário com sucesso, retorne ao estúdio de design.
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.
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.
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.
Selecione + Nova etapa do formulário.
Dê um nome à etapa (por exemplo, Verificar o tipo de grau universitário).
Especifique as configurações.
- Defina Tipo como Condição.
- Selecione a tabela Candidatura no menu suspenso Nome da Tabela de Destino.
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).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.
Agora precisamos configurar o processo para seguir uma etapa específica se a condição for atendida. Selecione a guia Geral.
No campo Próxima etapa, selecione Etapa 3 da candidatura.
Selecione Salvar e Fechar
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.
No campo Próxima etapa, altere o valor de Etapa 3 da candidatura para Verificar o tipo de grau universitário.
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.
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.
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
Selecione a guia Redirecionar.
No campo ou Página da Web, selecione a home page.
Selecione Salvar e Fechar.
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.
No campo Próxima etapa, selecione Acessar a home page.
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.
Selecione Salvar e Fechar.
Retorne ao estúdio de design e selecione o botão Sincronizar.
Você deve ter um formulário completo de várias etapas com etapas, condições e um redirecionamento.
Selecione Visualizar, seguido por Área de Trabalho.
Quando a página inicial aparecer, selecione Entrar e entre com um usuário do site.
Selecione a página onde você colocou seu componente de formulário de várias etapas.
Tente várias combinações do processo para ver como funciona o formulário de várias etapas.