Create a Menu with an Adaptive Card in an Echo Bot (C#)

On request by one of the visitors on the site, we have come up with a solution to create a Menu item using Echo Bot Template from Microsoft Bot Framework. Based on the user selection on the menu, we can perform any action.

Pre-requisites

Visual Studio
Bot Framework Emulator

Links of first two requirements can be found in the downloads page.

Create a Menu Bot

Make sure you have created a bot using Echo Bot Template. We will continue from there by creating a Menu Item. For the latest Bot Framework templates, select Echo Bot (Bot Framework v4) – .NET Core 3.1. Give a project name as MenuBot.

We will use an Adaptive Card to show the menu. Let us create a new folder “Resources” in the root project. Create a new JSON file “menuItemCard” inside this folder.

I used the Adaptive Cards Designer to create the Adaptive Card. To learn how, read How to Create Adaptive Cards with the Adaptive Cards Designer. Paste the JSON below into menuItemCard.json. The designer writes "version": "1.6" into every card it copies, but this card only needs version 1.2, the version that added ActionSet, so the JSON keeps "version": "1.2".

{
  "type": "AdaptiveCard",
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.2",
  "body": [
    {
      "type": "TextBlock",
      "text": "Menu Item",
      "wrap": true,
      "horizontalAlignment": "Center",
      "size": "ExtraLarge",
      "weight": "Bolder",
      "color": "Dark"
    },
    {
      "type": "ActionSet",
      "actions": [
        {
          "type": "Action.Submit",
          "title": "Raise Ticket",
          "data": "Raise Ticket"
        }
      ]
    },
    {
      "type": "ActionSet",
      "actions": [
        {
          "type": "Action.Submit",
          "title": "Show Ticket Status",
          "data": "Show Ticket Status"
        }
      ]
    },
    {
      "type": "ActionSet",
      "actions": [
        {
          "type": "Action.Submit",
          "title": "Help",
          "data": "Help"
        }
      ]
    }
  ]
}

Create a new method CreateAdaptiveCardAttachment in the EchoBot.cs file.

private static Attachment CreateAdaptiveCardAttachment()
        {
            string[] paths = { ".", "Resources", "menuItemCard.json" };
            var adaptiveCardJson = File.ReadAllText(Path.Combine(paths));
            
            var adaptiveCardAttachment = new Attachment()
            {
                ContentType = "application/vnd.microsoft.card.adaptive",
                Content = JsonConvert.DeserializeObject(adaptiveCardJson),
            };
            return adaptiveCardAttachment;
        }

When user joins the conversation, we need to greet the user and show the above adaptive card. Modify the OnMembersAddedAsync method as below.

protected override async Task OnMembersAddedAsync(IList<ChannelAccount> membersAdded, ITurnContext<IConversationUpdateActivity> turnContext, CancellationToken cancellationToken)
        {
            var welcomeText = "Hello and welcome! This is a Menu Item Bot. Select your option.";
            foreach (var member in membersAdded)
            {
                if (member.Id != turnContext.Activity.Recipient.Id)
                {
                    await turnContext.SendActivityAsync(MessageFactory.Text(welcomeText, welcomeText), cancellationToken);
                    var cardAttachment = CreateAdaptiveCardAttachment();
                    await turnContext.SendActivityAsync(MessageFactory.Attachment(cardAttachment), cancellationToken);
                }
            }
        }

Finally, we need to capture the user response and do some action. Also, we need to show the card again after doing the action. I have written if else statements for starters. You can perform any action based on the selection. Modify the OnMessageActivityAsync method as below.

protected override async Task OnMessageActivityAsync(ITurnContext<IMessageActivity> turnContext, CancellationToken cancellationToken)
        {
            var txt = turnContext.Activity.Text;

            if ("Raise Ticket".Equals(txt))
            {
                await turnContext.SendActivityAsync(MessageFactory.Text("Write your code logic here to raise a new ticket"), cancellationToken);
            }
            else if ("Show Ticket Status".Equals(txt))
            {
                await turnContext.SendActivityAsync(MessageFactory.Text("Write your code logic here to show ticket status"), cancellationToken);
            }
            else if ("Help".Equals(txt))
            {
                await turnContext.SendActivityAsync(MessageFactory.Text("Write your code logic here to show help"), cancellationToken);
            }
            else
            {
                await turnContext.SendActivityAsync(MessageFactory.Text("Not a valid option."), cancellationToken);
            }
            var cardAttachment = CreateAdaptiveCardAttachment();
            await turnContext.SendActivityAsync(MessageFactory.Attachment(cardAttachment), cancellationToken);

        }

This is a basic starter for implementing a Menu Item using Echo Bot Template. If your use case is just to perform a single action based on user selection, then this is very useful. Get the complete code on GitHub.