Getting Started With Customizing A FormFlow Using Microsoft Bot Framework

Suthahar Jegatheesan

7y42.3k11100Article

11 Comments

Join the conversation! Your thoughts help the community grow.

Jobin Joseph7y ago
Hi Suthahar, is it possible to customize the Bot validation message from ' It is not a valid option' to something else ?
- Suthahar Jegatheesan7y ago
  Hello Jobin Joseph , Yes You can customize the Validation message based on your user reply . We need train the Bot like that .
Adam Knecht7y ago
Hi Suthahar, Is it possible to have a button in. Formflow that will take the user to a webpage? Also, is it possible to add images inside a formflow? If either can be done, how does one do it?
- Adam Knecht7y ago
  Thanks for the help. I will check it out. I enjoy your articles as they clearly explain everything - especially for newbies like myself.
- Adam Knecht7y ago
  Hello Suthahar, Im still having trouble here. So, hoping you can help. When a user click on an option in form flow is it possible for that to open a webpage as opposed to exposing the next set of options in the from? Also, is it possible to control what set of options come next? In other words if user click on A then x comes up but if user click on B then Y should come up?
- Suthahar Jegatheesan7y ago
  Hello Adam Knecht , Form flow will support following type, Each property must be one of these data typesIntegral (sbyte, byte, short, ushort, int, uint, long, ulong) Floating point (float, double) String DateTime Enumeration List of enumerations ,if you are looking Image and Button ,You need use reply message Card , Please refer my previous article for that
Yatendra Deshmukh8y ago
Very much helpful..
prasanna raj8y ago
Hi Suthahar, yes am looking same in emulator , is there any way to do autocomplete (from database or Json) in Bot framework emulator ? or is there any option using @symbol to populate data's from database or Json. finally i want to use in skype . if you have any suggestions please help me .
- Suthahar Jegatheesan7y ago
  Hello prasanna raj ,Sorry for delay in response ,Its not possible using bot framework's default, you can use alternative like suggested actions,inputhind
prasanna raj8y ago
Nice article Suthahar, is there any option in auto complete in Emulator ?
- Suthahar Jegatheesan8y ago
  Hello Prasanna, Thanks you very much :) You mean Autocomplete suggestions?

Introduction

The Bot Framework enables you to build bots that support different types of interactions with users. You can design conversations in your bot to be freeform. Your bot can also have more guided interactions where it provides the user choices or actions. The conversation can use simple text strings or more complex rich cards that contain text, images, and action buttons. And you can add natural language interactions, which let your users interact with your bots in a natural and expressive way.

Bot Builder SDK introduced Form Flow, it will automatically generate the dialogs conversation based on your property and type that is specified on a class. Before reading this article, you can refer to my previous article for basic understanding about Form Flow

In this article, will help you to customize the forming process, change prompt text, field order and how to add condition field. We are going to edit bus booking bot and add validation and form flow attribute.

Prerequisite

I have explained about Bot framework Installation, deployment, and implementation in the below article.

Customize Form Flow Property Text

Prompt Text

The Form Flow provides default prompt text-based o the property name; for example, Email Property default prompt text is “Please enter email “ but Bot Framework provides feature for customizing text using prompt attribute like below.

[Prompt("When you are satrting from")]
public DateTime? StartDate

The output looks like below,

output
Enum List Item with Prompt text

The following code shows the prompt text with the list of data .You can add custom prompt text and add pattern language({&},{||} ) to dynamically populate list of data at runtime.

{&} will replace the replace with description of the field.
{||} is replaced with the list of choice in the enumeration

[Prompt("You can Select {&} {||}")]
public FromCity? FromAddress;
[Prompt("You can Select {&} {||}")]
public ToCity? ToAddress;

The output looks like below.

output

Form Flow User Input Validation

Numeric field

The Numeric attribute is used to specify and restrict the range of allowed values for a numeric field. The following code allows a number between 1 and 5.

[Numeric(1,5)]
public int? NumberofSeat;

If user provides the value above 5 or below 1, bot will show the validation message like below.

output

Optional Field

In the Form Flow attribute, by default, every field is required and must be filled in the form. If you specify the Optional attribute, it will select as “No preference “.

[Optional]
public string Address;

The Optional Field type output look like below

output

Pattern field

A regular expression is an object that describes a pattern of characters. Regular expressions are used to perform pattern-matching and "search-and-replace" functions on text. You can add regular expressions into pattern attribute and validate the user input. The following code will validate user email id .

[Pattern(@"^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$")]
public string Email;

The below output shows a user trying provide invalid email id, immediately bot will reply and ask for valid email

output

Terms

You can add the Terms attribute to match the user input. When we ask the user for gender they are presented with buttons for them to choose between Male or Female. However, they don’t have to use the buttons and can instead type their answer if they wish. By default, if the user types their answer they must enter the choice exactly, e.g. “Male” or “Female”, but in the context of a natural conversation the user might say something like “M” or “girl”.

/// <summary>
/// Gender
/// </summary>
public enum Gender
{
[Terms("M","boy")]
Male,
[Terms("F","girl")]
Female
}

The Form Flow is like below and the user can select or provide terms

output

Custom message for Enum

The following code shows how to show custom item list for enum . We have attribute for describing customized enum item using Describe

public enum Food
{
[Describe("Yes, I want South indian meal")]
SMeal = 1,
[Describe("Yes, I want South North Indain meal")]
NMeal = 2,
[Describe("Yes , I want Fruits")]
Fruts = 3 ,
[Describe("Thanks , I dont want any Food")]
No =4
}

The output looks like below

output

Template Attribute

The Template attribute enables you to replace the default templates that FormFlow uses to automatically generate prompts. The following code example uses the Template attribute to redefine how the form handles enumeration fields. The attribute indicates that the user may select only one item, sets the prompt text by using pattern language, and specifies that the form should display only one item per line.

[Template(TemplateUsage.NotUnderstood, "Sorry , \"{0}\" Not avilable .", "Try again, I don't get \"{0}\".")]
public Food LunchFood;

Pattern language uses curly braces ({}) to identify elements that will be replaced at runtime with actual values. The output looks like below

output

Custom Template Error

The following code redefines the TemplateUsage.NotUnderstood template to specify two different variations of message. When the bot needs to communicate that it does not understand a user's input, it will determine message contents by randomly selecting one of the two text strings.

[Template(TemplateUsage.NotUnderstood, "Sorry , \"{0}\" Not avilable .", "Try again, I don't get \"{0}\".")]
public Food LunchFood;

The output looks like below

output

Welcome, Confirmation and Form Builder

The following code example uses FormBuilder to define the steps of the form, validation, welcome message and dynamically define a field value and confirmation. By default, steps in the form will be executed in the sequence in which they are listed

public static IForm<BusFormFlow> BuildForm()
{
return new FormBuilder<BusFormFlow>()
.Message("Welcome to the BotChat Bus Booking !")
.Field(nameof(ToAddress))
.Field(nameof(StartDate))
.Field(nameof(BusTypes))
.Field(nameof(NumberofSeat))
.Field(nameof(LunchFood))
.Message("Passenger Details")
.AddRemainingFields()
.Message("You will get confirmation email and SMS .Thanks for using Chat Bot Bus Booking")
.OnCompletion(async (context, profileForm) =>
{
string message = "Your Bus booking Successfully Completed , Welcome Again !!! :)";
await context.PostAsync(message);
})
.Build();
}

Run Bot Application

The emulator is a desktop application that lets us test and debug our bot on localhost. Now, you can click on "Run the application" in Visual studio and execute in the browser.

output

Test Application on Bot Emulator

You can follow the below steps for testing your bot application.

Open Bot Emulator.
Copy the above localhost url and paste it in emulator e.g. - http://localHost:3979
You can append the /api/messages in the above url; e.g. - http://localHost:3979/api/messages.
You won't need to specify Microsoft App ID and Microsoft App Password for localhost testing, so click on "Connect".

Summary

In this article, you have learned about customizing the form process, changing prompt text, field order, and how to add condition field. If you have any questions/ feedback/ issues, please write in the comment box.