Microsoft Teams Bot Crash when using ImageSet - botframework

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?

Related

Inconsistent behavior for rendering cards on android and ios

I am displaying adaptive cards on android and ios. On android device I had issues with text getting truncated. So, I added the "wrap" property but that causes an alignment issue on the cards as can be seen in the below image.
In order to fix the alignment issue, I updated the card template to display each line item as a row using columnset for each of the lines. Please find the template below
{
"contentType": "application/vnd.microsoft.card.adaptive",
"content": {
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"size": "medium",
"weight": "bolder",
"text": "August 2022 bill",
"wrap": true
}
]
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"size": "medium",
"weight": "bolder",
"text": "£83.46",
"horizontalAlignment": "right"
}
]
}
]
},
{
"type": "TextBlock",
"size": "small",
"text": "From 28/07/2022 to 29/08/2022",
"spacing": "medium",
"separator": true
},
{
"type": "TextBlock",
"size": "small",
"text": "0123456789",
"spacing": "small"
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"size": "small",
"text": "Tariff charges",
"wrap": true
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"size": "small",
"text": "£20.00",
"horizontalAlignment": "right",
"wrap": true
}
]
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"size": "small",
"text": "Minutes",
"wrap": true
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"size": "small",
"text": "£0.55",
"horizontalAlignment": "right",
"wrap": true
}
]
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"size": "small",
"text": "Messages",
"wrap": true
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"size": "small",
"text": "£0.30",
"horizontalAlignment": "right",
"wrap": true
}
]
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"size": "small",
"text": "Charges when abroad",
"wrap": true
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"size": "small",
"text": "£2.30",
"horizontalAlignment": "right",
"wrap": true
}
]
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"size": "small",
"text": "Premium & Information services",
"wrap": true
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"size": "small",
"text": "£1.65",
"horizontalAlignment": "right",
"wrap": true
}
]
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"size": "small",
"text": "Balance brought forward",
"wrap": true
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"size": "small",
"text": "£58.66",
"horizontalAlignment": "right",
"wrap": true
}
]
}
]
}
]
}
}
After updating the template, the data gets truncated on iOS device and displays well on Android. Below is the image for iOS
I am unable to figure out the inconsistent behavior across devices. Is there any specific property that causes this behavior(IMO it should have similar behavior across devices).
Or is there any better way to do this to avoid inconsistencies across devices?

Make hidden Input.ChoiceSet required if toggled to visible

New to Power Automate and adaptive cards. I have an approval process where the card can be approved, rejected or reassigned. Clicking the Reassign button reveals the Input.ChoiceSet element. I wish to then make the Input.ChoiceSet field required if it is visible, is this possible?
I can set the Input.ChoiceSet as required but this then impacts the other actions on the card.
Below is my json:
{
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.3",
"body": [
{
"type": "TextBlock",
"text": "Change Request",
"wrap": true,
"id": "lblHeader",
"size": "Large",
"weight": "Bolder",
"color": "Default"
},
{
"type": "TextBlock",
"text": "Company",
"wrap": true,
"id": "lblCompany",
"separator": true,
"size": "Medium",
"color": "Accent",
"weight": "Bolder",
"horizontalAlignment": "Center"
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "Current Owner:",
"wrap": true,
"id": "lblCurrentOwner",
"weight": "Bolder"
},
{
"type": "TextBlock",
"text": "New Owner:",
"wrap": true,
"weight": "Bolder",
"id": "lblNewOwner"
}
]
},
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "TextBlock",
"text": "X",
"wrap": true,
"id": "txtCurrentOwner"
},
{
"type": "TextBlock",
"text": "Y",
"wrap": true,
"id": "txtNewOwner"
}
]
}
]
},
{
"type": "TextBlock",
"text": "Please action using the below buttons.",
"wrap": true,
"spacing": "Large",
"id": "lblActions"
},
{
"type": "TextBlock",
"text": "Comments",
"wrap": true,
"id": "lblComment",
"size": "Small",
"color": "Default",
"spacing": "Large"
},
{
"type": "Input.Text",
"placeholder": "Add your comments here",
"id": "txtComments",
"isMultiline": true,
"spacing": "Small"
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "ActionSet",
"spacing": "None",
"actions": [
{
"type": "Action.ToggleVisibility",
"title": "Reassign",
"id": "btnReassign",
"targetElements": [
"ddlEmployeePicker",
"asAssign"
]
}
]
}
],
"width": "auto",
"horizontalAlignment": "Center"
},
{
"type": "Column",
"width": "stretch",
"spacing": "ExtraLarge"
},
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"title": "Reject",
"id": "btnReject",
"style": "destructive"
}
]
}
],
"spacing": "Small",
"horizontalAlignment": "Center"
},
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"title": "Approve",
"id": "btnApprove"
}
]
}
],
"spacing": "Small",
"horizontalAlignment": "Center"
}
]
},
{
"type": "Input.ChoiceSet",
"choices.data": {
"type": "Data.Query",
"dataset": "graph.microsoft.com/users"
},
"id": "ddlEmployeePicker",
"placeholder": "Type an employee name",
"label": "Assign to:",
"isMultiSelect": true,
"isVisible": false,
"spacing": "Medium",
"errorMessage": "Please provide an employee to reassign"
},
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"title": "Assign",
"style": "positive",
"id": "btnAssign"
}
],
"spacing": "Small",
"id": "asAssign",
"isVisible": false
}
]
}
The Input.ChoiceSet in question is ddlEmployeePicker.
Thanks in advance

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

AdaptiveCard doesn't render in Office 365 Proplus Outlook

I am unable to render AdaptiveCard in the Outlook software of Office365. It delivers as an attachment or shows the following message
This message was sent from the MessageCard Playground tool.
If the card doesn't appear, install Actionable Messages Debugger Outlook add-in to debug the issue.
JSON payload of the card attached to this message:
My question is how do I make it work or AdaptiveCard is not available for Office 365 outlook version?
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"originator": "<id>",
"version": "1.0",
"body": [
{
"type": "ColumnSet",
"columns": [
{
"width": 1,
"items": [
{
"type": "Container",
"padding": {
"top": "None",
"bottom": "None",
"left": "Small",
"right": "None"
},
"items": []
},
{
"type": "Container",
"backgroundImage": "https://filedepot.blob.core.windows.net/build/header.png",
"spacing": "Small",
"items": [
{
"type": "TextBlock",
"text": "TOM Notes",
"size": "Medium",
"color": "Light",
"horizontalAlignment": "Left",
"wrap": true
}
],
"padding": "None"
},
{
"type": "Container",
"padding": "Small",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "auto",
"items": [],
"padding": "None"
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "**Me** submitted on 23rd July"
},
{
"type": "TextBlock",
"text": "Hi ",
"spacing": "",
"size": "Small"
},
{
"type": "TextBlock",
"text": "**Reply**",
"spacing": "",
"size": "Small"
},
{
"type": "Input.Text",
"id": "comment",
"isMultiline": true
}
],
"padding": "None"
}
],
"padding": "None"
},
{
"type": "ActionSet",
"id": "expenseActions",
"horizontalAlignment": "Left",
"actions": [
{
"type": "Action.Http",
"headers": [
{
"name": "Content-Type",
"value": "application/json"
}
],
"method": "post",
"url": "Azure function",
"title": "Submit",
"body": "{<json payload>}"
}
]
}
]
}
],
"type": "Column",
"padding": "None"
}
],
"padding": "None"
}
],
"padding": "None"
}
office license details
This was solved after working with Office 365 team. They have deployed the patch.

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

Resources