Microsoft Adaptive Card - Column Size - botframework

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

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/

Define tab order in Adaptive Cards for Microsoft BotFramework

tl;dr: How can we define the tab order of Adaptive Cards Input Elements?
Hi there,
we are using Adaptive Cards in a web chat project along with MS Bot Framework V4. We have e.g. one card, where you enter your address. We have two columns to show the input fields side-by-side in a 2x2 fashion:
Street | Number
Zip | City
That's how our customers would normally read it - from left to rights and the things in a row belong together. But as we are using columns, the tab order of the adaptive card is "wrong": it tabs through the column and then goes to the right column and tabs through there from top to bottom.
Is there a way to define the tab order or does anyone have an idea, how to keep the "layout" of the adaptive card but end up with the correct tab order?
Best regards
The solution was much easier, than I thought: I had to separate each row of the column set into several column sets, each being in its own container. Then the tab order is correct from left to right and then from top to bottom.
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.2",
"body": [
{
"type": "TextBlock",
"text": "**Address**",
"size": "Large",
"height": "stretch"
},
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "street*",
"spacing": "Large",
"height": "stretch",
"weight": "Bolder"
},
{
"type": "Input.Text",
"placeholder": "Street",
"id": "street",
"value": "{street}"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "Number*",
"spacing": "Large",
"weight": "Bolder"
},
{
"type": "Input.Text",
"placeholder": "Number",
"id": "number",
"value": "{number}"
}
]
}
]
}
]
},
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "Zip*",
"spacing": "Medium",
"weight": "Bolder"
},
{
"type": "Input.Text",
"placeholder": "Zip",
"id": "zip",
"value": "{zip}"
}
],
"spacing": "None",
"height": "stretch",
"horizontalAlignment": "Center"
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "City*",
"spacing": "Medium",
"weight": "Bolder"
},
{
"type": "Input.Text",
"placeholder": "City",
"id": "city",
"value": "{city}"
}
],
"horizontalAlignment": "Center",
"height": "stretch"
}
]
}
]
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Send"
}
]
}

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

In Microsoft bot framework, How to include a star rating feedback

I am using microsoft bot framework. I need to implement a star rated feedback mechanism in my code. Like selecting the star should submit the rating for the bot. Can anyone help me on this? or any suggestions ?
You can create a star rating feedback card with an AdaptiveCard by making columns behave like submit buttons. To begin, add a column set to an AdaptiveCard with the desired number of columns - each column will correspond to a rating. Then in each column, you can add an image of a star or some other object and a text field describing that rating. Next, add a submit action to each column and in the data field add the value of the response. Finally, you can render the card and send it to the user as an attachment. When the user clicks on a column, it will send the value from the data field as a message from the user. See the AdaptiveCard JSON and screenshot of the rendered card below for an example.
Screenshot
JSON AdaptiveCard
{
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"size": "Medium",
"weight": "Bolder",
"color": "Accent",
"text": "Rate your experience!"
},
{
"type": "TextBlock",
"separator": true,
"text": "Please rate your experience! Your feedback is very appreciated and will help improve your experience in the future. ",
"wrap": true
},
{
"type": "ColumnSet",
"spacing": "Medium",
"columns": [
{
"type": "Column",
"selectAction": {
"type": "Action.Submit",
"data": "awful"
},
"items": [
{
"type": "Image",
"horizontalAlignment": "Center",
"url": "https://upload.wikimedia.org/wikipedia/commons/1/18/Five-pointed_star.svg"
},
{
"type": "TextBlock",
"horizontalAlignment": "Center",
"text": "Awful"
}
],
"width": "stretch"
},
{
"type": "Column",
"selectAction": {
"type": "Action.Submit",
"data": "bad"
},
"items": [
{
"type": "Image",
"horizontalAlignment": "Center",
"url": "https://upload.wikimedia.org/wikipedia/commons/1/18/Five-pointed_star.svg"
},
{
"type": "TextBlock",
"horizontalAlignment": "Center",
"text": "Bad"
}
],
"width": "stretch"
},
{
"type": "Column",
"selectAction": {
"type": "Action.Submit",
"data": "ok"
},
"items": [
{
"type": "Image",
"horizontalAlignment": "Center",
"url": "https://upload.wikimedia.org/wikipedia/commons/1/18/Five-pointed_star.svg"
},
{
"type": "TextBlock",
"horizontalAlignment": "Center",
"text": "Ok"
}
],
"width": "stretch"
},
{
"type": "Column",
"selectAction": {
"type": "Action.Submit",
"data": "good"
},
"items": [
{
"type": "Image",
"horizontalAlignment": "Center",
"url": "https://upload.wikimedia.org/wikipedia/commons/1/18/Five-pointed_star.svg"
},
{
"type": "TextBlock",
"horizontalAlignment": "Center",
"text": "Good"
}
],
"width": "stretch"
},
{
"type": "Column",
"selectAction": {
"type": "Action.Submit",
"data": "terrific"
},
"items": [
{
"type": "Image",
"horizontalAlignment": "Center",
"url": "https://upload.wikimedia.org/wikipedia/commons/1/18/Five-pointed_star.svg"
},
{
"type": "TextBlock",
"horizontalAlignment": "Center",
"text": "Terrific"
}
],
"width": "stretch"
}
]
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.0"
}

Resources