How to create a conversation flow with only Adaptive Cards?

Question

I'm trying to guide user input with Adaptive Cards so that the user chooses some pre-defined cases before the chat bot finally references the Qna Maker. I want to capture the user choice from an adaptive card to generate another adaptive card, but I can't figure out how to chain multiple adaptive cards together.

Using the question and answer base code form Azure's web app bot in C#.

I first tried doing it through the root dialog by getting what the user chose, calling a new dialog, and then opening a new adaptive card. However, I couldn't figure out how to capture what the user chose for the second adaptive card.

I'm currently trying to now do it through the MessagesController.cs and I can't figure out how to chain the adaptive cards. I've created an adaptive card when a user first connects to the bot, but once I capture what the user chooses on the adaptive card, I'm not sure how to display a new one and then get the input from that adaptive card before finally moving on to the root dialog.

I capture the user choice which is send as a ActivityTypes.Message. I can't figure out what to call to post the new adaptive card and have the input from the new adaptive card be used as the ActivityTypes.Message until finally when it get's to a certain use case it would go to root dialog. If anyone could help with how to implement this or maybe suggest a new way to implement it as I'm not sure if my way is the best way or even possible, it would be really appreciated. I've tried undestanding the contososcubabot implementation as an example, but my knowledge doesn't extend far enough to understand how they made it work.

public virtual async Task<HttpResponseMessage> Post([FromBody] Activity activity)
        {
            // check if activity is of type message
            if (activity.GetActivityType() == ActivityTypes.Message)
            {

                JToken valueToken = JObject.Parse(activity.Value.ToString());
                string actionValue = valueToken.SelectToken("property") != null ? valueToken.SelectToken("property").ToString() : string.Empty;

                var reply = activity.CreateReply();

                if (!string.IsNullOrEmpty(actionValue))
                {
                    switch (valueToken.SelectToken("property").ToString())
                    {
                        case "1":


                            string json = File.ReadAllText(HttpContext.Current.Request.MapPath("~\\AdaptiveCards\\card2.json"));
                            AdaptiveCards.AdaptiveCard card = JsonConvert.DeserializeObject<AdaptiveCards.AdaptiveCard>(json);

                            reply.Attachments.Add(new Attachment
                            {
                                ContentType = AdaptiveCard.ContentType,
                                Content = card
                            });

                            break;

                        default:

                            break;
                    }

                    //posts the new adaptive card to chat????


                }
                else
                {
                    await Conversation.SendAsync(activity, () => new RootDialog());
                }


            }
            else
            {
                await HandleSystemMessageAsync(activity);
            }
            return new HttpResponseMessage(System.Net.HttpStatusCode.Accepted);
        }
}

Fei Han Fei Han · Accepted Answer · 2018-07-23T08:31:47

I want to capture the user choice from an adaptive card to generate another adaptive card, but I can't figure out how to chain multiple adaptive cards together.

The following sample code works for me, you can refer to it to achieve your requirement.

In RootDialog:

[Serializable]
public class RootDialog : IDialog<object>
{
    public Task StartAsync(IDialogContext context)
    {
        context.Wait(MessageReceivedAsync);

        return Task.CompletedTask;
    }

    private async Task MessageReceivedAsync(IDialogContext context, IAwaitable<object> result)
    {
        var activity = await result as Activity;

        if (activity.Value != null)
        {
            JToken valueToken = JObject.Parse(activity.Value.ToString());
            string actionValue = valueToken.SelectToken("property") != null ? valueToken.SelectToken("property").ToString() : string.Empty;

            var reply = context.MakeMessage();
            string json = "";

            switch (actionValue)
            {
                case "1":
                    json = await GetCardText("card1");
                    break;
                case "2":
                    json = await GetCardText("card2");
                    break;
                case "3":
                    json = await GetCardText("card3");
                    break;
                default:
                    break;
            }

            AdaptiveCardParseResult cardParseResult = AdaptiveCard.FromJson(json);

            reply.Attachments.Add(new Attachment
            {
                ContentType = AdaptiveCard.ContentType,
                Content = cardParseResult.Card
            });

            await context.PostAsync(reply);
        }
        else
        {
            if (activity.Text.ToLower().Contains("card"))
            {
                var replyMessage = context.MakeMessage();

                var json = await GetCardText("maincard");

                AdaptiveCardParseResult cardParseResult = AdaptiveCard.FromJson(json);

                replyMessage.Attachments.Add(new Attachment()
                {
                    Content = cardParseResult.Card,
                    ContentType = AdaptiveCard.ContentType,
                    Name = "Card"
                });

                await context.PostAsync(replyMessage);
            }
            else
            {
                await context.PostAsync($"You sent {activity.Text}");
            }

        }

        context.Wait(MessageReceivedAsync);
    }

    public async Task<string> GetCardText(string cardName)
    {
        var path = System.Web.Hosting.HostingEnvironment.MapPath($"/AdaptiveCards/{cardName}.json");
        if (!File.Exists(path))
            return string.Empty;

        using (var f = File.OpenText(path))
        {
            return await f.ReadToEndAsync();
        }
    }
}

maincard.json

{
  "type": "AdaptiveCard",
  "version": "1.0",
  "body": [
    {
      "type": "TextBlock",
      "size": "large",
      "weight": "bolder",
      "text": "This is Adaptive Card"
    },
    {
      "type": "Input.ChoiceSet",
      "id": "property",
      "value": "1",
      "style": "compact",
      "isMultiSelect": false,
      "choices": [
        {
          "title": "Option 1",
          "value": "1"
        },
        {
          "title": "Option 2",
          "value": "2"
        },
        {
          "title": "option 3",
          "value": "3"
        }
      ]
    }
  ],
  "actions": [
    {
      "type": "Action.Submit",
      "title": "Submit"
    }
  ]
}

card2.json

{
  "type": "AdaptiveCard",
  "version": "1.0",
  "body": [
    {
      "type": "TextBlock",
      "size": "large",
      "weight": "bolder",
      "text": "This is Card2"
    },
    {
      "type": "Input.Text",
      "id": "property",
      "placeholder": "Please enter value",
      "value": "2"
    }
  ],
  "actions": [
    {
      "type": "Action.Submit",
      "title": "Submit"
    }
  ]
}

Test result:

How to create a conversation flow with only Adaptive Cards?

1 Answers