I have a simple adaptive card which works well in the web chat app, this is the card
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "Hello!",
"weight": "bolder",
"isSubtle": true
},
{
"type": "TextBlock",
"text": "What can I do for you?",
"wrap": true
}
]
}
]
}
]
}
],
"actions": [
{
"type": "Action.ShowCard",
"title": "Buy",
"card": {
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"text": "What do you want to buy?",
"weight": "bolder"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Ticket",
"data": {
"action_button": "buy_ticket"
}
}
]
}
},
{
"type": "Action.ShowCard",
"title": "Check",
"card": {
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"text": "Nothing to check",
"weight": "bolder"
}
]
}
}
]
}
you can see it in this link http://adaptivecards.io/visualizer/index.html?hostApp=Skype by pasting the code there.
The webchat works fine as you can see here:
but the skype does not even render the Action.Submit button.
It is supposed to work as Skype is supported for this card type.
I've also tested it on Android and it has the same bug.
UPDATE:
How can I create a card like this? this is a skype bot.
Skype does not currently fully support adaptive cards so this behavior is expected. While some features of adaptive cards may work in skype they are not fully supported so strange behaviors such as these are expected. You can find a list of channels that do and do not support adaptive cards here.
Related
I'm using
Microsoft Teams
Adaptive Cards 1.4
Node.js Bot Framework SDK 4.14.1
I tried the following URL sample with the full-width property.
https://learn.microsoft.com/en-us/microsoftteams/platform/task-modules-and-cards/cards/cards-reference#example-of-a-carousel-collection
But, the property doesn't work.
Is this possible?
My code:
await context.sendActivity({
attachmentLayout: "carousel",
attachments: [
{
"contentType": "application/vnd.microsoft.card.adaptive",
"content": {
"type": "AdaptiveCard",
"version": "1.4",
"msteams": {
"width": "Full"
},
"body": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"size": "extraLarge",
"weight": "bolder",
"text": "Welcome to Employee Connect",
"height": "stretch"
},
{
"type": "TextBlock",
"size": "medium",
"weight": "bolder",
"text": "Add events to your calendar",
"height": "stretch"
},
{
"type": "TextBlock",
"weight": "bolder",
"text": "The bot can send \r\rnotification to remind \r\ryou about the latest \r\revents and trainings.",
"wrap": true,
"height": "stretch"
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [],
"height": "stretch"
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [],
"height": "stretch"
}
]
}
]
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Let's get started"
}
]
}
},
{
"contentType": "application/vnd.microsoft.card.adaptive",
"content": {
"type": "AdaptiveCard",
"version": "1.4",
"msteams": {
"width": "Full"
},
"body": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"size": "large",
"weight": "bolder",
"text": "Employee connect"
},
{
"type": "TextBlock",
"text": "The bot can send notifications \r\rto remind you about the latest \r\r events and training",
"wrap": true,
"maxWidth": 2
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [],
"height": "stretch"
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [],
"height": "stretch"
}
]
}
]
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Let's get started"
}
]
}
},
{
"contentType": "application/vnd.microsoft.card.adaptive",
"content": {
"type": "AdaptiveCard",
"version": "1.4",
"msteams": {
"width": "Full"
},
"body": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"size": "large",
"weight": "bolder",
"text": "Employee Connect final"
},
{
"type": "TextBlock",
"weight": "bolder",
"text": "Create and manage your tasks",
"wrap": true
},
{
"type": "TextBlock",
"text": "The app identifies all your pending tasks \r\r and helps you manage everything at \r\r one place.",
"wrap": true
},
{
"type": "TextBlock",
"weight": "bolder",
"text": "Try these commands \r\r- Pending Submissions \r\r- Pending Approvals- My Tools",
"wrap": true,
"height": "stretch"
}
]
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Let's get started"
}
]
}
}
],
});
Result:
We tried to repro this at our end on web client and we were able to use full width adaptive cards in a carousel.
However we see the above issue is repro'ing on desktop, adaptive card is not shown in full width. We have raised it internally.
Desktop :
Web client:
I've reported this issue a while ago to Microsoft, something about the same time this topic was created. They've done a hotfix to have it aligned with an older version (?) but will fix the actual issue later on. You can track it on the following URL where they keep us updated:
https://github.com/MicrosoftDocs/msteams-docs/issues/4394
(I couldn't just add a reply because my reputation is not high enough yet.)
I have run into a use case where I need to design a card with 3 option buttons which are clickable but do not Postbank directly. Only when user clicks on submit button, the selected option button values are posted back.
how to achieve it in azure bot framework using rich cards?
This is possible and please find the code below, you can always pass data property inside your Submit button. In my case it is for the msteams channel, and it is available for different channel too. The data property contains another key called Value, which contains object of different key value pairs that you can pass. This will pass the data to the channel and you can always set a display text for the message or you can leave blank.
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.2",
"body": [
{
"type": "Container",
"$data": "${$root}",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "TextBlock",
"text": "You can click here to search KB article for this topic on ServiceNow",
"wrap": true
}
]
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "278px",
"items": [
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"title": "Search KB articles",
"data": {
"msteams": {
"type": "messageBack",
"displayText": "",
"text": "search-kb-article",
"value": {
"id": "search-kb-article",
"action": "searchKBArticleAction",
"keyword": "${$data.LastMessage}"
}
}
}
}
]
}
]
},
{
"type": "Column",
"width": "30px",
"items": [
{
"type": "Image",
"url": "https://ipnq4wdas01.azurewebsites.net/Images/home.png",
"selectAction": {
"type": "Action.Submit",
"data": {
"msteams": {
"type": "messageBack",
"displayText": "",
"text": "Home",
"value": {
"id": "Home",
"action": "menuAction",
"value": "Home"
}
}
}
}
}
]
}
]
}
],
"style": "emphasis",
"bleed": true
}
]
}
We are using botframework webchat for developing a bot in teams as well as web via directline channel. Everything is fine in web and teams but when coming to teams in mobile devices, adaptive cards formatting is not working as same as web.
[![enter image description here][3]][3]
{
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "Container",
"id" : "qna_card",
"items": [
{
"type": "TextBlock",
"text": ans[1],
"horizontalAlignment": "Left",
"color": "Accent",
"weight": "Bolder",
"size": "Medium"
},
{
"type": "TextBlock",
"text": ans[2],
"wrap": true,
"color": "Default"
},
{
"type": "ActionSet",
"actions": [
{
"type": "Action.OpenUrl",
"title": read_more,
"url": ans[3],
"style": "positive"
}
],
"horizontalAlignment": "Center"
}
]
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"id" : "qna_card_id"
}
I'm trying to migrate some of our reports from slack to Microsoft Teams.
We are currently posting images and csv files to slack from an Azure Function.
Early on I noticed that I cannot post images directly but I can mention their URLs in the card and a preview displays and clicking on it should take me to the actual image.
I started out thinking it would be pretty straightforward. And i went ahead and started with the webhooks option. The only problem is that the it supports only 2 types of cards and i have virtually no control over the image size and other properties. And if I'm to use the Adaptive Card(any other card), then I would have to ditch webhooks and make use of the Graph API, which I've already started.
Then I started noticing that the images disappear, as in they just not get displayed anymore. I believe that this could be an authentication issue between sharepoint/ teams as mentioned in this answer -
Adaptive cards for MS Teams - images displaying in web interface but not desktop application
Teams in browser shows the images but the desktop app doesn't. Also they aren't displaying in my mobile app for teams too.
I have already modified my existing application to send a copy of the image/file (whatever it creates) to a folder inside the sharepoint which is the back end to this channel in teams (used sharepoint API v1)
And I intend to post a thumbnail card with a url to the images/file in Sharepoint.
It would really help if someone could help me with the below :
Anyway to fix the authentication issue between Sharepoint ~ Teams
Alternate options to send an image, if 1. is not feasible.
Please help :)
Edit :
Adding card JSON :
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "Sample Heading",
"weight": "bolder",
"size": "medium"
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "Image",
"url": "https://upload.wikimedia.org/wikipedia/en/e/ea/FlowersForAlgernon.jpg",
"size": "medium"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "Report1",
"text": "Matt Hidinger",
"weight": "bolder",
"wrap": true
},
{
"type": "TextBlock",
"spacing": "none",
"text": "Created {{DATE(2020-02-14T06:08:39Z,SHORT)}}",
"isSubtle": true,
"wrap": true
}
]
}
]
}
]
}
]
}
Adaptive cards are now supported on Incoming webhook. For sending adaptive cards using Incoming Webhooks, You need to follow the Bot Activity Message Type format: format. where you can add the card json to the content field.
Example:
Post Web-hook URL
Request Body:
{
"type": "message",
"attachments": [
{
"contentType": "application/vnd.microsoft.card.adaptive",
"content": {
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "Sample Heading",
"weight": "bolder",
"size": "medium"
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "Image",
"url": "https://upload.wikimedia.org/wikipedia/en/e/ea/FlowersForAlgernon.jpg",
"size": "medium"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "Matt Hidinger",
"weight": "bolder",
"wrap": true
},
{
"type": "TextBlock",
"spacing": "none",
"text": "Created {{DATE(2020-02-14T06:08:39Z,SHORT)}}",
"isSubtle": true,
"wrap": true
}
]
}
]
}
]
}
]
}
}
]
}
Result:
I am displaying some data in using adaptive card in BOT emulator,I want to add one comment section there.I tried this way:
{
"type": "Action.ShowCard",
"title": "Comment",
"card": {
"type": "AdaptiveCard",
"body": [
{
"type": "Input.Text",
"id": "test",
"isMultiline": true,
"placeholder": "Enter your comment",
}
],
"actions": [
{
"type": "Action.Submit",
"id":"submit",
"title": "OK",
"data":
{
"test":""
}
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}
}
]
but not getting any output when click on OK action.How can we do it?