How to get Microsoft Teams card to display correctly

Question

I'm building a Microsoft Teams app with the botbuilder in typescript. Everything is working fine except the UI is not matching exactly what I want. Im using an adaptive card to render my responses to the user and typically the adaptive card has a top border (seen below is black) but mine doesnt have it and i'm trying to figure out how i can make it work.

I want my card to have the black border on top as shown here for in github's bot: See image

This is what mine currently shows: see image

below is my code to render the card. What i'm i doing wrong?

  await context.sendActivity({ attachments: [
    CardFactory.adaptiveCard({
      "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
      "version": "1.0",
      "msteams": {
        "width": "Full"
      },
      "body": [
        {
          "type": "TextBlock",
          "text": "My card doesnt have the border.",
          "wrap": true
        }
      ]
    })
  ] });

you cannot directly add border to adaptive card. You can make use of accentColor to give color to background for your outline icons. You have to add [accentColor](https://learn.microsoft.com/en-us/microsoftteams/platform/resources/schema/manifest-schema#accentcolor) property in manifest file. Please also refer https://stackoverflow.com/questions/72873499/adding-a-colored-strip-on-the-top-of-adaptive-card — Meghana-MSFT, Oct 20 '22 at 11:11
Hi @Meghana-MSFT according to the ms teams docs the accentColor is used for the outline icons. I wonder how other apps were able to get that color strip on their cards, there doesnt seem to be any documentation from Microsoft about this at all. Do you know of any other way this can be done? — CKT, Oct 20 '22 at 15:18
Currently there is no way to directly add borders to cards. It is not possible for 3rd party apps. You can suggest this feature on [Teams feedback portal](https://feedbackportal.microsoft.com/feedback/forum/ad198462-1c1c-ec11-b6e7-0022481f8472) — Meghana-MSFT, Oct 21 '22 at 04:58
Thanks for sharing the feedback portal @Meghana-MSFT, i'm curious if this is not currently possible then how did other ms teams integration apps like github and confluence have it? — CKT, Oct 21 '22 at 14:33
You cannot add borders on all sides, but you can use accent color as I mentioned above, and it will add a color strip as shown here [blue color at the top] - https://i.stack.imgur.com/jJdfT.png — Meghana-MSFT, Oct 21 '22 at 16:30

score 0 · Answer 1 · answered Oct 19 '22 at 17:38

0

I figured it out and it was a simple fix. The code now looks like this.

"body": [
    {
      "type": "TextBlock",
      "text": "My card doesnt have the border.",
      "wrap": true,
      "style": {
        "borderTopWidth": 1,
        "borderTopColor": "#000"
      }
    }
  ] });

answered Oct 19 '22 at 17:38

Olivia Rodrigo Stan

1
3

hmm I tried adding `styles` but it didn't work for me. Can you share additional lines of code for the full json you used? – CKT Oct 19 '22 at 17:47
Explain details about the code and also which adaptive version will support this type of implementation. – Rajeesh Menoth Oct 21 '22 at 04:59

score 0 · Accepted Answer · answered Oct 25 '22 at 02:31

I finally figured out the solution. I had to the office 365 connector card to get that color strip. FINALLY!

Here's the code sample for Nodejs/typescript:

CardFactory.o365ConnectorCard({
      "title": "card title",
      "text": "card text",
      "summary": "O365 card summary",
      "themeColor": "#E67A9E",
      "sections": [
          {
              "text": "This is some <strong>bold</strong> text"
          },
          {
              "text": "This is some <em>italic</em> text"
          },
          {
              "text": "This is some <strike>strikethrough</strike> text"
          },
          {
              "text": "<h1>Header 1</h1>\r<h2>Header 2</h2>\r <h3>Header 3</h3>"
          },
          {
              "text": "bullet list <ul><li>text</li><li>text</li></ul>"
          },
          {
              "text": "ordered list <ol><li>text</li><li>text</li></ol>"
          },
          {
              "text": "hyperlink <a href=\"https://www.bing.com/\">Bing</a>"
          },
          {
              "text": "embedded image <img src=\"https://aka.ms/Fo983c\" alt=\"Duck on a rock\"></img>"
          },
          {
              "text": "preformatted text <pre>text</pre>"
          },
          {
              "text": "Paragraphs <p>Line a</p><p>Line b</p>"
          },
          {
              "text": "<blockquote>Blockquote text</blockquote>"
          }
       ]
  })

How to get Microsoft Teams card to display correctly

2 Answers2

Linked