Looking for using visibility as an output in an adaptive card - adaptive-cards

Instead of using a choiceset, I would like to use several Action.ToggleVisibility.
But to do so, in my Action.submit, I need to put the value of the visibilty of each Action.ToggleVisibility.
Following the idea I want to put in place:
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.3",
"body": [
{
"type": "TextBlock",
"text": "How are you ?",
"weight": "Bolder",
"size": "Medium",
"horizontalAlignment": "Center"
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "ActionSet",
"actions": [
{
"type": "Action.ToggleVisibility",
"title": ":(",
"targetElements": [
"Bad",
"Good",
"VeryGood"
],
"data": {
"button": "VeryBad"
}
}
],
"id": "VeryBad"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "ActionSet",
"actions": [
{
"type": "Action.ToggleVisibility",
"title": ":/",
"targetElements": [
"VeryBad",
"Good",
"VeryGood"
],
"data": {
"button": "Bad"
}
}
],
"id": "Bad"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "ActionSet",
"actions": [
{
"type": "Action.ToggleVisibility",
"title": ":)",
"targetElements": [
"VeryBad",
"Bad",
"VeryGood"
]
}
}
],
"id": "Good"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "ActionSet",
"actions": [
{
"type": "Action.ToggleVisibility",
"title": ":D",
"targetElements": [
"VeryBad",
"Bad",
"Good"
]
}
}
],
"id": "VeryGood"
}
]
}
]
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Send"
}
]
}
Does anyone know if this is possible in an adaptive card ? And if so how can I do that ?

Related

Action.ShowCard inheriting width from ColumnSet in which it is called

I have created a MS Teams adaptive card below:
{
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.3",
"body": [
{
"type": "TextBlock",
"text": "Account Ownership 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",
"color": "Default"
},
{
"type": "TextBlock",
"text": "Comments",
"wrap": true,
"id": "lblComments",
"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.ShowCard",
"title": "Reassign",
"id": "btnReassign",
"card": {
"type": "AdaptiveCard",
"width": "Full",
"body": [
{
"type": "Input.ChoiceSet",
"choices.data": {
"type": "Data.Query",
"dataset": "graph.microsoft.com/users"
},
"id": "ddlEmployeePicker",
"placeholder": "Type an employee name",
"label": "Assign to:",
"isRequired": true,
"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"
}
]
}
}
]
}
],
"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",
"items": [
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"title": "Approve",
"id": "btnApprove"
}
]
}
],
"spacing": "Small",
"horizontalAlignment": "Center",
"width": "auto"
}
]
}
]
}
Which looks like this:
Once the Reassign button is clicked:
The issue is that once expanded the action buttons are squished and the dropdown list is displayed within the Reassign column. Is it possible to display the DDL outside and below the Reassign column so that it can be the full width of the adaptive card?
Could you please refer below json which uses factset having Action.ShowCard:
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "Publish Adaptive Card schema",
"weight": "bolder",
"size": "medium"
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "auto",
"items": [
{
"size": "small",
"style": "person",
"type": "Image",
"url": "https://pbs.twimg.com/profile_images/3647943215/d7f12830b3c17a5a9e4afcc370e3a37e_400x400.jpeg"
}
]
},
{
"type": "Column",
"width": "stretch",
"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
}
]
}
]
}
]
},
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "Now that we have defined the main rules and features of the format, we need to produce a schema and publish it to GitHub. The schema will be the starting point of our reference documentation.",
"wrap": true
},
{
"type": "FactSet",
"facts": [
{
"title": "Board:",
"value": "Adaptive Card"
},
{
"title": "List:",
"value": "Backlog"
},
{
"title": "Assigned to:",
"value": "Matt Hidinger"
},
{
"title": "Due date:",
"value": "Not set"
}
]
}
]
}
],
"actions": [
{
"type": "Action.ShowCard",
"title": "Set due date",
"card": {
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "Input.Date",
"id": "dueDate"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "OK"
}
]
}
},
{
"type": "Action.ShowCard",
"title": "Set due date2",
"card": {
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "Input.Date",
"id": "dueDate2"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "OK2"
}
]
}
},
{
"type": "Action.ShowCard",
"title": "Comment",
"card": {
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "Input.Text",
"id": "comment",
"isMultiline": true,
"placeholder": "Enter your comment"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "OK"
}
]
}
}
]
}

Set Adaptive Card to Currency With Parameter From Apply to Each?

In the image above it changes the adaptive card to Currency. How can I add this with a parameter from somewhere else? I am trying to do this but it is not working.
"value": "${formatNumber(#{items('Apply_to_each')?['Cost Each']}, 2)}"
How can I get this code to show as currency? It seems to be that when I use "#{items" it will not work. Any suggestions?
Here is the adaptive card. I am looping through Excel data and want to put the Parameters I received from Excel into an Adaptive Card and use the $$ Format.
{
"type": "AdaptiveCard",
"body": [
{
"type": "Container",
"style": "emphasis",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"size": "Large",
"weight": "Bolder",
"text": "**PART APPROVAL**"
}
],
"width": "stretch"
}
]
}
],
"bleed": true
},
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"size": "ExtraLarge",
"text": "New Part Approval",
"wrap": true
}
],
"width": "stretch"
}
]
},
{
"type": "FactSet",
"spacing": "Large",
"facts": [
{
"title": "Part #:",
"value": "**#{items('Apply_to_each')?['Part Number']}**"
},
{
"title": "Description:",
"value": "#{items('Apply_to_each')?['Description']}"
},
{
"title": "Quantity:",
"value": "#{items('Apply_to_each')?['AOQ']}"
},
{
"title": "Cost Each:",
"value": "#{items('Apply_to_each')?['Cost Each']}"
},
{
"title": "Sell Each:",
"value": "#{items('Apply_to_each')?['Sell Each']}"
}
]
}
]
},
{
"type": "Container",
"items": [
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"title": "Approve",
"style": "positive",
"data": {
"id": "_qkQW8dJlUeLVi7ZMEzYVw",
"action": "approve"
},
"id": "ApproveID"
},
{
"type": "Action.ShowCard",
"title": "Reject",
"style": "destructive",
"card": {
"type": "AdaptiveCard",
"body": [
{
"type": "Input.Text",
"id": "RejectCommentID",
"placeholder": "Please specify an appropriate reason for rejection.",
"isMultiline": true
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Send",
"data": {
"id": "_qkQ8dJlUeMVi7ZMEzYVf",
"action": "reject"
}
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
},
"id": "RejectID"
}
]
}
]
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.2",
"fallbackText": "This card requires Adaptive Cards v1.2 support to be rendered properly."
}
sorry for that.
Just asked a colleague and the new Adaptive Expressions, the one you're using there to format currencies are actually not working on Power Automate yet.
Power Automate is not updated to the latest Adaptive Cards version so some of the things you can do with cards are not available in flows yet.
Tim

Adaptive cards not showing all keys and values when trying to make a table

I recently have had to learn adaptive cards for an application at work and want to represent a table. The problem that I am having is that all of the keys and values for my sample data are not showing on the designer site when I put it in preview mode. I have been looking at this for awhile and cant find any syntax errors. I am wondering if I maybe have too many columns for this to render properly, but I am not sure.
The card template:
{
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch"
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "100G",
"id": "100Gtxt",
"horizontalAlignment": "Center",
"weight": "Bolder"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "FPW",
"weight": "Bolder",
"id": "FPWtxt",
"horizontalAlignment": "Center"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "Serving Size",
"id": "ServingSizetxt",
"horizontalAlignment": "Center",
"weight": "Bolder"
}
]
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "FactSet",
"facts": [
{
"$data": "{propertiesNutritional}",
"title": "{key}",
"value": "{value}"
}
],
"id": "NutritionalFact",
"separator": true,
"spacing": "None"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "FactSet",
"facts": [
{
"$data": "{propertiesUom}",
"title": "{key}",
"value": "{value}"
}
],
"id": "UomFact",
"separator": true,
"spacing": "None"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "FactSet",
"facts": [
{
"$data": "{propertiesCurrent1}",
"title": "{key}",
"value": "{value}"
}
],
"id": "CurrentFact1",
"separator": true,
"spacing": "None"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "FactSet",
"facts": [
{
"$data": "{propertiesNew1}",
"title": "{key}",
"value": "{value}"
}
],
"id": "NewFact1",
"spacing": "None",
"separator": true
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "FactSet",
"facts": [
{
"$data": "{propertiesCurrent2}",
"title": "{key}",
"value": "{value}"
}
],
"id": "CurrentFact2",
"separator": true,
"spacing": "None"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "FactSet",
"facts": [
{
"$data": "{propertiesNew2}",
"title": "{key}",
"value": "{value}"
}
],
"id": "NewFact2",
"separator": true,
"spacing": "None"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "FactSet",
"facts": [
{
"$data": "{propertiesCurrent3}",
"title": "{key}",
"value": "{value}"
}
],
"id": "CurrentFact3",
"separator": true,
"spacing": "None"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "FactSet",
"facts": [
{
"$data": "{propertiesNew3}",
"title": "{key}",
"value": "{value}"
}
],
"id": "NewFact3",
"spacing": "None",
"separator": true
}
]
}
]
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}
Sample Data:
{
"propertiesNutritional": [
{
"key": "Nutritional",
"value": "Calories"
}
],
"propertiesUom": [
{
"key": "UOM",
"value": "Calories"
}
],
"propertiesCurrent1": [
{
"key": "Current",
"value": "Number"
}
],
"propertiesNew1": [
{
"key": "New",
"value": "Number"
}
],
"propertiesCurrent2": [
{
"key": "Current",
"value": "Number"
}
],
"propertiesNew2": [
{
"key": "New",
"value": "Number"
}
],
"propertiesCurrent3": [
{
"key": "Current",
"value": "Number"
}
],
"propertiesNew3": [
{
"key": "New",
"value": "Number"
}
]
}
yea for whatever reason (think its already added as an issue) you can't have numbers in your property names. Changing your propertiesCurrent3 to propertiesCurrentC for example works just fine.
Try this:
{
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch"
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "100G",
"id": "100Gtxt",
"horizontalAlignment": "Center",
"weight": "Bolder"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "FPW",
"weight": "Bolder",
"id": "FPWtxt",
"horizontalAlignment": "Center"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "Serving Size",
"id": "ServingSizetxt",
"horizontalAlignment": "Center",
"weight": "Bolder"
}
]
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "FactSet",
"facts": [
{
"$data": "{propertiesNutritional}",
"title": "{key}",
"value": "{value}"
}
],
"id": "NutritionalFact",
"separator": true,
"spacing": "None"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "FactSet",
"facts": [
{
"$data": "{propertiesUom}",
"title": "{key}",
"value": "{value}"
}
],
"id": "UomFact",
"separator": true,
"spacing": "None"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "FactSet",
"facts": [
{
"$data": "{propertiesCurrentA}",
"title": "{key}",
"value": "{value}"
}
],
"id": "CurrentFact1",
"separator": true,
"spacing": "None"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "FactSet",
"facts": [
{
"$data": "{propertiesNewA}",
"title": "{key}",
"value": "{value}"
}
],
"id": "NewFact1",
"spacing": "None",
"separator": true
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "FactSet",
"facts": [
{
"$data": "{propertiesCurrentB}",
"title": "{key}",
"value": "{value}"
}
],
"id": "CurrentFact2",
"separator": true,
"spacing": "None"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "FactSet",
"facts": [
{
"$data": "{propertiesNewB}",
"title": "{key}",
"value": "{value}"
}
],
"id": "NewFact2",
"separator": true,
"spacing": "None"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "FactSet",
"facts": [
{
"$data": "{propertiesCurrentC}",
"title": "{key}",
"value": "{value}"
}
],
"id": "CurrentFact3",
"separator": true,
"spacing": "None"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "FactSet",
"facts": [
{
"$data": "{propertiesNewC}",
"title": "{key}",
"value": "{value}"
}
],
"id": "NewFact3",
"spacing": "None",
"separator": true
}
]
}
]
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}
And this for your data:
{
"propertiesNutritional": [{
"key": "Nutritional",
"value": "Calories"
}],
"propertiesUom": [{
"key": "UOM",
"value": "Calories"
}],
"propertiesCurrentA": [{
"key": "Current",
"value": "Number"
}],
"propertiesNewA": [{
"key": "New",
"value": "Number"
}],
"propertiesCurrentB": [{
"key": "Current",
"value": "Number"
}],
"propertiesNewB": [{
"key": "New",
"value": "Number"
}],
"propertiesCurrentC": [{
"key": "Current",
"value": "Number"
}],
"propertiesNewC": [{
"key": "New",
"value": "Number"
}]
}

In Adaptive Cards, how to create table using data binding to template?

The documentation on using template say that we can bind array data to iterate over a template, I am trying to use it to create a table, but I am not sure how to set this up.
Here is my data, it have 2 rows of data:
[
{
"ID": "1",
"Name": "bot1.atmx",
"Description": "Bot 1 Description"
},
{
"ID": "2",
"Name": "bot2.atmx",
"Description": "Bot 2 Description"
}
]
Here is template, which is just a simple table, notice the {id}, {name}, and {description} data binding language.
{
"type": "AdaptiveCard",
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"size": "Medium",
"text": "ID"
}
],
"width": "30px"
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "Left",
"size": "Medium",
"text": "Name"
}
],
"width": "100px"
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "Description",
"horizontalAlignment": "Left",
"size": "Medium"
}
]
}
]
},
{
"type": "ColumnSet",
"spacing": "None",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "{ID}",
"wrap": true
}
],
"width": "30px"
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "Left",
"text": "{Name}",
"wrap": true
}
],
"width": "100px"
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "{Description}"
}
]
}
]
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.0"
}
How can I bind this to create table?
You're not that far off.
Notice that the binding syntax changed in May 2020 from {name} to ${name} https://learn.microsoft.com/en-us/adaptive-cards/templating/
To make it work, give youre data a name, i.e:
{
"properties" :
[
{
"ID": "1",
"Name": "bot1.atmx",
"Description": "Bot 1 Description"
},
{
"ID": "2",
"Name": "bot2.atmx",
"Description": "Bot 2 Description"
}
]
}
and add a simple "$data": "${properties}", into you column-items like this:
...
"columns": [
{
"type": "Column",
"items": [
{
"$data": "${properties}",
"type": "TextBlock",
"size": "Medium",
"text": "${ID}"
}
],
"width": "30px"
},
{
...
But be aware, you're not creating a nice looking table, you don't have connected rows to aline the cells.
All you do is: draw 3 seperated columns next to each other. Adding more lines it will make it look like this:

Bot Emulator displays "emphasis" as default style in AdaptiveCards

When I create a Card in the designer, the default style (background) is displayed in white and I can make some ColumnSets or Containers with "style":"emphasis" to change their background color.
On the other hand, when the card renders in the Bot Framework Emulator everything is displayed like it was with "style:"emphasis" like so (designer result on the left, emulator result on the right)
I'm aware that there's some problems while rendering 1.2 version exclusives, but even with the simplest cards it does the style change. It looks like emphasis is the default style in DirectLine because when i set the style as "style":"default" it's also displayed as emphasis.
This is the Expense Report Sample and the JSON is:
{
"type": "AdaptiveCard",
"body": [
{
"type": "Container",
"style": "emphasis",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"size": "Large",
"weight": "Bolder",
"text": "**EXPENSE APPROVAL**"
}
],
"width": "stretch"
},
{
"type": "Column",
"items": [
{
"type": "Image",
"url": "https://adaptivecards.io/content/pending.png",
"height": "30px",
"altText": "Pending"
}
],
"width": "auto"
}
]
}
],
"bleed": true
},
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"size": "ExtraLarge",
"text": "Trip to UAE",
"wrap": true
},
{
"type": "TextBlock",
"spacing": "Small",
"size": "Small",
"weight": "Bolder",
"color": "Accent",
"text": "[ER-13052](https://adaptivecards.io)"
}
],
"width": "stretch"
},
{
"type": "Column",
"items": [
{
"type": "ActionSet",
"actions": [
{
"type": "Action.OpenUrl",
"title": "EXPORT AS PDF",
"url": "https://adaptivecards.io"
}
]
}
],
"width": "auto"
}
]
},
{
"type": "FactSet",
"spacing": "Large",
"facts": [
{
"title": "Submitted By",
"value": "**Matt Hidinger** matt#contoso.com"
},
{
"title": "Duration",
"value": "2019/06/19 - 2019/06/25"
},
{
"title": "Submitted On",
"value": "2019/04/14"
},
{
"title": "Reimbursable Amount",
"value": "$ 404.30"
},
{
"title": "Awaiting approval from",
"value": "**Thomas** thomas#contoso.com"
},
{
"title": "Submitted to",
"value": "**David** david#contoso.com"
}
]
}
]
},
{
"type": "Container",
"spacing": "Large",
"style": "emphasis",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"weight": "Bolder",
"text": "DATE"
}
],
"width": "auto"
},
{
"type": "Column",
"spacing": "Large",
"items": [
{
"type": "TextBlock",
"weight": "Bolder",
"text": "CATEGORY"
}
],
"width": "stretch"
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"weight": "Bolder",
"text": "AMOUNT"
}
],
"width": "auto"
}
]
}
],
"bleed": true
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "06/19",
"wrap": true
}
],
"width": "auto"
},
{
"type": "Column",
"spacing": "Medium",
"items": [
{
"type": "TextBlock",
"text": "Air Travel Expense",
"wrap": true
}
],
"width": "stretch"
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "$ 300",
"wrap": true
}
],
"width": "auto"
},
{
"type": "Column",
"id": "chevronDown1",
"spacing": "Small",
"verticalContentAlignment": "Center",
"items": [
{
"type": "Image",
"selectAction": {
"type": "Action.ToggleVisibility",
"title": "collapse",
"targetElements": [
"cardContent1",
"chevronUp1",
"chevronDown1"
]
},
"url": "https://adaptivecards.io/content/down.png",
"width": "20px",
"altText": "collapsed"
}
],
"width": "auto"
},
{
"type": "Column",
"id": "chevronUp1",
"isVisible": false,
"spacing": "Small",
"verticalContentAlignment": "Center",
"items": [
{
"type": "Image",
"selectAction": {
"type": "Action.ToggleVisibility",
"title": "expand",
"targetElements": [
"cardContent1",
"chevronUp1",
"chevronDown1"
]
},
"url": "https://adaptivecards.io/content/up.png",
"width": "20px",
"altText": "expanded"
}
],
"width": "auto"
}
]
},
{
"type": "Container",
"id": "cardContent1",
"isVisible": false,
"items": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "* Leg 1 on Tue, Jun 19th, 2019 at 6:00 AM.",
"isSubtle": true,
"wrap": true
},
{
"type": "TextBlock",
"text": "* Leg 2 on Tue,Jun 19th, 2019 at 7:15 PM.",
"isSubtle": true,
"wrap": true
},
{
"type": "Container",
"items": [
{
"type": "Input.Text",
"id": "comment1",
"placeholder": "Add your comment here."
}
]
}
]
},
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"title": "Send",
"data": {
"id": "_qkQW8dJlUeLVi7ZMEzYVw",
"action": "comment",
"lineItem": 1
}
}
]
}
],
"width": "auto"
}
]
}
]
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "Center",
"text": "06/19",
"wrap": true
}
],
"width": "auto"
},
{
"type": "Column",
"spacing": "Medium",
"items": [
{
"type": "TextBlock",
"text": "Auto Mobile Expense",
"wrap": true
}
],
"width": "stretch"
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "$ 100",
"wrap": true
}
],
"width": "auto"
},
{
"type": "Column",
"id": "chevronDown2",
"spacing": "Small",
"verticalContentAlignment": "Center",
"items": [
{
"type": "Image",
"selectAction": {
"type": "Action.ToggleVisibility",
"title": "collapse",
"targetElements": [
"cardContent2",
"chevronUp2",
"chevronDown2"
]
},
"url": "https://adaptivecards.io/content/down.png",
"width": "20px",
"altText": "collapsed"
}
],
"width": "auto"
},
{
"type": "Column",
"id": "chevronUp2",
"isVisible": false,
"spacing": "Small",
"verticalContentAlignment": "Center",
"items": [
{
"type": "Image",
"selectAction": {
"type": "Action.ToggleVisibility",
"title": "expand",
"targetElements": [
"cardContent2",
"chevronUp2",
"chevronDown2"
]
},
"url": "https://adaptivecards.io/content/up.png",
"width": "20px",
"altText": "expanded"
}
],
"width": "auto"
}
]
},
{
"type": "Container",
"id": "cardContent2",
"isVisible": false,
"items": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "* Contoso Car Rentrals, Tues 6/19 at 7:00 AM",
"isSubtle": true,
"wrap": true
},
{
"type": "Container",
"items": [
{
"type": "Input.Text",
"id": "comment2",
"placeholder": "Add your comment here."
}
]
}
]
},
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"title": "Send",
"data": {
"id": "_qkQW8dJlUeLVi7ZMEzYVw",
"action": "comment",
"lineItem": 2
}
}
]
}
],
"width": "auto"
}
]
}
]
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "Center",
"text": "06/25",
"wrap": true
}
],
"width": "auto"
},
{
"type": "Column",
"spacing": "Medium",
"items": [
{
"type": "TextBlock",
"text": "Air Travel Expense",
"wrap": true
}
],
"width": "stretch"
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "$ 4.30",
"wrap": true
}
],
"width": "auto"
},
{
"type": "Column",
"id": "chevronDown3",
"spacing": "Small",
"verticalContentAlignment": "Center",
"items": [
{
"type": "Image",
"selectAction": {
"type": "Action.ToggleVisibility",
"title": "collapse",
"targetElements": [
"cardContent3",
"chevronUp3",
"chevronDown3"
]
},
"url": "https://adaptivecards.io/content/down.png",
"width": "20px",
"altText": "collapsed"
}
],
"width": "auto"
},
{
"type": "Column",
"id": "chevronUp3",
"isVisible": false,
"spacing": "Small",
"verticalContentAlignment": "Center",
"items": [
{
"type": "Image",
"selectAction": {
"type": "Action.ToggleVisibility",
"title": "expand",
"targetElements": [
"cardContent3",
"chevronUp3",
"chevronDown3"
]
},
"url": "https://adaptivecards.io/content/up.png",
"width": "20px",
"altText": "expanded"
}
],
"width": "auto"
}
]
},
{
"type": "Container",
"id": "cardContent3",
"isVisible": false,
"items": [
{
"type": "Container",
"items": [
{
"type": "Input.Text",
"id": "comment3",
"placeholder": "Add your comment here."
}
]
},
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"title": "Send",
"data": {
"id": "_qkQW8dJlUeLVi7ZMEzYVw",
"action": "comment",
"lineItem": 3
}
}
]
}
],
"width": "auto"
}
]
}
]
}
]
},
{
"type": "ColumnSet",
"spacing": "Large",
"separator": true,
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "Right",
"text": "Total Expense Amount \t",
"wrap": true
},
{
"type": "TextBlock",
"horizontalAlignment": "Right",
"text": "Non-reimbursable Amount",
"wrap": true
},
{
"type": "TextBlock",
"horizontalAlignment": "Right",
"text": "Advance Amount",
"wrap": true
}
],
"width": "stretch"
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "404.30"
},
{
"type": "TextBlock",
"text": "(-) 0.00 \t"
},
{
"type": "TextBlock",
"text": "(-) 0.00 \t"
}
],
"width": "auto"
},
{
"type": "Column",
"width": "auto"
}
]
},
{
"type": "Container",
"style": "emphasis",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "Right",
"text": "Amount to be Reimbursed",
"wrap": true
}
],
"width": "stretch"
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"weight": "Bolder",
"text": "$ 404.30"
}
],
"width": "auto"
},
{
"type": "Column",
"width": "auto"
}
]
}
],
"bleed": true
},
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"id": "chevronDown4",
"selectAction": {
"type": "Action.ToggleVisibility",
"title": "show history",
"targetElements": [
"cardContent4",
"chevronUp4",
"chevronDown4"
]
},
"verticalContentAlignment": "Center",
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "Right",
"color": "Accent",
"text": "Show history",
"wrap": true
}
],
"width": 1
},
{
"type": "Column",
"id": "chevronUp4",
"isVisible": false,
"selectAction": {
"type": "Action.ToggleVisibility",
"title": "hide history",
"targetElements": [
"cardContent4",
"chevronUp4",
"chevronDown4"
]
},
"verticalContentAlignment": "Center",
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "Right",
"color": "Accent",
"text": "Hide history",
"wrap": true
}
],
"width": 1
}
]
}
]
},
{
"type": "Container",
"id": "cardContent4",
"isVisible": false,
"items": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "* Expense submitted by **Matt** on Wed, Apr 14th, 2019",
"isSubtle": true,
"wrap": true
},
{
"type": "TextBlock",
"text": "* Expense approved by **Thomas** on Thu, Apr 15th, 2019",
"isSubtle": true,
"wrap": true
}
]
}
]
},
{
"type": "Container",
"items": [
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"title": "Approve",
"style": "positive",
"data": {
"id": "_qkQW8dJlUeLVi7ZMEzYVw",
"action": "approve"
}
},
{
"type": "Action.ShowCard",
"title": "Reject",
"style": "destructive",
"card": {
"type": "AdaptiveCard",
"body": [
{
"type": "Input.Text",
"id": "RejectCommentID",
"placeholder": "Please specify an appropriate reason for rejection.",
"isMultiline": true
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Send",
"data": {
"id": "_qkQW8dJlUeLVi7ZMEzYVw",
"action": "reject"
}
}
]
}
}
]
}
]
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.2",
"fallbackText": "This card requires Adaptive Cards v1.2 support to be rendered properly."
}
How any card is rendered, especially adaptive cards, is entirely dependent on the channel the card is sent to. Bot Framework allows you to configure the card to how you would prefer it to display, but has no control over how a channel chooses to handle and display the incoming activity. Facebook, for example, converts a card to an image with links.
This rendering consideration is also true of Emulator. While Emulator is useful for testing and should be representative of a true rendering, ultimately your bot will run on a different channel (Facebook, Slack, Web Chat) for users. I would focus on designing the card with that channel in mind and use Emulator for overall bot testing.
If you feel there should be greater parity between how a card renders in Adaptive Card Designer and in Emulator, I would suggest you file an issue on the BotFramework-Emulator repo. Be sure to include pertinent details, such as you have provided here.
Hope of help!