Mostrar estágios do fluxo de tela em um exemplo de indicador de progresso
Este exemplo cria um estágio do indicador de progresso personalizado que conduz os usuários por um processo de várias etapas. Ao criar estágios claros e atribuí-los a elementos de tela, você pode aprimorar a experiência do usuário e garantir que os usuários entendam seu progresso e as próximas etapas.
Edições obrigatórias
Consulte também:
Planejar os estágios no fluxo
- Determine quantos estágios criar. Você deseja que cada tela seja exibida como uma etapa diferente. Você tem quatro telas, portanto, crie quatro estágios.
- Determine o que você deseja chamar de estágios, pois seus rótulos são mostrados no indicador de progresso. Você decide rotular os estágios como as telas: Informações de contato, Informações do pedido, Detalhes de cobrança e Confirmação do pedido.
- Determine a ordem dos estágios. Você quer que o cliente insira suas informações de contato, as informações do pedido, os detalhes de cobrança e mostre a confirmação no final. Esta é a ordem de estágios: Estágio 1: Informações de contato, Estágio 2: Informações do pedido, Estágio 3: Detalhes de faturamento, Estágio 4: Confirmação do pedido.
- Determine quais estágios você deseja mostrar no indicador de progresso quando o fluxo começa. Você deseja que todos os estágios sejam exibidos no indicador de progresso durante todo o tempo em que o fluxo está sendo executado. Assim, todos os estágios devem ser definidos como ativos por padrão.
Para obter mais informações, consulte Planejando os estágios do seu fluxo.
Criar os estágios de fluxo
- No fluxo de tela no Flow Builder, abra a Caixa de ferramentas.
- Clique em Novo recurso.
- Em Tipo de recurso, selecione Estágio.
- Em Rótulo, insira Informações de contato.
- Para Nome da API, insira Contact_Info_Stage.
-
Para Ordem, insira 10.
Se for possível que os estágios sejam adicionados no futuro, use números de pedido com números entre eles para que você não precise reordenar todos os estágios se adicionar um novo estágio. Por exemplo, 10, 20, 30, 40, em vez de 1, 2, 3, 4.
- Selecione Ativo por padrão.
- Clique em Concluído.
- Conclua as etapas 1 a 7 para os próximos três estágios para que os recursos do estágio sejam configurados assim:
| Rótulo | Nome da API | Pedido | Ativo por padrão |
|---|---|---|---|
| Informações do contato | Contact_Info_Stage | 10 | Selecionado |
| Informações do pedido | Order_Info_Stage | 20 | Selecionado |
| Detalhes de cobrança | Billing_Details_Stage | 30 | Selecionado |
| Confirmação do pedido | Order_Confirmation_Stage | 40 | Selecionado |
Para obter mais informações, consulte Criar estágios de fluxo.
Atribuir estágios a elementos de tela
Atribua um estágio a cada elemento de tela para que o estágio correto seja destacado no indicador de progresso quando o usuário em execução chegar a cada tela.
- No fluxo de tela no Flow Builder, abra o elemento de tela Informações do contato.
- Clique no cabeçalho do elemento da tela para mostrar as propriedades da tela.
- Para Estágio, selecione Informações de contato (nome da API: Contact_Info_Stage
- Clique em Concluído.
- Conclua as etapas 1 a 3 para os próximos três elementos de tela para que os estágios sejam atribuídos a esses elementos de tela.
| Rótulo do elemento de tela | Rótulo do estágio | Nome da API do estágio |
|---|---|---|
| Informações do contato | Informações do contato | Contact_Info_stage |
| Informações do pedido | Informações do pedido | Order_Info_Stage |
| Detalhes de cobrança | Detalhes de cobrança | Billing_Details_Stage |
| Confirmação do pedido | Confirmação do pedido | Order_Confirmation_Stage |
Para obter mais informações, consulte Mostrar estágios em um indicador de progresso.
O indicador de progresso está configurado e pronto para orientar seus usuários pelo processo de pedido.
