Bind an Array with dynamic length to an Adaptive Card - botframework

I was wondering how I could bind an array which can have a dynamic length to an element in Microsofts Adaptive Cards. Specifically, I want to make a list with instructions and display those in "kind-of-a-list" with a dynamic layout. In a perfect world, ths list would be filled dynamically and adjust its length to the length of the array. Any ideas/workarounds?
Card Payload:
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.2",
"body": [
{
"type": "TextBlock",
"text": "${title}",
"size": "Medium",
"weight": "Bolder",
"wrap": true,
"separator": true
},
{
"type": "FactSet",
"facts": [
{
"title": "1.",
"value": "${instructions[1]}"
},
{
"title": "2.",
"value": "${instructions[2]}"
},
{
"title": "3.",
"value": "${instructions[3]}"
},
{
"title": "4.",
"value": "${instructions[4]}"
},
{
"title": "5.",
"value": "${instructions[5]}"
}
],
"isVisible": false,
"$data": "${$root['instructions[0]']}",
"separator": true
}
]
}
Card Data:
{
"title": "Instructions:",
"instructions" : [
"blablablba",
"qwerertzasdfadfds fasdf ",
"asdfkjhasf 3 asdflkjw",
"Lorem ipsum dolor mi",
"hello world",
"last instruction"
]
}

the best way to do this is if you change your JSON a litle bit:
{
"title": "Instructions:",
"instructions": [{
"id": "1",
"text": "blablablabla"
},
{
"id": "2",
"text": "qwerertzasdfadfds fasdf "
},
{
"id": "2",
"text": "asdfkjhasf 3 asdflkjw"
},
{
"id": "3",
"text": "Lorem ipsum dolor mi"
},
{
"id": "4",
"text": "hello world"
},
{
"id": "5",
"text": "last instruction"
}
]
}
This way you can build the card like this:
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.3",
"body": [
{
"type": "TextBlock",
"text": "${title}",
"size": "Medium",
"weight": "Bolder",
"wrap": true,
"separator": true
},
{
"type": "FactSet",
"facts": [
{
"$data": "${instructions}",
"title": "${id}.",
"value": "${text}"
}
],
"separator": true
}
]
}
Which would look like this:

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?

Is there any way to align the table contents in the same line in the teams bot framework?

The below image shows how the current table is displayed on teams. We can see that the cells are not aligned properly. Using adaptive card (columnset).
The image shows how the cells are not aligned and the separator is jagged.
Below is the json payload.
{
"$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": "LMAOOOOOOOOOOOOOOO"
},
{
"type": "TextBlock",
"separator":true,
"text": "Apple"
},{
"type": "TextBlock",
"separator":true,
"text": "Kiwi"
}
]
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"weight": "bolder",
"text": "YEEEEEEEEEEEEEEEEEEEE"
},
{
"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"
}
]
}
]
}
]
}
Is there a way to keep all the rows in the same line.
I tried it from my end & it's working fine for me:
I tried to decrease the browser size and still it's working fine:
I tested it in both Teams Desktop client and browser client and it's working fine for me
Could you please try using below JSON file:
{
"$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": "LMAOOOOOOOOOOOOOOO",
"wrap": true
}
]
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"weight": "bolder",
"text": "YEEEEEEEEEEEEEEEEEEEE",
"wrap": true
}
]
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"weight": "bolder",
"text": "Price",
"wrap": true
}
]
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"separator":true,
"text": "Apple"
},{
"type": "TextBlock",
"separator":true,
"text": "Kiwi"
}
]
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"separator":true,
"text": "Fruit"
},{
"type": "TextBlock",
"separator":true,
"text": "Fruit"
}
]
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"separator":true,
"text": "2"
},{
"type": "TextBlock",
"separator":true,
"text": "1"
}
]
}
]
}
]
}

Microsoft Teams - multiselect in ms teams bot

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"
}
}
]
}

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

BotFramework Adaptive Cards - Container Actions are not Rendered

How can I add actions for containers?
According to the documentation Container type has an "actions" object, but when testing the card it in the adaptive cards visualizer or in the bot-framework emulator no button is displayed.
Attached an example for the kind of card I'm trying to generate.
Thanks for your help.
{
"type": "AdaptiveCard",
"body": [
{
"style":"normal",
"type": "Container",
"separation" : "strong",
"actions": [
{
"type": "Action.OpenUrl",
"url": "http://foo.bar.com",
"title": "adaptivecards1"
}
],
"items": [
{
"type": "ColumnSet",
"separation": "strong",
"columns": [
{
"type": "Column",
"size":1,
"items": [
{
"type": "TextBlock",
"text": "Title",
"size": "large",
"isSubtle": true
},
{
"type": "TextBlock",
"text": "Model: ABC",
"size": "small"
}
]
},
{
"type": "Column",
"size": "1",
"items": [
{
"type": "TextBlock",
"text": " "
},
{
"type": "Image",
"url": "https://path/to/image.jpg",
"size": "large",
"horizontalAlignment" :"right"
}
]
}
]
}
]
},
{
"style":"normal",
"type": "Container",
"separation" : "strong",
"actions": [
{
"type": "Action. OpenUrl",
"url": "http://foo.bar.com",
"title": "adaptivecards2"
}
],
"items": [
{
"type": "ColumnSet",
"separation": "strong",
"columns": [
{
"type": "Column",
"size":1,
"items": [
{
"type": "TextBlock",
"text": "Another Title",
"size": "large",
"isSubtle": true
},
{
"type": "TextBlock",
"text": "Model: XYZ",
"size": "small"
} ]
},
{
"type": "Column",
"size": "1",
"items": [
{
"type": "TextBlock",
"text": " "
},
{
"type": "Image",
"url": "https://path/to/other/image.jpg",
"size": "large",
"horizontalAlignment" :"right"
}
]
}
]
}
]
}
]}
Per this GitHub issue, it seems that there is an error in the documentation and that the actions property doesn't exist on Container.
Instead, you should add an item of type ActionSet to your items array, with the list of actions.
Following your sample, it should look like:
{
"type": "AdaptiveCard",
"body": [
{
"style": "normal",
"type": "Container",
"separation": "strong",
"items": [
{
"type": "ActionSet",
"actions": [
{
"type": "Action.OpenUrl",
"url": "http://foo.bar.com",
"title": "adaptivecards1"
}
]
},
{
"type": "ColumnSet",
"separation": "strong",
"columns": [
{
"type": "Column",
"size": 1,
"items": [
{
"type": "TextBlock",
"text": "Title",
"size": "large",
"isSubtle": true
},
{
"type": "TextBlock",
"text": "Model: ABC",
"size": "small"
}
]
},
{
"type": "Column",
"size": "1",
"items": [
{
"type": "TextBlock",
"text": " "
},
{
"type": "Image",
"url": "https://path/to/image.jpg",
"size": "large",
"horizontalAlignment": "right"
}
]
}
]
}
]
},
{
"style": "normal",
"type": "Container",
"separation": "strong",
"items": [
{
"type": "ActionSet",
"actions": [
{
"type": "Action.OpenUrl",
"url": "http://foo.bar.com",
"title": "adaptivecards2"
}
]
},
{
"type": "ColumnSet",
"separation": "strong",
"columns": [
{
"type": "Column",
"size": 1,
"items": [
{
"type": "TextBlock",
"text": "Another Title",
"size": "large",
"isSubtle": true
},
{
"type": "TextBlock",
"text": "Model: XYZ",
"size": "small"
}
]
},
{
"type": "Column",
"size": "1",
"items": [
{
"type": "TextBlock",
"text": " "
},
{
"type": "Image",
"url": "https://path/to/other/image.jpg",
"size": "large",
"horizontalAlignment": "right"
}
]
}
]
}
]
}
]
}
This is also discussed here.

Resources