Create a Menu Item using Echo Bot Template | Microsoft Bot Framework

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
Create Echo Bot using Bot Builder SDK in Local Environment | Microsoft Bot Framework

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. Link available in Pre-requisites. 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 Adaptive Card Designer to create the Adaptive Card. Check out my post on Creating Adaptive Cards. Paste below JSON code in the menuItemCard.json.

{
  "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.