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.
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?
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
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",
}
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"
}
]
}
]}
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"
}
]
}