Solution - Adaptive Card Event implementation Using WaterfallDialog Bot Framework V4

This article focuses on how to fix the AdaptiveCard Prompt dialog issue. It has divided into three sections,

1. Problem statement
2. Solution
3. Test the application

First, we understand the problem.

 

Problem statement

 

Natively Adaptive card events do not work in the Prompt Dialog. If you use it in the Text Prompt, it will display adaptive card information and not handle the Adaptive card event. Even if you click the Submit or Cancel event, there is no response. Since we are using TextPrompt, bot accepts string input but Adaptive card return the JSON format both format are mismatching.

 

The example is given below- no event triggers from the Adaptive Card.

 

 

How to make a response for JSON format? In the next section, we find a solution to this problem. 

 

Solution

 

Overwrite the Prompt Class & handle the AdatpiveCard (JSON format) event.

 

Let write the code to fix this issue.

 

What is the Prompt class?

This is the generic class derived from the Dialog class, all prompts class derived from this class. To implement AdaptiveCard event feature, first, we have to create a new class and should be derived from the Prompt class. I said earlier, Prompt class is a generic class so we have to define the data type.

 

What datatype has to defined?

AdatpiveCard is based on the JSON only, so while handling events like submit or cancel button, bot receives the JSON object as an input. so our datatype is a JSON object.

 

Creating the AdaptiveCardPrompt with JsonObject, 

public class AdaptiveCardPrompt : Prompt<JObject>
{
}

After creating the class, two functions must be overridden,

• OnRecognizeAsync
• OnPromptAsync

OnRecognizeAsync

OnRecognizeAsync functions attempt to recognize the user’s input, All type of prompt dialog logic has to be implemented in this function to validate the input, like TextPrompt checks for inut as string or not and NumberPrompt checks (entered number or not), the same way we are going to write our logic in this function, 

protected override Task < PromptRecognizerResult < JObject >> OnRecognizeAsync(ITurnContext turnContext, IDictionary < string, object > state, PromptOptions options, CancellationToken cancellationToken =
 default) {
 if (turnContext == null) {
  throw new ArgumentException(nameof(turnContext));
 }

 if (turnContext.Activity == null) {
  throw new ArgumentException(nameof(turnContext));
 }

 var result = new PromptRecognizerResult < JObject > ();

 if (turnContext.Activity.Type == ActivityTypes.Message) {
  if (turnContext.Activity.Value != null) {
   if (turnContext.Activity.Value is JObject) {
    result.Value = turnContext.Activity.Value as JObject;
    result.Succeeded = true;
   }
  }
 }
 return Task.FromResult(result);
}

the main logic,

if(turnContext.Activity.Value is JObject)
{
      result.Value = turnContext.Activity.Value as JObject;
      result.Succeeded = true;
}

Here we are checking whether the user has submitted JSON or not. If validation is successful, set the result.Succeeded = true, return to the main function, otherwise set the value is false automatically and OnPromptAsync function gets invoked.

 

OnPromptAsync function

This function is used for RePrompt the user input. Once OnRecognizeAsync function set the result.Succeeded = false, this function gets invoked and RePrompt again the same dialog to the user to get the correct answers.

Ex

 

In NumberPrompt dialog, if the user enters the string value, Bot wont allow the user to go further, this logic is handled by the result.Succeeded = false and OnPromptAsync function,  

protected override async Task OnPromptAsync(ITurnContext turnContext, IDictionary < string, object > state, PromptOptions options, bool isRetry, CancellationToken cancellationToken =
 default) {
 if (turnContext == null) {
  throw new ArgumentException(nameof(turnContext));
 }

 if (options == null) {
  throw new ArgumentException(nameof(options));
 }

 if (isRetry && options.Prompt != null) {
  await turnContext.SendActivityAsync(options.RetryPrompt, cancellationToken).ConfigureAwait(false);
 } else if (options.Prompt != null) {
  await turnContext.SendActivityAsync(options.Prompt, cancellationToken).ConfigureAwait(false);
 }
}

Our AdaptiveCardPrompt class is ready.

 

Test the AdaptiveCardPrompt class

Let us write a sample application using the Dialog concept to test the AdaptiveCardPrompt class

 

This sample gets the first name & last name from the user using the Adaptive card.

Adaptive Card user form information,

{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.0",
  "body": [
    {
      "type": "TextBlock",
      "text": "User Form"
    },
    {
      "type": "Input.Text",
      "id": "firstName",
      "placeholder": "What is your first name?"
    },
    {
      "type": "Input.Text",
      "id": "lastName",
      "placeholder": "What is your last name?"
    }
  ],
  "actions": [
    {
      "type": "Action.Submit",
      "title": "Submit"

    }
  ]
}

Define AdaptiveCardPrompt class in the AddDialog,

AddDialog(new AdaptiveCardPrompt(AdaptivePromptId));

In the UserFormAsync function we are reading the JSON file and use the AdaptiveCardPrompt dialog to show the information.

Note

Prompt Dialog should match with the AddDialog. 

private static async Task < DialogTurnResult > UserFormAsync(WaterfallStepContext stepContext, CancellationToken cancellationToken) {
 var cardJson = PrepareCard.ReadCard("userform.json");

 var cardAttachment = new Attachment() {
  ContentType = "application/vnd.microsoft.card.adaptive",
   Content = JsonConvert.DeserializeObject(cardJson),
 };

 var opts = new PromptOptions {
  Prompt = new Activity {
   Attachments = new List < Attachment > () {
     cardAttachment
    },
    Type = ActivityTypes.Message,
    Text = "Please fill this form",
  }
 };

 return await stepContext.PromptAsync(AdaptivePromptId, opts, cancellationToken);
}

Once user has submitted the information, we are reading the output in the ResultUserFormAsync function. (In this function gets invoked OnRecognizeAsync function when we set the result.Succeeded = true)

private static async Task < DialogTurnResult > ResultUserFormAsync(WaterfallStepContext stepContext, CancellationToken cancellationToken) {
 var value = stepContext.Result.ToString();

 var promptOptions = new PromptOptions {
  Prompt = MessageFactory.Text(value)
 };
 return await stepContext.PromptAsync(nameof(TextPrompt), promptOptions, cancellationToken);
}

Output

 

 

Please find the code sample here

 

Conclusion

 

I hope you understand how to implement the AdaptiveCard Event in waterfall dialogs

 

Happy Reading. Happy coding.