Getting Started With Thumbnail Card Design Using Microsoft Bot Framework

Suthahar Jegatheesan

9y35.7k10100Article

Microsoft Bot FrameworkThumbnail Card Design

10 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
tharak nadh8y ago
Shall I create buttons more than one in Video Card. If yes please share the Code or share the article if it is already covered
- Suthahar Jegatheesan8y ago
  Hi tharak nadh ,I have covered Article Attachment . Could you please refer ,it may help you https://www.c-sharpcorner.com/article/sending-bot-reply-message-with-attachment-using-bot-framework/
tharak nadh8y ago
Can you share the URL please
tharak nadh8y ago
I am looking into the article like, I want to store chat bot conversation into Blob storage, SharePoint. Please share if any on the articles if you have covered along with code.
- Suthahar Jegatheesan8y ago
  Hi tharak nadh , I am covered this topic, if any i will share with you .but having idea If you want to data that will persist for the lifetime of a user rather than a single conversation, you can save to userData rather than conversationData and same useddata upload to the server
tharak nadh8y ago
Excellent article, thaks for sharing the code also
- Suthahar Jegatheesan8y ago
  Thanks tharak nadh for your feedback :)
Ramesh Palanivel9y ago
Nice Articles.. Keep post more article regarding BOT Framework
- Suthahar Jegatheesan9y ago
  Thanks Ramesh , sure will share more about Bot

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 Thumbnail card UI design in a Bot application. The Thumbnail card is a multipurpose card that contains small image, title text, subtext, multiple buttons, and a card tap action.

A Hero Card and a Thumbnail Card have the difference in the size of image and text alignment of the card.

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 and select File > Create New Project (Ctrl + Shift +N) > select Bot application.

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

Create New ThumbnailCardDialog Class

Step 1

You can create a new ThumbnailCardDialog class to show the ThumbnailCard dialog. Right-click on Project > Add New Item > create a class that is marked with the [Serializable] attribute (so 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 BotThumbnailCard.Dialogs
{
[Serializable]
public class ThumbnailCardDialog : IDialog<object>
{

Step 2

IDialog interface has only StartAsync() method. StartAsync() is called when the dialog becomes active. The method passes the IDialogContext object 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 to 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 Thumbnail Card Demo";
await context.PostAsync(welcomeMessage);
await this.DisplayThumbnailCard(context);
}
/// <summary>
/// DisplayThumbnailCard
/// </summary>
/// <param name="context"></param>
/// <returns></returns>
public async Task DisplayThumbnailCard(IDialogContext context)
{
var replyMessage = context.MakeMessage();
Attachment attachment = GetProfileThumbnailCard(); ;
replyMessage.Attachments = new List<Attachment> { attachment };
await context.PostAsync(replyMessage);
}

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

Step 4 Design Thumbnail Card

The Thumbnail Card typically contains a small image with left alignment, one or more buttons, and text. Thumbnail 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 small image with left alignment
Buttons - One or more buttons. The Skype allow only 5 buttons will 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 of the user profile message with image, text, subtext, and action button.
1. /// <summary>
2. /// GetProfileThumbnailCard
3. /// </summary>
4. /// <returns></returns>
5. private static Attachment GetProfileThumbnailCard()
6. {
7. var thumbnailCard = new ThumbnailCard
8. {
9. // title of the card
10. Title = "Suthahar Jegatheesan",
11. //subtitle of the card
12. Subtitle = "Microsoft certified solution developer",
13. // navigate to page , while tab on card
14. Tap = new CardAction(ActionTypes.OpenUrl, "Learn More", value: "http://www.devenvexe.com"),
15. //Detail Text
16. 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",
17. // smallThumbnailCard Image
18. Images = new List<CardImage> { new CardImage("http://csharpcorner.mindcrackerinc.netdna-cdn.com/UploadFile/AuthorImage/jssuthahar20170821011237.jpg") },
19. // list of buttons
20. 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/") }
21. };
23. return thumbnailCard.ToAttachment();
24. }

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

Run Bot Application

The emulator is a desktop application that lets us test and debug our bot on the localhost. Now, you can click on "Run the application" in Visual Studio and execute it 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
You can 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 "Connect".

Summary

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