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

Herocard And Thumbnailcard In Bot Framework






Example Of Hero Card




  1. Create a new file "HeroCardDemo.cs".
  2. Add the code given below in the file.
  3. 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();
        }
      }
    }


  4. In the "MessagesController.cs", write the following code in the "Post" method.
  5. 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;
    }


  6. Now, run the bot.
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