Adaptive Card Data Collection in Waterfall Dialog | Passing Dynamic Data to Adaptive Card | Microsoft Bot Framework v4 C#

We will show you how to Retrieve Adaptive card data from the form in Waterfall Dialog Steps and Passing Dynamic Data to Adaptive Card using Microsoft Bot Framework v4 C#.

With less human intervention, a chatbot can improve and engage in customer interactions. It eliminates obstacles to customer service that may arise when demand exceeds available resources. Customers can receive real-time responses to their queries rather than waiting on hold. The below Image shows the steps to build a bot.

In this blog, we are going to discuss some cases which we generally use to build a bot. We will show you how to do Adaptive Card Data Collection in Waterfall Dialog, and Passing Dynamic Data to an Adaptive Card using Microsoft Bot Framework v4 C#. 

About

This blog provides you with information about Microsoft teams bot using Microsoft bot framework v4 .Net core 3.1, and this blog also provides you information about three different use cases such as: 

1. Debugging the Microsoft teams bot. 

2. Getting the data from the adaptive card form.

3. Getting the user details from the Microsoft teams channel. 

Watch the Video or Follow along

Let’s get started

After opening Visual studio 2022 on your desktop, create a new project. To create a new project, follow the steps below: 

1. Click Create a new project.
2. Pick up the Core Bot .NET Core 3.1 template from Create a new project dialog box.
3. Click Next.
4. On the Configure your new project dialog box, select the following parameters: 

To create a bot, Click Create. Wait for the dependencies to get resolved. After creating the project, you are redirected to the workspace of your project. 

In this project, there are many things that we do not need. You can delete some files as well as some stuff, including the booking dialog, date resolver dialog, flight booking recognizer, and cognitive models.

To delete the stuff, do the following:

(a). Go to Main Dialog. Delete the following code pieces.

using TeamsWaterfallAdaptiveBot.congnitiveModels;
private readonly FlightBookingRecognizer _luisRecognizer;
FlightBookingRecognizer luisRecognizer , BookingDialog bookingDialog,
_luisRecognizer = luisRecognizer;
Adddilog(bookingDilog);

We can also delete some methods and content of the waterfall dialog which we do not want. so that we will write our own logic.

In the final steps, we are going to leave these two lines as it is because this helps the bot to restart.

Note: Instead of leaving methods blank because it will throw an exception and it requires this particular dialog as a return value. So the bot will be in a loop without doing anything. For the loop, we will write the code below:

return await stepContext.nextAsync(null, cancellationToken);

(c). Go to the startup.cs file and delete some exception statements (Because we removed the class files for them).

(d). Click save.

(e). Build the project to see if we have any exceptions or not.

For building the project, do the following below:

(a) On the menu bar, click Build and then Click Build solution.

How to implement the use case?

After succeeding in the build, we will implement our use case.

To implement the use case, do the following:

(1). Create a new class file (basically a dialog class file). To create a new class file, do the following below:

(a). From the Dialog class file, point to Add, and then select click Class.

(b). In the Add new items dialog box, Enter the name of your class file in the Name field.

(c). Click Add. Inherit the UserDetailsDialog from CancelAndHelpDialog. Remember, we did not delete this class file initially.

(e) Create a constructor.

Now, we are going to use certain prompts such as Text Prompt.

1. Create waterfall dialog steps and methods.

The reason for creating waterfall dialog steps are:

UserFormsteps, //In this step we are sending the adaptive card by passing dynamic data to it.
ConfirmStepAsync, //In this step we are going to take the submitted data from the adaptive card
FinalStepAsync, //In this final step we end this particular dialog.

Now, we have to call this particular dialog from the main dialog. To call this particular dialog from the main dialog,

(1). Go to the MainDialog.

In the intro step, call the UserDetailsDialog that is the user details dialog.

Note: Instead of restarting the conversation from the FinalStepAsync, you can also end the dialog. In that case, we do not need the final step. If you want to make it a little descriptive, you can also comment the waterfall dialog action steps. It will help when in case of a requirement changes, we can just uncomment on certain code and reuse that.

(2). Define user details in the constructor of the MainDialog.

Now, we will go back to the user details dialog. In the first step, we have to read the adaptive card, so we will use the template to pass the dynamic data to the adaptive card.

Now, we have to mention the path where our adaptive card template is present. To mention the path, follow the steps below:

1. Add a new folder to the project.
2. Assign the name of a folder “Content“
3. Inside the content folder, create a JSON file where the adaptive card will be present.
4. Enter the name of the JSON file “UserDetailsForm“
5. Click Add.

Now, go to adaptive card designer and pick up a sample with the latest version of Adaptive Card (1.5 at the time of writing this blog). So that we do not have to create an adaptive card from scratch.

Then copy all the adaptive card JSON content and paste it into the UserDetilsForm.json.

Add the data payload. That we have to send it to the back end.

Please find the below JSON for your reference. I have removed the image URL for simplicity. Here is the sample used – Adaptive Card Designer. I have just used 1 input field with 2 text fields.

{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.5",
  "body": [
    {
      "type": "ColumnSet",
      "columns": [
        {
          "type": "Column",
          "width": 2,
          "items": [
            {
              "type": "TextBlock",
              "text": "${title}",
              "weight": "Bolder",
              "size": "Medium",
              "style": "heading"
            },
            {
              "type": "TextBlock",
              "text": "${body}",
              "isSubtle": true,
              "wrap": true
            },
            {
              "type": "Input.Text",
              "label": "${label}",
              "id": "inputValue"
            }
          ]
        }
      ]
    }
  ],
  "actions": [
    {
      "type": "Action.Submit",
      "title": "Submit",
      "data": {
        "msteams": {
          "type": "messageBack",
          "displayText": "Form Submitted",
          "text": "userDetailsSubmitted",
          "value": {
            "id": "userDetailsSubmitted",
            "action": "formAction",
            "value": "userDetailsSubmitted",
            "delete": false
          }
        }
      }
    }
  ]
}

Now, coming to the dynamic data, we can send the title, body dynamically to the adaptive card at the runtime. To send the title and body dynamically,

1. Go to the dialog, then specify the path where the adaptive card is present
2. Create a template JSON, and then we create a new adaptive card template.

Note: Make sure you have installed the adaptive card nuget package.

To import an adaptive card, follow the steps below:

(a). In the Solution Explorer panel, under the TeamWaterfallAdaptivebot, click Manage NuGet packages and then go to Browse and then search adaptive cards.

Now, we have to create data JSON.

Now, we create adaptive card attachment.

Now, coming back to the final step(confirm step). In this step, we are going to retrieve the data and send a sample reply back to the user.

Now, we are going to just end the dialog

Testing our Chatbot

Now, we are going to test our bot in teams channel. Make sure before testing you have installed ngrok on your computer.

Now, we have to create Azure bot resource. To create the Azure bot resource, follow the step below or go to the link provided:

(1). Go to Azure.

(2). Click Create a resource.

(3). In the search bar, search Azure bot.

(4). Click Create.

(4). After clicking Create, you are redirected to a page of Create an Azure Bot.

On the Create an Azure Bot, in Project details, select the following parameters:

(5) Click Create+Review.

(6). Click Create.

Note: We are not creating an app service to deploy because our code base will be on our local, machine and we will be connecting it through ngrok.

Now our Azure Bot resource is created. Click Go to resources.

Now, you will redirect to the configuration page.

On the TeamAdaptiveWaterfallBot|Configuration page, see the following parameters:

Update the appsettings.json configuration file for adding the app id and app secret.

Make sure you have connected your bot to Microsoft Teams channel.

(7). Click Apply after adding the ngrok endpoint url.

Now let us see if our bot is working properly or not

For testing the bot –

(1) Send a “Hi” message, then the bot will ask to fill out the form that is Tell us about yourself, then enter the data in the tell us about yourself field then click Submit, and the bot will reply form is submitted, and then we will get a sample response from the bot.

How to deploy our bot to Azure?

To deploy the bot to azure, follow the below video.

Source Code is Available on JD Bots Repository.