Personalizando o formulário / FormFlow

Olá a todos, na primeira postagem vimos como criar e consumir um formulário.

Introdução ao FormFlow

Agora vamos ver como customizar o formulário para que ele seja mais fácil de entender.

Só para lembrar, o nosso formulário está desse jeito:

Criando perguntas customizadas

A primeira mudança que iremos fazer é deixas as perguntas mais amigáveis. Para isso vamos decorar as propriedades da seguinte maneira:

Quando executarmos o nosso bot as perguntas serão as informadas no Prompt.

Figura 1 — Resultado

Mas opa! reparem que agora os botões sumiram! Deve-se ficar atento para colocar o {||} no final do prompt e informar qual o modo de seleção(quando necessário), com as alterações ficará deste jeito:

Na linha 12 eu coloquei o parâmetro ChoiceFormat = {1} , informa se deve mostrar uma lista numerada({0}) ou uma lista com marcadores({1}). Mas vocês podem perceber pela imagem abaixo que apenas adicionando o {||} o problema foi resolvido.

Figura 2 — Resolvendo problema dos botões sumirem

{&} = Escreve o nome da propriedade no texto

{||} = Aplica o ChoiceFormat de escolha do formulário

Fazendo uma ação ao concluir o formulário

Feito isso vamos tornar a mensagem no método OnCompletion mais pessoal, vamos utilizar os dados respondidos e fazer uma mensagem de conclusão.

Reparem que o parâmetro “estado” nada mais é do que o objeto do nosso formulário, sendo assim é possível acessar os valores de todas as propriedades através dele. A mensagem final ficou da seguinte maneira:

Figura 3 — Resposta do bot

Campos opcionais

Até o momento nosso formulário possui apenas campos obrigatórios, é possível adicionar campos opcionais, vamos fazer isso com o campo de seleção do numero de portas.

Repare que foi adicionado um “?” após a classe Porta, isso indica que ela pode receber valor nulo.

“Automagicamente” o bot irá colocar um botão “sem preferência” nas opções existentes,como mostrado na figura 4.

Figura 4 — Resultado do campo opcional

Modificando o formato de seleção

É possível, também, mudar o jeito que as opções aparecem para o usuário, através da propriedade ChoiceStyle, as opções são mostradas na figura 5 logo abaixo.

Figura 5 — Opções de escolha

Para exemplificar, irei escolher a opção Carousel. O resultado pode ser visto na figura 6, abaixo.

Figura 6 — Mudando o formato de escolha