Articles → MICROSOFT BOT FRAMEWORK → Herocard And Thumbnailcard In Bot Framework

Herocard And Thumbnailcard In Bot Framework

In this article, we will create the hero card and thumbnail card.

Example Of Hero Card

In this example, we will perform these actions

Create a new file "HeroCardDemo.cs".
Add the code given below in the file.

using Microsoft.Bot.Builder.Dialogs;
using Microsoft.Bot.Connector;
using System;
using System.Collections.Generic;
using System.Threading.Tasks;

namespace Bot_Application1.Dialogs { [Serializable]
  public class HeroCardDemo: IDialog < object > {
    public async Task StartAsync(IDialogContext context) {
      context.Wait(MessageReceivedAsync);
    }

    private async Task MessageReceivedAsync(IDialogContext context, IAwaitable < IMessageActivity > result) {
      var message = context.MakeMessage();
      var activity = await result;
      message.Attachments.Add(GetCard(activity.Text));
      await context.PostAsync(message);

    }

    private Attachment GetCard(string title) {
      string imageUrl = "http://gyansangrah.com/ArticleImages/using_snap_lines_in_visual_studio_to_align_controls_for_windows_application_one.jpg";
      string docsUrl = "http://docs.microsoft.com";

      var heroCard = new HeroCard() {
        Title = title,
        Subtitle = "My Subtitle",
        Text = "MyText",
        Images = new List < CardImage > {
          new CardImage(imageUrl)
        }
      };

      return heroCard.ToAttachment();
    }
  }
}

In the "MessagesController.cs", write the following code in the "Post" method.

public async Task < HttpResponseMessage > Post([FromBody] Activity activity) {
  if (activity.Type == ActivityTypes.Message) {
    await Conversation.SendAsync(activity, () =>new Dialogs.HeroCardDemo());
  }
  else {
    HandleSystemMessage(activity);
  }
  var response = Request.CreateResponse(HttpStatusCode.OK);
  return response;
}

Now, run the bot.

Picture showing the hero card in the Microsoft Bot Framework

Click to Enlarge

To add the button in the hero card, use the following code.

 string imageUrl = "http://gyansangrah.com/ArticleImages/using_snap_lines_in_visual_studio_to_align_controls_for_windows_application_one.jpg";

 var buttons = new List < CardAction > ();

 buttons.Add(new CardAction() {
   Title = "Veg Menu",
     Value = "veg",
     Type = ActionTypes.ImBack
 });

 var heroCard = new HeroCard() {
   Title = "Welcome",
     Subtitle = "My Subtitle",
     Text = "MyText",
     Images = new List < CardImage > {
       new CardImage(imageUrl)
     },
     Buttons = buttons
 };

 await turnContext.SendActivityAsync(MessageFactory.Attachment(heroCard.ToAttachment()), cancellationToken);

When the user clicks on the button, the value is displayed in the chat box.

Picture showing the hero card with buttons

Click to Enlarge

Thumbnail Card

In the previous code, change the "HeroCard" to the "ThumbnailCard" and you will get the following output.

using Microsoft.Bot.Builder.Dialogs;
using Microsoft.Bot.Connector;
using System;
using System.Collections.Generic;
using System.Threading.Tasks;

namespace Bot_Application1.Dialogs { [Serializable]
  public class HeroCardDemo: IDialog < object > {
    public async Task StartAsync(IDialogContext context) {
      context.Wait(MessageReceivedAsync);
    }

    private async Task MessageReceivedAsync(IDialogContext context, IAwaitable < IMessageActivity > result) {
      var message = context.MakeMessage();
      var activity = await result;

      message.Attachments.Add(GetCard(activity.Text));
      message.Attachments.Add(GetCard(activity.Text));
      message.Attachments.Add(GetCard(activity.Text));
      await context.PostAsync(message);

    }

    private Attachment GetCard(string title) {
      string imageUrl = "http://gyansangrah.com/ArticleImages/using_snap_lines_in_visual_studio_to_align_controls_for_windows_application_one.jpg";
      string docsUrl = "http://docs.microsoft.com";

      var heroCard = new ThumbnailCard() {
        Title = title,
        Subtitle = "My Subtitle",
        Text = "MyText",
        Images = new List < CardImage > {
          new CardImage(imageUrl)
        }
      };

      return heroCard.ToAttachment();
    }
  }
}

The output is

Picture showing the thumbnail card in the Microsoft Bot Framework

Click to Enlarge

Change The Layout Type

In the "ThumbnailCard", we can change the layout using the following code

var message = context.MakeMessage();
var activity = await result;
message.AttachmentLayout = AttachmentLayoutTypes.Carousel;
message.Attachments.Add(GetCard(activity.Text));
message.Attachments.Add(GetCard(activity.Text));
message.Attachments.Add(GetCard(activity.Text));
await context.PostAsync(message);

Output

Picture showing the change in layout of the thumbnail card in the Microsoft Bot Framework

Click to Enlarge

Posted By -	Karan Gupta

Posted On -	Friday, October 23, 2020

Updated On -	Thursday, December 31, 2020

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**