CODEWITHSUNDEEP
botframeworkmicrosoft-teamsazure-bot-service
user458622
user458622

Reputation: 25

Layout view in MS Teams is completely different from Azure portal Test in Webchat console, how can I fix it?

I created a bot which I integrated with MS Teams channel. The layout view as shown in the WebChat window and emulator is perfect which is exactly what I need but when I deployed my bot with MS Teams, the view looks messed up and very cluttered. Any advice how to fix this?

MS Teams view layout

Azure portal Webchat console view

Please excuse my shortcomings as I am a new user to Stackoverflow and don't know how to address questions but if there are any suggestions for this issue, those would be greatly appreciated. Thanks.

Upvotes: 0

Views: 53

Answers (1)

tdurnford
tdurnford

Reputation: 3712

I would recommend using markdown in an Adaptive Card.

Bot Framework SDK v4 (Node)

await context.sendActivity({ attachments: [CardFactory.adaptiveCard({
  "type": "AdaptiveCard",
  "version": "1.0",
  "body": [
      {
          "type": "TextBlock",
          "text": "Top Options:  \nOption 1: [https://microsoft.com](https://microsoft.com)  \nOption 2: [https://microsoft.com](https://microsoft.com)  \nOptions 3: [https://microsoft.com](https://microsoft.com)"
      }
  ],
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
})] });

Teams Screenshot enter image description here

Web Chat Screenshot

enter image description here

Note, rendering behaviors do differ across different platforms.

Hope this helps!

Upvotes: 1

Related Questions