Search code examples
.net-corebotframeworkchatbotmicrosoft-teams

How to build a List Card having scroll bar in Teams bot similar as Who bot?


I am developing MS Teams bot using .NET Core. Who bot from Microsoft has this List card with scroll bar.

List card sample image

I didn't find the code to implement it just like we have Thumbnail card, Hero card, etc. Please help and thanks in advance.


Solution

  • Don't get hung up on whether or not there's a built-in C# class that represents the schema you're using. There are many REST API's and JSON schemas out there and not all of them are going to have C# classes prebuilt into NuGet packages for you to install. Each Bot Framework SDK ultimately uses the Bot Framework REST API behind the scenes, so every activity you send gets converted to JSON strings anyway. When it comes to creating C# objects that correspond to JSON, here are some options:

    1. You could create your own C# classes
    2. You could read the JSON as a string and parse it into a JObject
    3. You could create a JObject manually using C# object initialization

    Everything you need to know about list cards is in the documentation Manish already linked to. Here's some sample code I used to send a list card using option 2:

    var json = File.ReadAllText("Resources/listCard.json");
    
    var attachment = new Attachment
    {
        ContentType = "application/vnd.microsoft.teams.card.list",
        Content = JObject.Parse(json),
    };
    
    await turnContext.SendActivityAsync(MessageFactory.Attachment(attachment));
    

    I created a JSON file based on the JSON example from the docs. Note that you can't just copy the whole example and expect it to work because it's an attachment object and you want just the card. You want to use just the "content" from that example, so it would look like this:

    {
      "title": "Card title",
      "items": [
        . . .
      ]
    }