Questions tagged [adaptive-cards]

Questions regarding the implementation and use of Adaptive Cards for the Microsoft Bot Builder

Adaptive Cards Overview

Adaptive Cards are an open card exchange format enabling developers to exchange UI content in a common and consistent way.

How they work

Card Authors describe their content as a simple JSON object. That content can then be rendered natively inside a Host Application, automatically adapting to the look and feel of the Host.

For example, Contoso Bot can author an Adaptive Card through the Bot Framework, and when delivered to Skype, it will look and feel like a Skype card. When that same payload is sent to Microsoft Teams, it will look and feel like Microsoft Teams. As more host apps start to support Adaptive Cards, that same payload will automatically light up inside these applications, yet still feel entirely native to the app.

Users win because everything feels familiar. Host apps win because they control the user experience. And Card Authors win because their content gets broader reach without any additional work.

Get Started

Documentation: adaptivecards.io/documentation/

Source Code: github.com/Microsoft/adaptivecards

Interactive Visualizer: adaptivecards.io/visualizer

Schema Explorer: adaptivecards.io/explorer

Example: learn.microsoft.com/adding-adaptive-card

929 questions
19
votes
5 answers

Microsoft Teams Webhook Generating 400 for Adaptive Card

I have a functioning webhook to a Teams channel to which I can successfully post messages. I am now trying to post an adaptive card to the webhook. Using Postman and performing a Post to https://outlook.office.com/webhook/xyz, with Content-Type…
8
votes
6 answers

Use Adaptive Cards Designer, then replace sample values with real ones in C#

The goal I want to create (and then edit) Adaptive Cards designs with the Adaptive Cards Designer and use them in my bot. The steps 1) I created my Adaptive card in the Designer, with sample values, and copied its JSON representation. For…
Artemious
  • 1,980
  • 1
  • 20
  • 31
7
votes
4 answers

Increase the width of Adaptive Card for MS Teams channel

I have an Adaptive Card with 4 buttons on it, but the issue is that my 4th button is going over to the next line. I want to fit all the buttons in a single row, so is there any way i can increase the width of the Adaptive Card to align the buttons…
Mayuresh Jaiswal
  • 297
  • 3
  • 21
5
votes
1 answer

Does Adaptive Cards Templating work in Composer?

I want to add buttons to an Adaptive Card like so: "actions": [ { "$data": "${collection}", "type": "Action.Submit", "title": "${prop1}", "data": { "value": "${prop2}" …
Martín La Rosa
  • 790
  • 4
  • 17
5
votes
2 answers

Why does the width of adaptive cards in Microsoft Teams squish the message horizontally

When posting adaptive cards to Microsoft Teams from Flow, the message appears to be squished to about 50% width. It doesn't expand to fit the message container in Teams. Squished Adaptive Card
5
votes
0 answers

3rd party authentication flow on Microsoft Teams App

I'm trying to achieve some results similar to what Asana App on Microsoft Teams has, when you paste a link from Asana their app/bot process the link and return a preview (link unfurling) but before that the app ask to login or sign up. I'd like to…
5
votes
2 answers

Can we add text field dynamically

I've created an adaptive card(using json) in my chatbot that takes input from users. I want to add a button that enables the user to add a new text field every time the user clicks on the insert field. (i.e., the user can click on insert button to…
Priya G
  • 63
  • 1
  • 5
5
votes
1 answer

Microsoft flow adaptive card to mention teams user in teams

I'm creating a Microsoft flow to mention a user within an Adaptive card posted by the Flow bot within teams. This is the action I'm trying to use This is a simplified version of my JSON to do this { "type": "AdaptiveCard", "body": [ { …
Java Devil
  • 10,629
  • 7
  • 33
  • 48
5
votes
1 answer

Adaptive Cards Submit actions

I have generated an adaptive card using JSON format with two buttons submit and cancel which are returning a "messageBack" message as submit and cancel respectively. I am using C# to access the reply but I am not able to figure out how to access the…
Shubh Mehta
  • 51
  • 1
  • 5
5
votes
1 answer

Microsoft Bot Framework WebChat: Disable AdaptiveCards submit buttons of previous message

How to disable input/submit button actions in the previous conversation of BotChat - AdaptiveCards in the Microsoft Bot Framework (C#)
5
votes
1 answer

How to set the width of an adaptive card

Adaptive cards are fairly narrow in most channels - in web chat, for example. Is there any way to force the card to show the same width as the standard messages?
Jason Sypkens
  • 168
  • 1
  • 10
5
votes
1 answer

AdaptiveCard: how to use in Node.js

I'm trying to use AdaptiveCards npm package on NodeJS to generate programmatically the card and I don't see how to generate the JSON to pass to the message. So far, my code is fairly simple: session.send(new builder.Message(session).addAttachment({ …
sGambolati
  • 783
  • 8
  • 25
4
votes
0 answers

Adaptivecard Input.choicset field is not working in Teams channel

Issue: In Adaptive card there is a dropdown element (input.choiceset) which contains our application technician list (users who are part of our application). This list will be used to assign the ticket to one of the technicians. When we use…
4
votes
1 answer

Push Notifications/Toasts Summary for Adaptive Cards on Microsoft Teams

I've built a few tools that send messages via webhooks to Microsoft Teams and I decided to switch to Adaptive Cards to make the messages sent a bit more easy to read and laid out, since Adaptive Cards can be stylised a lot more than the standard…
Steve
  • 271
  • 1
  • 6
4
votes
0 answers

Is Microsofts' adaptive cards natively supported in telegram?

Now that I got totally stuck with above mentioned question I hope that someone can bring some light into that topic. Looking into Microsofts documentation of their botframework one can see that telegram is one of many channels that it supports. But…
Andre
  • 63
  • 7
1
2 3
61 62