4

Can some one please help me out in displaying the data table format in BOT as below

enter image description here

Jim G.
  • 15,141
  • 22
  • 103
  • 166
Vigneswaran A
  • 562
  • 7
  • 18

1 Answers1

11

You can leverage the ColumeSet in adaptive card to render a table like card message.

E.G, the following json content will be renderred a table like card message:

{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "items": [
                        {
                            "type": "TextBlock",
                            "weight": "bolder",
                            "text": "Name"
                        },
                        {
                            "type": "TextBlock",
                            "separator":true,
                            "text": "Apple"
                        },{
                            "type": "TextBlock",
                            "separator":true,
                            "text": "Kiwi"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "items": [
                        {
                            "type": "TextBlock",
                            "weight": "bolder",
                            "text": "Tag"
                        },
                        {
                            "type": "TextBlock",
                            "separator":true,
                            "text": "Fruit"
                        },{
                            "type": "TextBlock",
                            "separator":true,
                            "text": "Fruit"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "items": [
                        {
                            "type": "TextBlock",
                            "weight": "bolder",
                            "text": "Price"
                        },
                        {
                            "type": "TextBlock",
                            "separator":true,
                            "text": "2"
                        },{
                            "type": "TextBlock",
                            "separator":true,
                            "text": "1"
                        }
                    ]
                }
            ]
        }
    ]
}

in WebChat channel, it looks like:

enter image description here

Gary Liu
  • 13,758
  • 1
  • 17
  • 32
  • any way to do the same thing in MessageCard format because connectors doesn't support Adaptive Card format – A l w a y s S u n n y Jun 25 '20 at 13:43
  • Office 365 connectors only support the legacy **MessageCard** format for cards. They do not support the **Adaptive Card** format. I want to send a message using webhook url and body content as a table format. any way to do it?. when I send adaptive formate it shows blank body content on my MS msg – A l w a y s S u n n y Jun 25 '20 at 13:46
  • Or may I need to use this way? https://stackoverflow.com/a/60201303/1138192 which I don't like personally to send table inside the **text** – A l w a y s S u n n y Jun 25 '20 at 13:49
  • @Gary, there's no vertical and horizontal scroll for adaptive cards when using it on MS Teams. Please, how can I add a scroll bar to an adaptive card? – Bloggrammer Feb 27 '21 at 19:57