I'm currently working on making some dynamically generated cards, but for some reason when I try to add this one as an adaptive card the whole webchat crashes.
I've tried passing the JSON as an object without double quotes, as a string with double quotes, and as an object with double quotes.
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "Container",
"id": "header",
"items": [
{
"type": "ColumnSet",
"id": "headerColSet",
"columns": [
{
"type": "TextBlock",
"id": "actionTextCol",
"items": [
{
"type": "TextBlock",
"id": "actionText",
"text": "Action Here!",
"horizontalAlignment": "Right"
}
],
"width": "stretch"
},
{
"type": "TextBlock",
"id": "actionTextCol",
"items": [
{
"type": "TextBlock",
"id": "actionText",
"text": "Action Here!",
"horizontalAlignment": "Right"
}
],
"width": "stretch"
}
]
}
]
},
{
"type": "ColumnSet",
"id": "columnSet1",
"columns": [
{
"type": "Column",
"id": "columnIndex0",
"items": [
{
"type": "TextBlock",
"id": "textOne1",
"text": "Test text One"
}
],
"width": "stretch"
},
{
"type": "Column",
"id": "columnIndex0",
"items": [
{
"type": "TextBlock",
"id": "textTwo1",
"text": "Sec Text One"
}
],
"width": "stretch"
}
]
},
{
"type": "ColumnSet",
"id": "columnSet2",
"columns": [
{
"type": "Column",
"id": "columnIndex1",
"items": [
{
"type": "TextBlock",
"id": "textOne2",
"text": "Test text 2"
}
],
"width": "stretch"
},
{
"type": "Column",
"id": "columnIndex1",
"items": [
{
"type": "TextBlock",
"id": "textTwo2",
"text": "Sec Text 2"
}
],
"width": "stretch"
}
]
},
{
"type": "Container",
"id": "footer",
"items": [],
"separator": true
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}
This JSON should be able to be attached to an adaptive card in the web chat, but instead the whole screen goes white and throws these errors
card-elements.js:2330 Uncaught TypeError: Cannot read property 'internalValidateProperties' of null
index.js:1375 uncaught at observeActivity TypeError: Cannot read property 'internalValidateProperties' of null
There seems to be a lot of things wrong with your Adaptive Card, most notably ColumnSet is supposed to have an array of objects with the type property set to Column. Also, TextBlocks do not have an items attribute. I would highly recommend that you use the Adaptive Card Designer to create your cards. Also take a look at the Adaptive Card Schema Explorer.
{
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "Container",
"id": "header",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "New TextBlock"
}
]
}
]
}
]
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}
Hope this helps!
Related
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?
We are trying to create an bot with a use of Adaptive cards on MS-Teams. The preview using adaptive card designer gives the proper image as required. But when used in the Teams app, the image looks totally distorted.
The preview image as in designer:
The image output as in the MS teams app:
Below is the Json used for the adaptive cards:
{
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"text": "Howdy!",
"weight": "Bolder",
"color": "Accent",
"size": "Large"
},
{
"type": "TextBlock",
"text": "How are you doing today? ",
"wrap": true
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "Image",
"url": "https://howdy1.blob.core.windows.net/sample/2-removebg-preview.png",
"selectAction": {
"type": "Action.Submit",
"data": {
"rating": "awful",
"comment": ""
},
"title": "awful"
},
"size": "Large",
"width": "700px",
"height": "60px"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "Image",
"url": "https://howdy1.blob.core.windows.net/sample/3-removebg-preview.png",
"selectAction": {
"type": "Action.Submit",
"data": {
"rating": "bad",
"comment": ""
},
"title": "bad"
},
"size": "Large",
"width": "700px",
"height": "60px",
"spacing": "None"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "Image",
"url": "https://howdy1.blob.core.windows.net/sample/1-removebg-preview.png",
"selectAction": {
"type": "Action.Submit",
"data": {
"rating": "ok",
"comment": ""
},
"title": "ok"
},
"size": "Large",
"width": "700px",
"height": "60px"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "Image",
"url": "https://howdy1.blob.core.windows.net/sample/5-removebg-preview.png",
"selectAction": {
"type": "Action.Submit",
"data": {
"rating": "good",
"comment": ""
},
"title": "good"
},
"size": "Large",
"width": "700px",
"height": "60px"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "Image",
"url": "https://howdy1.blob.core.windows.net/sample/4-removebg-preview.png",
"selectAction": {
"type": "Action.Submit",
"data": {
"rating": "terrific",
"comment": ""
},
"title": "terrific"
},
"size": "Large",
"width": "700px",
"height": "60px"
}
]
}
]
},
{
"type": "Input.Text",
"placeholder": "Add a comment",
"isMultiline": true,
"id": "comment"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.3",
"actions": [
{
"type": "Action.Submit",
"title": "OK",
"data": {
"rating": "",
"comment": ""
}
}
]}
Thanks in advance!!
Moving comment to answer :
This issue has been fixed, We have checked and its working fine. Attaching a piece of code for emoji height and width. Please keep the width inline with height.
{
"type": "AdaptiveCard",
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "Image",
"url": "https://howdy1.blob.core.windows.net/sample/2-removebg-preview.png",
"selectAction": {
"type": "Action.Submit",
"data": {
"rating": "awful",
"comment": ""
},
"title": "awful"
},
"size": "Large",
"width": "70px",
"height": "60px"
}
]
}
]
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.3",
}
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"
}
]
}
]
}
]
}
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"
}
]
}
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"
}
]
}