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?
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
}
]
}
I created a bot (nodejs server) for teams - through bot framework.
I'm trying to send adaptive card that I created through: adaptive cards designer
and I get error :
{"code":"BadArgument","message":"ContentType of an attachment is not set"}
The request body :
{
"type": "message",
"from": {
"id": "xxxxxx"
},
"conversation": {
"id": "xxxxxx"
},
"recipient": {
"id": "xxxxx"
},
"replyToId": "xxxxx",
"text": "some text",
"attachments": [
{
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.2",
"body": [
{
"type": "TextBlock",
"text": "some text"
},
{
"type": "Input.Date",
"separator": true
}
]
}
]
}
I would appreciate help
When adding attachments you'll want to set the contentType and content properties of the attachment object.
https://learn.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-connector-api-reference?view=azure-bot-service-4.0#attachment-object
{
"type": "message",
"from": {
"id": "xxxxxx"
},
"conversation": {
"id": "xxxxxx"
},
"recipient": {
"id": "xxxxx"
},
"replyToId": "xxxxx",
"text": "some text",
"attachments": [
{
"contentType": "application/vnd.microsoft.card.adaptive",
"content": {
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.2",
"body": [
{
"type": "TextBlock",
"text": "some text"
},
{
"type": "Input.Date",
"separator": true
}
]
}
}
]
}
As per the comments above, this is a pro-active message, but using the Bot Framework libraries are a much better approach than trying to call the bot endpoints directly (I wondered if, by "REST", you meant the Bot Framework endpoint or the Graph Api, but in either case the Bot Framework is easier to work with for proactive messages).
Please see specifically this sample for how to do this in Node.
How can I get the value when user clicks the button? I have this example card.
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"speak": "<s>Your meeting about \"Adaptive Card design session\"<break strength='weak'/> is starting at 12:30pm</s><s>Do you want to snooze <break strength='weak'/> or do you want to send a late notification to the attendees?</s>",
"body": [
{
"type": "TextBlock",
"text": "Adaptive Card design session",
"size": "large",
"weight": "bolder"
},
{
"type": "TextBlock",
"text": "Conf Room 112/3377 (10)",
"isSubtle":true
},
{
"type": "TextBlock",
"text": "12:30 PM - 1:30 PM",
"isSubtle":true,
"spacing":"none"
},
{
"type": "TextBlock",
"text": "Snooze for"
},
{
"type": "Input.ChoiceSet",
"id": "snooze",
"style":"compact",
"value": "5",
"choices": [
{
"title": "5 minutes",
"value": "5",
"isSelected": true
},
{
"title": "15 minutes",
"value": "15"
},
{
"title": "30 minutes",
"value": "30"
}
]
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Snooze",
"data": { "x": "snooze" }
},
{
"type": "Action.Submit",
"title": "I'll be late",
"data": { "x": "late" }
}
]
}
The example is here: http://adaptivecards.io/samples/CalendarReminder.html
How to access it in the session.message object?
I figured it out. In this case it is the x, so to reply it back it would be:
if (session.message && session.message.value) {
// A Card's Submit Action obj was received
session.send(session.message.value.x)
}
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.