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)
}
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 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?
Can some one please help me out in displaying the data table format in BOT as below
You can leverage the ColumeSet in adaptive card to render a table like card message.
E.G, the following json content will be renderred a table like card message:
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"weight": "bolder",
"text": "Name"
},
{
"type": "TextBlock",
"separator":true,
"text": "Apple"
},{
"type": "TextBlock",
"separator":true,
"text": "Kiwi"
}
]
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"weight": "bolder",
"text": "Tag"
},
{
"type": "TextBlock",
"separator":true,
"text": "Fruit"
},{
"type": "TextBlock",
"separator":true,
"text": "Fruit"
}
]
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"weight": "bolder",
"text": "Price"
},
{
"type": "TextBlock",
"separator":true,
"text": "2"
},{
"type": "TextBlock",
"separator":true,
"text": "1"
}
]
}
]
}
]
}
in WebChat channel, it looks like:
I am trying to implement AdaptiveCard into one of my dialogs using node.js. However once I run the emulator I get the following message instead of rendered AdaptiveCard:
[File of type 'application/vnd.microsoft.card.adaptive'].
Can anyone tell me what can be the problem?
I am running on Ubuntu 16.04, MBF Emulator v.3.5.31-alpha, microsoft-adaptivecards v.0.6.1.
Here is code from inside of one of my dialogs:
var msg = new builder.Message(session)
.addAttachment({
contentType: "application/vnd.microsoft.card.adaptive",
content: {
type: "AdaptiveCard",
body: [
{
"type": "TextBlock",
"text": msg_text,
},
{
"type": "Input.ChoiceSet",
"id": "myColor4",
"isMultiSelect": true,
"value": "1",
"style": "expanded",
"choices": [
{
"title": "Red",
"value": "1",
"isSelected": true
},
{
"title": "Green",
"value": "2"
},
{
"title": "Blue",
"value": "3",
"isSelected": true
}
]
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Sent",
"data": {
"myProperty": 12
}
}
],
}
});
session.send(msg);
This is detailed response, it contains all elements of the AdaptiveCard that I declared(but still it does not render):
{
"type": "message",
"attachments": [
{
"contentType": "application/vnd.microsoft.card.adaptive",
"content": {
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"text": "What color do you want?"
},
{
"type": "Input.ChoiceSet",
"id": "myColor4",
"isMultiSelect": true,
"value": "1",
"style": "expanded",
"choices": [
{
"title": "Red",
"value": "1",
"isSelected": true
},
{
"title": "Green",
"value": "2"
},
{
"title": "Blue",
"value": "3",
"isSelected": true
}
]
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Sent",
"data": {
"myProperty": 12
}
}
]
}
}
],
"locale": "en-US",
"localTimestamp": "2017-09-17T19:21:17+02:00",
"from": {
"id": "default-bot",
"name": "Bot"
},
"recipient": {
"id": "default-user"
},
"inputHint": "acceptingInput",
"id": "heam84b9dn5b",
"replyToId": "71j1d6mbmk3l",
"channelId": "emulator",
"timestamp": "2017-09-17T17:21:17.379Z",
"conversation": {
"id": "fdikc23llm5"
}
}