Articles → MICROSOFT BOT FRAMEWORK → HeroCard and ThumbnailCard in Bot framework

HeroCard and ThumbnailCard in Bot framework






Example of hero card








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();
    }
  }
}




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;
}




Picture showing the hero card in the Microsoft Bot Framework

Click to Enlarge



 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);




Picture showing the hero card with buttons

Click to Enlarge


Thumbnail card




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();
    }
  }
}




Picture showing the thumbnail card in the Microsoft Bot Framework

Click to Enlarge


Change the layout type




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/FeedbackCharacters remaining 250