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?
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?
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
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 am using Microsoft bot framework, is it possible to give option as view more for long messages in hero card.
my card is rendering and i am able to see the complete text. since text is very long chat bubble is not fitting in the window. i know we can split the text and send two times but my client is very specific about view more option.
Any help is appreciated.
Thanks
Sanjeev
Depending on the channels you are connected to. For example, on Facebook Messenger this is not feasible as the UI components allowed there do not have this option.
But for other channels that support Adaptive Cards like these Partners you might find other solutions like having dynamic Height for cards that will support having large texts and many other stuff.
UPDATE
I hope this helps as there isn't a "view more" option yet in Adaptive Cards, but there is a Toggle Option like below
Go to the Adaptive cards designer and paste the following (replacing original json) in the Card Payload Editor on the bottom left
After that click on Preview Mode on the top right and then click on the preview card, you will have a TOGGLE Action
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "Container",
"selectAction": {
"type": "Action.ToggleVisibility",
"targetElements": [
"leg1Details"
]
},
"items": [
{
"type": "ColumnSet",
"columns": [
{
"width": "24px",
"items": [
{
"type": "Image",
"style": "Person",
"backgroundColor": "#0078D7",
"url": "http://messagecardplayground.azurewebsites.net/assets/smallairplane_white.png"
}
],
"type": "Column"
},
{
"width": "stretch",
"spacing": "Small",
"verticalContentAlignment": "Center",
"items": [
{
"type": "TextBlock",
"text": "**Depart:** Delta Air Lines flight 8471 to Paris"
}
],
"type": "Column"
}
]
},
{
"type": "ColumnSet",
"spacing": "None",
"columns": [
{
"width": "24px",
"items": [
{
"type": "Image",
"horizontalAlignment": "Center",
"width": "1px",
"url": "http://messagecardplayground.azurewebsites.net/assets/palebluedot1x1.png",
"height": "20px"
}
],
"type": "Column"
},
{
"width": "stretch",
"spacing": "Small",
"items": [
{
"type": "TextBlock",
"text": "Bengaluru, Sun 11/12/2017 1:55 AM, 10 hours 41 minutes",
"isSubtle": true
}
],
"type": "Column"
}
]
}
]
},
{
"type": "ColumnSet",
"id": "leg1Details",
"isVisible": false,
"spacing": "None",
"columns": [
{
"width": "24px",
"padding": "none",
"backgroundImage": {
"url": "http://messagecardplayground.azurewebsites.net/assets/palebluedot1x1.png",
"mode": "repeatVertically",
"horizontalAlignment": "Center"
},
"type": "Column"
},
{
"width": "stretch",
"spacing": "Small",
"items": [
{
"type": "Container",
"padding": {
"top": "default"
},
"items": [
{
"type": "ColumnSet",
"columns": [
{
"width": 45,
"items": [
{
"type": "Container",
"padding": "none",
"backgroundImage": "http://messagecardplayground.azurewebsites.net/assets/TxP_Background.png",
"items": [
{
"type": "Image",
"horizontalAlignment": "Center",
"url": "http://messagecardplayground.azurewebsites.net/assets/TxP_Flight.png"
}
]
},
{
"type": "Container",
"style": "emphasis",
"spacing": "None",
"items": [
{
"type": "TextBlock",
"text": "Flight to Paris",
"wrap": true,
"size": "ExtraLarge",
"weight": "Lighter",
"color": "Accent"
},
{
"type": "TextBlock",
"text": "Delta Air Lines flight 8471",
"wrap": true,
"size": "Medium",
"spacing": "Small"
},
{
"type": "TextBlock",
"wrap": true,
"text": "Confirmation code: ABCDEF",
"size": "Medium",
"spacing": "None"
},
{
"type": "TextBlock",
"wrap": true,
"text": "10 hours 45 minutes",
"size": "Medium",
"spacing": "None"
}
]
}
],
"type": "Column"
},
{
"width": 55,
"spacing": "None",
"padding": "default",
"items": [
{
"type": "Container",
"height": "stretch",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"width": "auto",
"items": [
{
"type": "TextBlock",
"text": "BLR",
"weight": "Lighter",
"size": "ExtraLarge"
}
],
"type": "Column"
},
{
"width": "stretch",
"verticalContentAlignment": "Center",
"items": [
{
"type": "Image",
"width": "10000px",
"url": "http://messagecardplayground.azurewebsites.net/assets/graydot2x2.png",
"height": "2px"
}
],
"type": "Column"
},
{
"width": "auto",
"spacing": "Small",
"verticalContentAlignment": "Center",
"items": [
{
"type": "Image",
"url": "http://messagecardplayground.azurewebsites.net/assets/smallairplane.png",
"height": "16px"
}
],
"type": "Column"
},
{
"width": "auto",
"items": [
{
"type": "TextBlock",
"text": "CDG",
"weight": "Lighter",
"horizontalAlignment": "Right",
"size": "ExtraLarge"
}
],
"type": "Column"
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"width": 1,
"items": [
{
"type": "TextBlock",
"text": "1:55 AM",
"size": "Medium"
}
],
"type": "Column"
},
{
"width": 1,
"items": [
{
"type": "TextBlock",
"text": "8:10 AM",
"horizontalAlignment": "Right",
"size": "Medium"
}
],
"type": "Column"
}
]
},
{
"type": "ColumnSet",
"spacing": "None",
"columns": [
{
"width": 1,
"items": [
{
"type": "TextBlock",
"isSubtle": true,
"wrap": true,
"text": "November 12, 2017"
}
],
"type": "Column"
},
{
"width": 1,
"items": [
{
"type": "TextBlock",
"isSubtle": true,
"wrap": true,
"text": "November 12, 2017",
"horizontalAlignment": "Right"
}
],
"type": "Column"
}
]
},
{
"type": "ColumnSet",
"spacing": "None",
"columns": [
{
"width": 1,
"items": [
{
"type": "TextBlock",
"isSubtle": true,
"text": "Bengaluru"
}
],
"type": "Column"
},
{
"width": 1,
"items": [
{
"type": "TextBlock",
"isSubtle": true,
"text": "Paris",
"horizontalAlignment": "Right"
}
],
"type": "Column"
}
]
}
]
},
{
"type": "ColumnSet",
"horizontalAlignment": "Right",
"separator": true,
"spacing": "Large",
"columns": [
{
"width": "auto",
"selectAction": {
"type": "Action.OpenUrl",
"url": "http://www.microsoft.com"
},
"items": [
{
"type": "ColumnSet",
"columns": [
{
"width": "auto",
"verticalContentyAlignment": "center",
"items": [
{
"type": "Image",
"url": "http://messagecardplayground.azurewebsites.net/assets/smallairplane.png",
"height": "16px"
}
],
"type": "Column"
},
{
"width": "auto",
"spacing": "Small",
"items": [
{
"type": "TextBlock",
"text": "Check in"
}
],
"type": "Column"
}
]
}
],
"type": "Column"
},
{
"width": "auto",
"spacing": "Large",
"selectAction": {
"type": "Action.OpenUrl",
"url": "http://www.microsoft.com"
},
"items": [
{
"type": "ColumnSet",
"columns": [
{
"width": "auto",
"verticalContentyAlignment": "center",
"items": [
{
"type": "Image",
"url": "http://messagecardplayground.azurewebsites.net/assets/calendaricon.png",
"height": "16px"
}
],
"type": "Column"
},
{
"width": "auto",
"spacing": "Small",
"items": [
{
"type": "TextBlock",
"text": "View in Calendar"
}
],
"type": "Column"
}
]
}
],
"type": "Column"
}
]
}
],
"type": "Column"
}
]
}
]
}
],
"type": "Column"
}
]
}
]}