Getting Started With Conversational Forms And FormFlow Using Microsoft Bot Framework

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 dialog's conversation based on your property and type that was specified on a class. Bot Dialog also is more powerful but when handling a conversation like a registration or ordering, it requires more effort to complete the process using bot dialog.

In this article, I will help you to understand how to use Bot FormFlow and how you can use it to collect information from the users. We are creating a sample demo Bot for a bus booking bot.



Prerequisite

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

1. Getting Started with Chatbot Using Azure Bot Service
2. Getting Started with Bots Using Visual Studio 2017
3. Deploying A Bot to Azure Using Visual Studio 2017
4. How to Create ChatBot In Xamarin
5. Getting Started with Dialog Using Microsoft Bot Framework
6. Getting Started with Prompt Dialog Using Microsoft Bot Framework

Create New Bot Service

Let’s create a new Bot Service application using Visual Studio 2017. Open Visual Studio, select File menu, and create a new Project (Ctrl + Shift +N). Here, select Bot application.



The Bot application template is created with all the components and all required NuGet references installed in the solution. Just add a new class for BusFormFlow to the project.



In this solution, we have two main classes - MessagesController.cs and BusFormFlow.

Create New FormFlow Class

We can start creating a class that represents our form and creates properties for each field. Form fields can be one of the following types.

• Enum
• List of Enum
• Integral – sbyte, byte, short, ushort, int, uint, long, ulong
• Floating point – float, double
• String
• DateTime

FormFlow will automatically validate the type based on user input and reply with the validation message.

1. Create a new enum field for the point from where the bus starts from.
   
   1. /// <summary>
   2. /// From City Enum
   3. /// </summary>
   4. public enum FromCity
   5. {
   6. Bangalore,Chennai,Madurai,Trichy,Coimbatore,Tanjore,pudukkottai
   7. }
   The bot output looks like below.
   
   
   

2. Create a new enum field for bus end point.
   
   1. /// <summary>
   2. /// To City Enum
   3. /// </summary>
   4. public enum ToCity
   5. {
   6. Bangalore, Chennai, Madurai, Trichy, Coimbatore, Tanjore, Pudukkottai
   7. }
   The bot output looks like below.
   
   
   

3. Create a new enum for bus type.
   
   1. /// <summary>
   2. /// Bus Type Enum
   3. /// </summary>
   4. public enum BusType
   5. {
   6. AC, NonAC,Slepper, Siting
   7. }
   The output looks like below.
   
   
   

4. Create a new enum for gender.
   
   1. /// <summary>
   2. /// Gender
   3. /// </summary>
   4. public enum Gender
   5. {
   6. Male,Female
   7. }
   The output looks like below.
   
   
   

5. Create a class for FormFlow with the [Serializable] attribute and create build form method for showing FormFlow.
   
   1. using Microsoft.Bot.Builder.FormFlow;
   2. using Microsoft.Bot.Builder.Dialogs;
   3. using System;
   5. namespace FormFlowBot.FormFlow
   6. {
   7. [Serializable]
   8. public class BusFormFlow
   9. {
   10. /// <summary>
   11. /// List of Form Flow
   12. /// </summary>
   13. public FromCity? FromAddress;
   14. public ToCity? ToAddress;
   15. public DateTime? StartDate;
   16. public BusType? BusTypes;
   17. public Gender? SelectGender;
   18. public string Name;
   19. public int Age;
   21. /// <summary>
   22. /// Build Form
   23. /// </summary>
   24. /// <returns></returns>
   25. public static IForm<BusFormFlow> BuildForm()
   26. {
   27. return new FormBuilder<BusFormFlow>()
   28. .Message("Welcome to the BotChat Bus Booking !")
   29. .OnCompletion(async (context, profileForm) =>
   30. {
   31. string message = "Your Bus booking Successfully Completed .You will get confirmation email and SMS .Thanks for using Chat Bot Bus Booking , Welcome Again !!! :)";
   32. await context.PostAsync(message);
   33. })
   34. .Build();
   35. }
   37. }
   38. }

Calling FormFlow

1. The Messagescontroller class is added in the solution and adds the following MakeRootDialog from a Messagescontroller class.
   
   1. internal static IDialog<BusFormFlow> MakeRootDialog()
   2. {
   3. return Chain.From(() => FormDialog.FromForm(BusFormFlow.BuildForm));
   4. }

2. Call MakeRootDialog from post method in MessagesController calss.
   
   1. /// <summary>
   2. /// POST: api/Messages
   3. /// Receive a message from a user and reply to it
   4. /// </summary>
   5. public async Task<HttpResponseMessage> Post([FromBody]Activity activity)
   6. {
   7. if (activity.Type == ActivityTypes.Message)
   8. {
   9. await Conversation.SendAsync(activity, MakeRootDialog);
   12. }
   13. else
   14. {
   15. HandleSystemMessage(activity);
   16. }
   17. var response = Request.CreateResponse(HttpStatusCode.OK);
   18. return response;
   19. }

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.

Test application on Bot Emulator

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

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

Summary

In this article, we learned how to use FormFlow and collect information from the users. If you have any questions/ feedback/ issues, please write in the comment box.