Getting Started With Hero Card Design Using Microsoft Bot Framework

Introduction

The Bot Framework supports different types of rich cards and provides a richer interaction experience to the users. In this article, I will show how to integrate Hero Card UI design in a Bot application. The Hero card is a multipurpose card and contains an image, title text, subtext, multiple buttons, and a card tap action.

Prerequisite

I have explained about Bot framework installation, deployment, and implementation in the below articles.

Create New Bot Application

Let's create a new bot application using Visual Studio 2017. Open Visual Studio. Go to File > New Project (Ctrl + Shift +N) > Bot application.

Bot Framework

The Bot application template gets created with all the components and all required NuGet references installed in the solution.

Create a new HeroCardDialog class

Step 1

You can create a new HeroCardDialog class to show the HeroCard dialog. Right-click on Project > select Add New Item > create a class that is marked with the [Serializable] attribute (so that the dialog can be serialized to state) and implement the IDialog interface.

using Microsoft.Bot.Builder.Dialogs;
using Microsoft.Bot.Connector;
using System;
using System.Collections.Generic;
using System.Threading.Tasks;
namespace BotHeroCard.Dialogs
{
[Serializable]
public class HeroCardDialog : IDialog<object>
{

Step 2

IDialog interface has only StartAsync() method. StartAsync() is called when the dialog becomes active. The method has passed the IDialogContext object that is used to manage the conversation.

public async Task StartAsync(IDialogContext context)
{
context.Wait(this.MessageReceivedAsync);
}

Step 3

Create a MessageReceivedAsync method and write the following code for the welcome message and show the list of demo options dialog.

/// <summary>
/// MessageReceivedAsync
/// </summary>
/// <param name="context"></param>
/// <param name="result"></param>
/// <returns></returns>
public async virtual Task MessageReceivedAsync(IDialogContext context, IAwaitable<IMessageActivity> result)
{
var message = await result;
var welcomeMessage = context.MakeMessage();
welcomeMessage.Text = "Welcome to bot Hero Card Demo";
await context.PostAsync(welcomeMessage);
await this.DisplayHeroCard(context);
}
/// <summary>
///
/// </summary>
/// <param name="context"></param>
/// <returns></returns>
public async Task DisplayHeroCard(IDialogContext context)
{
var replyMessage = context.MakeMessage();
Attachment attachment = GetProfileHeroCard(); ;
replyMessage.Attachments = new List<Attachment> { attachment };
await context.PostAsync(replyMessage);
}

After the user enters the first message, the bot will reply with a welcome message, like below.

Bot Framework

Step 4 Design Hero Card

The Hero Card typically contains a large image, one or more buttons, and text. Hero Card class has the following properties.

Title - Title text of the card
Subtitle -subtitle text for the title
Text – Summary text to display on the card
Images – Display large image
Buttons - One or more buttons. The Skype allows only 5 buttons to display on a card. If you have more buttons, you can create two cards.
Tap - An action that is triggered when a user taps on the card.

The following code is used for showing the design to the user profile message with image, text, subtext, and action button.

private static Attachment GetProfileHeroCard()
{
var heroCard = new HeroCard
{
// title of the card
Title = "Suthahar Jegatheesan",
//subtitle of the card
Subtitle = "Microsoft certified solution developer",
// navigate to page , while tab on card
Tap = new CardAction(ActionTypes.OpenUrl, "Learn More", value: "http://www.devenvexe.com"),
//Detail Text
Text = "Suthahar J is a Technical Lead and C# Corner MVP. He has extensive 10+ years of experience working on different technologies, mostly in Microsoft space. His focus areas are Xamarin Cross Mobile Development ,UWP, SharePoint, Azure,Windows Mobile , Web , AI and Architecture. He writes about technology at his popular blog http://devenvexe.com",
// list of Large Image
Images = new List<CardImage> { new CardImage("http://csharpcorner.mindcrackerinc.netdna-cdn.com/UploadFile/AuthorImage/jssuthahar20170821011237.jpg") },
// list of buttons
Buttons = new List<CardAction> { new CardAction(ActionTypes.OpenUrl, "Learn More", value: "http://www.devenvexe.com") , new CardAction(ActionTypes.OpenUrl, "C# Corner", value: "http://www.c-sharpcorner.com/members/suthahar-j"), new CardAction(ActionTypes.OpenUrl, "MSDN", value: "https://social.msdn.microsoft.com/profile/j%20suthahar/") }
};
return heroCard.ToAttachment();
}

The above code will generate a Hero Card and reply to the user.

Bot Framework

Run Bot Application

The emulator is a desktop application that lets us test and debug our bot on localhost. Now, you can click on "Run the application" in Visual Studio and execute in the browser.

Test application on Bot Emulator

You can follow the below steps to test your bot application.

Open Bot Emulator.
Copy the above localhost URL and paste it in the emulator, e.g., - http://localHost:3979
Append the /api/messages in the above URL; e.g. - http://localHost:3979/api/messages.
You won't need to specify Microsoft App ID and Microsoft App Password for localhost testing. So, click on "Connect".

Summary

In this article, you learned how to create a Bot application using Visual Studio 2017 and create Hero Card design using it. If you have any questions/feedback/issues, please write in the comment box.

6 Comments

Join the conversation! Your thoughts help the community grow.

Skanda Vishwanath6y ago
Can u pls upload the code of how to display records in table format dynamically using adaptive cards in bot framework
srinu vas8y ago
Or is possible to navigate respective url when we click images
srinu vas8y ago
Hi ,is it possible to add image inside the button
Mert Ari8y ago
Hello Suthahar, i want to ask a question about actiontypes of hero and adaptive cards. I opened a url web page thanks to openurl actiontype but i want to close opened url web page from browser after a specific time. How can i do that ?
Arjun Acharya8y ago
I wanted to customize the image size. Is it possible to increase the size of the image?
- Suthahar Jegatheesan8y ago
  Hi Arjun , Currently bot doesn't have a control on the size of CardImage in HeroCard. You can Change and use different card as per your requirement