Microsoft Teams - multiselect in ms teams bot - botframework

How to implement multiselect in drop down list through adaptive cards to fill a form which contains the name of employees to select.
If not what are the other ways to implement multiselect in Ms Teams through bot.
Multiselect like this.

Check and build samples.
Check this sample Adaptive card
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.2",
"speak": "<s>Your meeting about \"Adaptive Card design session\"<break strength='weak'/> is starting at ${formatDateTime(start.dateTime, 'HH:mm')}pm</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": "${summary}",
"size": "Large",
"weight": "Bolder"
},
{
"type": "TextBlock",
"text": " ${location} ",
"isSubtle": true
},
{
"type": "TextBlock",
"text": "${formatDateTime(start.dateTime, 'HH:mm')} - ${formatDateTime(end.dateTime, 'hh:mm')}",
"isSubtle": true,
"spacing": "None"
},
{
"type": "TextBlock",
"text": "Snooze for"
},
{
"type": "Input.ChoiceSet",
"id": "snooze",
"value": "${reminders.overrides[0].minutes}",
"choices": [
{
"$data": "${reminders.overrides}",
"title": "${hours} hours",
"value": "${hours}"
},
{
"$data": "${reminders.overrides}",
"title": "${minutes} minutes",
"value": "${minutes}"
},
{
"$data": "${reminders.overrides}",
"title": "${seconds} seconds",
"value": "${seconds}"
}
],
"isMultiSelect": true
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Snooze",
"data": {
"x": "snooze"
}
},
{
"type": "Action.Submit",
"title": "I'll be late",
"data": {
"x": "late"
}
}
]
}

Related

Microsoft Teams Bot Crash when using ImageSet

We had previously a Microsoft Bot using C# and adaptive cards. We have some templates stored. Suddenly Microsoft Teams starts to freeze and crash whenever a button is clicked on an adaptive card.
After some investigation, I found that the ImageSet in the adaptive card is causing the crash. By removing it, everything works fine, and when adding it, it crashes again.
Here's a preview of the adaptive card I'm using:
{
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.4",
"body": [
{
"type": "ColumnSet",
"wrap": true,
"columns": [
{
"type": "Column",
"width": "auto",
"wrap": true,
"items": [
{
"type": "TextBlock",
"text": "Text",
"weight": "Bolder",
"size": "Medium",
"color": "Accent",
"wrap": true
},
{
"type": "TextBlock",
"text": "Random Text",
"weight": "Bolder",
"color": "Default",
"wrap": true
},
{
"type": "ColumnSet",
"$data": "${modules}",
"width": "stretch",
"columns": [
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "ImageSet",
"images": [
{
"type": "Image",
"size": "Medium",
"url": "${ModuleImage}"
}
]
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "FactSet",
"facts": [
{
"type": "TextBlock",
"text": "**${ModuleTitle}**",
"value": "**${ModuleTitle}**",
"wrap": true
},
{
"type": "TextBlock",
"text": "${ModuleDescription}",
"value": "${ModuleDescription}",
"wrap": true
},
{
"type": "TextBlock",
"text": "${ModuleDuration}",
"value": "${ModuleDuration}",
"wrap": true
}
]
}
]
}
]
}
],
"verticalContentAlignment": "Center"
}
]
}
],
"actions": [
{
"type": "Action.OpenUrl",
"title": "Go To Google",
"url": "https://www.google.com"
},
{
"type": "Action.Submit",
"title": "Click me for messageBack",
"data": {
"msteams": {
"type": "messageBack",
"displayText": "I want to schedule a date.",
"text": "text to bots",
"value": "{\"buttonValue\": \"ScheduleDate\"}"
}
}
}
]
}
So what's wrong with this template? Is it a bug or what?

Having trouble with AdaptiveCard Designer accepting card payload

I'm relatively new to this so please bare with me. I'm creating adaptive cards in PowerAutomate to post in Teams. I was previously using the built-in card designer in PowerAutomate but that's been deprecated (and consequently added weeks to my implementation as I'm severely struggling with Designer).
I've created a card in Designer, added it to my flow, and made changes as needed. I now need to troubleshoot some issues so I want to load it back into Designer. When I paste my payload back into the designer to refine it (the bottom left section), the app elements (main window) are not not always refreshing. Sometimes it does, sometimes it doesn't.
I could be doing something totally incorrect but what I'm doing has been working with moderate success up until recently where it works totally randomly.
Below is the code I'm trying to populate into designer. I usually find success when I paste this into the default template leaving the Sample Data as is. At the moment, nothing is happening when I do so.
{
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.3",
"body": [
{
"type": "TextBlock",
"size": "ExtraLarge",
"text": "Miami Warehouse",
"color": "Accent",
"isSubtle": true,
"weight": "Bolder"
},
{
"type": "TextBlock",
"text": "The packing slip for PO: #{outputs('Get_item')?['body/PO']} has been reviewed and processed. ",
"wrap": true,
"color": "Default"
},
{
"type": "TextBlock",
"text": "Let us know when you've inventoried the shipment.",
"wrap": true,
"color": "Attention",
"size": "Large",
"weight": "Bolder"
},
{
"type": "TextBlock",
"text": "Please update the package information below.",
"wrap": true
},
{
"type": "ActionSet",
"actions": [
{
"type": "Action.OpenUrl",
"title": "#{outputs('Get_item')?['body/Name']}",
"url": "#{outputs('Get_item')?['body/Link']}",
"id": "linktofile"
}
],
"id": "file"
},
{
"placeholder": "File Name",
"type": "Input.Text",
"id": "filename",
"spacing": "Medium",
"label": "File Name:",
"value": "#{outputs('Get_item')?['body/Name']}"
},
{
"type": "Input.Text",
"placeholder": "PO Number",
"id": "po",
"spacing": "Medium",
"label": "PO Number:",
"value": "#{outputs('Get_item')?['body/PO']}"
},
{
"type": "Input.Text",
"placeholder": "Client Name",
"id": "client",
"spacing": "Medium",
"label": "Client:",
"value": "#{outputs('Get_item')?['body/Client']}"
},
{
"type": "Input.Text",
"placeholder": "Project Name",
"id": "project",
"spacing": "Medium",
"label": "Project Name:",
"value": "#{outputs('Get_item')?['body/Project']}"
},
{
"type": "Input.ChoiceSet",
"choices": #{body('Select')},
"id": "projectmanager",
"value": "#{outputs('Get_item')?['body/Project_x0020_Manager']}",
"label": "Project Manager"
},
{
"type": "ColumnSet",
"columns": [
{
"width": "stretch",
"type": "Column",
"items": [
{
"type": "Input.Text",
"spacing": "None",
"placeholder": "Optional",
"id": "trackingnumber",
"label": "Tracking Number:",
"value": "#{outputs('Get_item')?['body/Tracking_x0020_Number']}"
}
]
},
{
"width": "stretch",
"type": "Column",
"items": [
{
"placeholder": "Optional",
"type": "Input.Text",
"spacing": "Medium",
"id": "carrier",
"label": "Carrier:",
"value": "#{outputs('Get_item')?['body/Carrier']}"
}
]
}
]
},
{
"type": "Input.Text",
"isMultiline": true,
"id": "notes",
"spacing": "Medium",
"label": "Description:",
"placeholder": "",
"value": ""
},
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"title": "SHIPMENT INVENTORIED",
"id": "inventoried"
}
]
}
]
}
This is probably due to JSON that you have provided is not valid
As you can see here it is showing error at Input.ChoiceSet if I make #{body('Select'} as string i.e. "#{body('Select'}" it doesn't give any error and I can see the preview of it.
This error you will get in Adaptive Card designer itself if you look closely, also there are multiple JSON validator available on web. Such as https://jsonlint.com/

Microsoft Teams Adaptive Card Input.ChoiceSet Apostrophe Rendered Differently

When I create an Adaptive Card for Microsoft Teams with an Input.ChoiceSet value and that value contains an apostrophe, Microsoft Teams OS X and web clients show ', the iOS and Android clients show the apostrophe (correct).
What can I do differently to get the Input.ChoiceSet value to render the apostrophe in every case?
Here's the card schema and a render below.
{
"type": "message",
"attachments": [
{
"contentType": "application/vnd.microsoft.card.adaptive",
"content": {
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "Command Center",
"size": "large",
"weight": "bolder"
},
{
"type": "TextBlock",
"text": "Please choose a scenario to submit."
},
{
"type": "Input.ChoiceSet",
"id": "scenario-id",
"style": "compact",
"isMultiSelect": false,
"value": "71ae62b1-f04e-11e9-b862-577308a243ca",
"choices": [
{
"value": "71ae62b1-f04e-11e9-b862-577308a243ca",
"title": "Foo's Bar"
},
{
"value": "16db3124-f42d-11e9-bde7-819811d8b810",
"title": "Second"
}
]
}
]
}
],
"actions": [
{
"type": "Action.Submit",
"id": "popup",
"title": "Continue...",
"data": {
"msteams": {
"type": "task/fetch"
}
}
}
]
}
}
]
}
Teams OS X and Teams Android Render
#MarkSingleWire Thanks for reporting this. We have raised a bug for this and we are looking into this internally.

Adaptive card column sizing not working in bot framework c#

I want to have 2 columns with 1st column having width 20% and other column to have width 80%, but it seems the size property is not getting applied to bot framework 3.0 in Microsoft Teams adaptive card. Below is the response i'm getting but still its getting divided on 50-50% size blocks.
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "0.5",
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"size": 1,
"items": [
{ "type": "Image",
"url": "https://pbs.twimg.com/profile_images/3647943215/d7f12830b3c17a5a9e4afcc370e3a37e_400x400.jpeg",
"size": "small",
"style": "person"
}
]
},
{
"type": "Column",
"width": 5,
"items": [
{
"type": "TextBlock",
"text": "Matt Hidinger",
"weight": "bolder",
"wrap": true
},
{
"type": "TextBlock",
"spacing": "none",
"text": "Created {{DATE(2017-02-14T06:08:39Z, SHORT)}}",
"isSubtle": true,
"wrap": true
}
]
}
]
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Submit"
}
]
} ```
The first column is (incorrectly) using a size property, but it should be width
This should achieve a 20/80 weight
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": 20,
"items": [
{
"type": "Image",
"url": "https://pbs.twimg.com/profile_images/3647943215/d7f12830b3c17a5a9e4afcc370e3a37e_400x400.jpeg",
"size": "Small",
"style": "Person"
}
]
},
{
"type": "Column",
"width": 80,
"items": [
{
"type": "TextBlock",
"text": "Matt Hidinger",
"weight": "Bolder",
"wrap": true
},
{
"type": "TextBlock",
"spacing": "None",
"text": "Created {{DATE(2017-02-14T06:08:39Z, SHORT)}}",
"isSubtle": true,
"wrap": true
}
]
}
]
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Submit"
}
]
}

Microsoft Adaptive Card - Column Size

Does anyone know what is a proper value to set for column size for adaptive card ?
Schema (http://adaptivecards.io/explorer/#Column) says
"auto", "stretch", or a number representing relative width of the
column in the column Set (Default:Auto)
but actually I've tried number, percentage, px, pt but none is working.
Thanks
If you have a look to this sample: http://adaptivecards.io/visualizer/?card=/samples/cards/Input%20Form.json
You will see that the format is a basic number:
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "0.5",
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"size": 2,
"items": [
{
"type": "TextBlock",
"text": "Tell us about yourself...",
"weight": "bolder",
"size": "large"
},
{
"type": "TextBlock",
"text": "We just need a few more details to get you booked for the trip of a lifetime!",
"isSubtle": true,
"wrap": true
},
{
"type": "TextBlock",
"text": "Don't worry, we'll never share or sell your information.",
"isSubtle": true,
"wrap": true,
"size": "small"
},
{
"type": "TextBlock",
"text": "Your name",
"wrap": true
},
{
"type": "Input.Text",
"id": "myName",
"placeholder": "Last, First"
},
{
"type": "TextBlock",
"text": "Your email",
"wrap": true
},
{
"type": "Input.Text",
"id": "myEmail",
"placeholder": "youremail#example.com",
"style": "email"
},
{
"type": "TextBlock",
"text": "Phone Number"
},
{
"type": "Input.Text",
"id": "myTel",
"placeholder": "xxx.xxx.xxxx",
"style": "tel"
}
]
},
{
"type": "Column",
"size": 1,
"items": [
{
"type": "Image",
"url": "https://upload.wikimedia.org/wikipedia/commons/b/b2/Diver_Silhouette%2C_Great_Barrier_Reef.jpg",
"size": "auto"
}
]
}
]
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Submit"
}
]
}
It's working a bit like bootstrap; here your first column will get 2/3 = 2/(2+1) of the total width, and the second one 1 third (1/(2+1)).
You can manipulate the values in the provided tester

Resources