Microsoft Bot Framework – Forms Dialog and how to add dynamic options.

What’s up guys, Eze is here. As you know I’ve already written a post about Microsoft Bot Framework, in case you missed it you can check it here. Today I want to go deeper and explain a really good feature: Form Dialog. This feature is used to create a form and allow our Bot to ask field by field until completes the form and in particular I want to explain how to add dynamic options to our font so let dive into the description right away.

Creating the form

Let’s suppose we have a form and we want our bot to ask for each property in our form to the user in order to complete it so first we need to define our form. In my case I’m using the same I have in my working example. As always the working example is available here.

[Serializable]
 [Template(TemplateUsage.NotUnderstood, "I do not understand \"{0}\".", "Try again, I don't get \"{0}\".")]
 public class PlaceTemplate
 {
    [Prompt("Name a place to know the current date-time {||}")]
    [Describe("Name of the place")]
    public string PlaceName { get; set; }
    [Prompt("Select a place {||}")]
    [Describe("Place to find the current date time")]
    public string SelectedPlace { get; set; }

As you can see in the code above we just define a new class and the properties of this class are going to be used by our bot to complete the form. Then we need to define a static method to return a IForm<object>. As you can see below this method create an instance of the class FormBuilder and then just return the method Build(). In this FormBuilder it’s going to define which field we want to ask to the user, to do that we are going to use the method Field(). And then using the OnCompletion() method we will define the behavior for our bot after populate all the requested fields. As you can see this is a good way to guide our user through a form.

 
 public static IForm<PlaceTemplate> BuildPlaceForm()
{
var logic = new LocationBL();
OnCompletionAsyncDelegate<PlaceTemplate> process = async (context, state) =>
{
var businesLogic = new LocationBL();
var response = businesLogic.GetCityInfoFromPlaceId(state.SelectedPlace);
var reply = string.Empty;
if (!string.IsNullOrEmpty(response.cityName) && !string.IsNullOrEmpty(response.convertedLocalTime))
{
reply = $"Current date time at {response.cityName} is {response.convertedLocalTime}";
}
else
{
reply = $"Sorry we could not find any location called {state.PlaceName}";
}
await context.PostAsync(reply);
};
var builder = new FormBuilder<PlaceTemplate>()
.Message("Welcome to the City Timer bot!")
.Field(nameof(PlaceName))
.Field(new FieldReflector<PlaceTemplate>(nameof(SelectedPlace))
.SetType(null)
.SetActive((state) =>
{
return string.IsNullOrEmpty(state.SelectedPlace);
})
.SetPrompt(new PromptAttribute("Please select one of the following options: {||}")
{
ChoiceStyle = ChoiceStyleOptions.Buttons

})
.SetDefine((state, field) =>
{
var result = logic.GetPlaces(state.PlaceName);
foreach (var item in result)
{
field
.AddDescription(item.Item1, item.Item2)
.AddTerms(item.Item1, item.Item2);
}

return Task.FromResult(true);
}))
.OnCompletion(process);
return builder.Build();
}

Adding dynamic options to a field.

I saw a lot of examples where the use can chose one of many options but those options are always defined using an Enum. In my case I want to define the options dynamically so to do that our field needs to be an instance of FieldReflector. This new object has a method SetDefine as you can see in the code above which is used in my example to get the list of places and return a list to the user to select one option.

As you can see creating a form using the Microsoft Bot Framework it’s really easy and adding dynamic options to a field is even easier.

bot_fields.PNG

For mode details of Microsoft Bot Framework you can use this link.

If you found this post useful please don’t forget to press the like button and share it. If you are in doubt don’t hesitate to ask a question and as always thank you for reading.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s