Samples and Templates

These samples are just a teaser of the type of cards you can create. Go ahead and tweak them to make any scenario possible!

Important note about accessibility: In version 1.3 of the schema we introduced a label property on Inputs to improve accessibility. If the Host app you are targetting supports v1.3 you should use label instead of a TextBlock as seen in some samples below. Once most Host apps have updated to the latest version we will update the samples accordingly.

Choose sample:

Templating enables the separation of data from the layout in an Adaptive Card. It helps design a card once, and then populate it with real data at runtime. Note: The binding syntax changed in May 2020. Get started with templating

Expense report sample

JSON
{
	"type": "AdaptiveCard",
	"body": [
		{
			"type": "Container",
			"style": "emphasis",
			"items": [
				{
					"type": "ColumnSet",
					"columns": [
						{
							"type": "Column",
							"items": [
								{
									"type": "TextBlock",
									"size": "Large",
									"weight": "Bolder",
									"text": "**EXPENSE APPROVAL**",
									"wrap": true
								}
							],
							"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
								}
							],
							"width": "stretch"
						},
						{
							"type": "Column",
							"items": [
								{
									"type": "ActionSet",
									"actions": [
										{
											"type": "Action.OpenUrl",
											"title": "EXPORT AS PDF",
											"url": "https://adaptivecards.io"
										}
									]
								}
							],
							"width": "auto"
						}
					]
				},
				{
					"type": "TextBlock",
					"spacing": "Small",
					"size": "Small",
					"weight": "Bolder",
					"color": "Accent",
					"text": "[ER-13052](https://adaptivecards.io)",
					"wrap": true
				},
				{
					"type": "FactSet",
					"spacing": "Large",
					"facts": [
						{
							"title": "Submitted By",
							"value": "**Matt Hidinger**  matt@contoso.com"
						},
						{
							"title": "Duration",
							"value": "2019-06-19 - 2019-06-21"
						},
						{
							"title": "Submitted On",
							"value": "2019-04-14"
						},
						{
							"title": "Reimbursable Amount",
							"value": "$ 400.00"
						},
						{
							"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",
									"wrap": true
								}
							],
							"width": "auto"
						},
						{
							"type": "Column",
							"spacing": "Large",
							"items": [
								{
									"type": "TextBlock",
									"weight": "Bolder",
									"text": "CATEGORY",
									"wrap": true
								}
							],
							"width": "stretch"
						},
						{
							"type": "Column",
							"items": [
								{
									"type": "TextBlock",
									"weight": "Bolder",
									"text": "AMOUNT",
									"wrap": true
								}
							],
							"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.00",
							"wrap": true
						}
					],
					"width": "auto"
				},
				{
					"type": "Column",
					"spacing": "Small",
					"selectAction": {
						"type": "Action.ToggleVisibility",
						"targetElements": [
							"cardContent1",
							"chevronDown1",
							"chevronUp1"
						]
					},
					"verticalContentAlignment": "Center",
					"items": [
						{
							"type": "Image",
							"id": "chevronDown1",
							"url": "https://adaptivecards.io/content/down.png",
							"width": "20px",
							"altText": "Details collapsed"
						},
						{
							"type": "Image",
							"id": "chevronUp1",
							"url": "https://adaptivecards.io/content/up.png",
							"width": "20px",
							"altText": "Details expanded",
							"isVisible": false
						}
					],
					"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.00",
							"wrap": true
						}
					],
					"width": "auto"
				},
				{
					"type": "Column",
					"spacing": "Small",
					"selectAction": {
						"type": "Action.ToggleVisibility",
						"targetElements": [
							"cardContent2",
							"chevronDown2",
							"chevronUp2"
						]
					},
					"verticalContentAlignment": "Center",
					"items": [
						{
							"type": "Image",
							"id": "chevronDown2",
							"url": "https://adaptivecards.io/content/down.png",
							"width": "20px",
							"altText": "Details collapsed"
						},
						{
							"type": "Image",
							"id": "chevronUp2",
							"url": "https://adaptivecards.io/content/up.png",
							"width": "20px",
							"altText": "Details expanded",
							"isVisible": false
						}
					],
					"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-21",
							"wrap": true
						}
					],
					"width": "auto"
				},
				{
					"type": "Column",
					"spacing": "Medium",
					"items": [
						{
							"type": "TextBlock",
							"text": "Excess Baggage Cost",
							"wrap": true
						}
					],
					"width": "stretch"
				},
				{
					"type": "Column",
					"items": [
						{
							"type": "TextBlock",
							"text": "$50.38",
							"wrap": true
						}
					],
					"width": "auto"
				},
				{
					"type": "Column",
					"spacing": "Small",
					"selectAction": {
						"type": "Action.ToggleVisibility",
						"targetElements": [
							"cardContent3",
							"chevronDown3",
							"chevronUp3"
						]
					},
					"verticalContentAlignment": "Center",
					"items": [
						{
							"type": "Image",
							"id": "chevronDown3",
							"url": "https://adaptivecards.io/content/down.png",
							"width": "20px",
							"altText": "Details collapsed"
						},
						{
							"type": "Image",
							"id": "chevronUp3",
							"url": "https://adaptivecards.io/content/up.png",
							"width": "20px",
							"altText": "Details expanded",
							"isVisible": false
						}
					],
					"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": "$450.38",
							"wrap": true
						},
						{
							"type": "TextBlock",
							"text": "(-) 50.38 \t",
							"wrap": true
						},
						{
							"type": "TextBlock",
							"text": "(-) 0.00 \t",
							"wrap": true
						}
					],
					"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": "$ 400.00",
									"wrap": true
								}
							],
							"width": "auto"
						},
						{
							"type": "Column",
							"width": "auto"
						}
					]
				}
			],
			"bleed": true
		},
		{
			"type": "ColumnSet",
			"columns": [
				{
					"type": "Column",
					"selectAction": {
						"type": "Action.ToggleVisibility",
						"targetElements": [
							"cardContent4",
							"showHistory",
							"hideHistory"
						]
					},
					"verticalContentAlignment": "Center",
					"items": [
						{
							"type": "TextBlock",
							"id": "showHistory",
							"horizontalAlignment": "Right",
							"color": "Accent",
							"text": "Show history",
							"wrap": true
						},
						{
							"type": "TextBlock",
							"id": "hideHistory",
							"horizontalAlignment": "Right",
							"color": "Accent",
							"text": "Hide history",
							"wrap": true,
							"isVisible": false
						}
					],
					"width": 1
				}
			]
		},
		{
			"type": "Container",
			"id": "cardContent4",
			"isVisible": false,
			"items": [
				{
					"type": "Container",
					"items": [
						{
							"type": "TextBlock",
							"text": "* Expense submitted by **Matt Hidinger** on Mon, Jul 15, 2019",
							"isSubtle": true,
							"wrap": true
						},
						{
							"type": "TextBlock",
							"text": "* Expense approved by **Thomas** on Mon, Jul 15, 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."
}
Data JSON
{
	"code": "ER-13052",
	"message": "success",
	"created_by_name" : "Matt Hidinger",
	"created_date" : "2019-07-15T18:33:12+0800",
    "submitted_date": "2019-04-14T18:33:12+0800",
    "creater_email" : "matt@contoso.com",
	"status" : "Pending",
    "status_url" : "https://adaptivecards.io/content/pending.png",
	"approver": "Thomas",
    "purpose" : "Trip to UAE",
	"approval_date" : "2019-07-15T22:33:12+0800",
    "approver" : "Thomas",
    "approver_email" : "thomas@contoso.com",
    "other_submitter" : "David", 
    "other_submitter_email" : "david@contoso.com", 

	"expenses": [
		{
			"expense_id": "16367000000083065",
            "approver" : "Thomas",
			"date": "2017-02-21",
			"description": "Air Travel Expense",
			"created_by": "636965431200000000",
			"created_by_name": "PATRICIA",
			"employee_number": "E001",
			"currency_id": "16367000000000097",
			"currency_code": "USD",
			"paid_through_account_id": "16367000000036003",
			"paid_through_account_name": "Employee Reimbursements",
			"bcy_total": 13900.79,
			"bcy_subtotal": 13900.79,
			"total": 300,
			"total_without_tax": 300,
			"is_billable": true,
			"is_reimbursable": true,
			"reference_number": "DD145",
			"due_days": "Due in 15 days",
			"merchant_id": "16367000000074027",
			"merchant_name": "ABS Solutions",
			"status": "approved",
			"created_time": "2019-06-19T18:33:12+0800",
			"last_modified_time": "2017-02-21T18:42:46+0530",
			"receipt_name": "receipt1.jpg",
			"report_id": "16367000000083075",
			"mileage_type": "non_mileage",
			"report_name": "Purchase",
			"is_receipt_only": false,
			"distance": 0,
			"per_diem_rate": 0,
			"per_diem_days": 0,
			"per_diem_id": "",
			"per_diem_name": "",
			"expense_type": "non_mileage",
			"location": "Washington",
			"receipt_type": "jpg",
			"policy_violated": false,
			"comments_count": 0,
			"report_status": "submitted",
			"price_precision": 2,
			"mileage_rate": 0,
			"mileage_unit": "km",
			"receipt_status": "processed",
			"is_uncategorized": false,
			"is_expired": false,
			"gl_code": "LG001",
			"exchange_rate": 66.943366,
			"start_reading": "",
			"end_reading": "",
			"payment_mode": "Check",
			"customer_id": "27927000000075081",
			"customer_name": "ACME Corp.",
			"custom_fields": [
				{
					"customfield_id": "16367000000277001",
					"label": "Other Name",
					"value": "Leg 1 on Tue, Jun 19th, 2019 at 6:00 AM."
				},
				{
					"customfield_id": "16367000000277001",
					"label": "Other Name",
					"value": "Leg 2 on Tue, Jun 19th, 2019 at 7:15 PM."
				}				
			],
			"project_id": "27927000001243001",
			"project_name": "Coffee Research",
			"transaction_description": "",
			"tax_id": "16367000000086001",
			"tax_name": "Sales Tax",
			"tax_percentage": 2,
			"amount": 207.65,
			"is_inclusive_tax": false,
			"vehicle_type": "Bike",
			"vehicle_id": "17456000000078029",
			"fuel_type": "lpg",
			"engine_capacity_range": "between_1401cc_and_1600cc",
			"is_personal": false,
			"policy_id": "16367000000092011",
			"policy_name": "LIC",
			"documents": [
				{
					"file_name": "receipt1.jpg",
					"file_size_formatted": "71.8 KB",
					"attachment_order": 1,
					"document_id": "16367000000083071"
				}
			],
			"reimbursement_reference": "",
			"reimbursement_date": "",
			"reimbursement_paid_through_account_id": "",
			"reimbursement_paid_through_account_name": "",
			"reimbursement_currency_id": "",
			"reimbursement_currency_code": ""
		},
		{
			"expense_id": "16367000000083065",
			"date": "2019-06-19",
			"description": "Auto Mobile Expense",
			"created_by": "636965431200000000",
			"created_by_name": "PATRICIA",
			"employee_number": "E001",
			"currency_id": "16367000000000097",
			"currency_code": "USD",
			"paid_through_account_id": "16367000000036003",
			"paid_through_account_name": "Employee Reimbursements",
			"bcy_total": 13900.79,
			"bcy_subtotal": 13900.79,
			"total": 100,
			"total_without_tax": 100,
			"is_billable": true,
			"is_reimbursable": true,
			"reference_number": "DD145",
			"due_days": "Due in 15 days",
			"merchant_id": "16367000000074027",
			"merchant_name": "ABS Solutions",
			"status": "submitted",
			"created_time": "2019-06-19T18:33:12+0800",
			"last_modified_time": "2017-02-21T18:42:46+0530",
			"receipt_name": "receipt1.jpg",
			"report_id": "16367000000083075",
			"mileage_type": "non_mileage",
			"report_name": "Purchase",
			"is_receipt_only": false,
			"distance": 0,
			"per_diem_rate": 0,
			"per_diem_days": 0,
			"per_diem_id": "",
			"per_diem_name": "",
			"expense_type": "non_mileage",
			"location": "Washington",
			"receipt_type": "jpg",
			"policy_violated": false,
			"comments_count": 0,
			"report_status": "submitted",
			"price_precision": 2,
			"mileage_rate": 0,
			"mileage_unit": "km",
			"receipt_status": "processed",
			"is_uncategorized": false,
			"is_expired": false,
			"gl_code": "LG001",
			"exchange_rate": 66.943366,
			"start_reading": "",
			"end_reading": "",
			"payment_mode": "Check",
			"customer_id": "27927000000075081",
			"customer_name": "ACME Corp.",
			"custom_fields": [
				{
					"customfield_id": "16367000000277001",
					"label": "Other Name",
					"value": " Contoso Car Rentrals, Tues 6/19 at 7:00 AM"
				}
			],
			"project_id": "27927000001243001",
			"project_name": "Coffee Research",
			"transaction_description": "",
			"tax_id": "16367000000086001",
			"tax_name": "Sales Tax",
			"tax_percentage": 2,
			"amount": 207.65,
			"is_inclusive_tax": false,
			"vehicle_type": "Bike",
			"vehicle_id": "17456000000078029",
			"fuel_type": "lpg",
			"engine_capacity_range": "between_1401cc_and_1600cc",
			"is_personal": false,
			"policy_id": "16367000000092011",
			"policy_name": "LIC",
			"documents": [
				{
					"file_name": "receipt1.jpg",
					"file_size_formatted": "71.8 KB",
					"attachment_order": 1,
					"document_id": "16367000000083071"
				}
			],
			"reimbursement_reference": "",
			"reimbursement_date": "",
			"reimbursement_paid_through_account_id": "",
			"reimbursement_paid_through_account_name": "",
			"reimbursement_currency_id": "",
			"reimbursement_currency_code": ""
		},
		{
			"expense_id": "16367000000083065",
			"date": "2019-06-21",
			"description": "Excess Baggage Cost",
			"created_by": "636967159200000000",
			"created_by_name": "PATRICIA",
			"employee_number": "E001",
			"currency_id": "16367000000000097",
			"currency_code": "USD",
			"paid_through_account_id": "16367000000036003",
			"paid_through_account_name": "Employee Reimbursements",
			"bcy_total": 13900.79,
			"bcy_subtotal": 13900.79,
			"total": 50.38,
			"total_without_tax": 4.3,
			"is_billable": true,
			"is_reimbursable": false,
			"reference_number": "DD145",
			"due_days": "Due in 15 days",
			"merchant_id": "16367000000074027",
			"merchant_name": "ABS Solutions",
			"status": "submitted",
			"created_time": "2019-06-21T18:33:12+0800",
			"last_modified_time": "2017-02-21T18:42:46+0530",
			"receipt_name": "receipt1.jpg",
			"report_id": "16367000000083075",
			"mileage_type": "non_mileage",
			"report_name": "Purchase",
			"is_receipt_only": false,
			"distance": 0,
			"per_diem_rate": 0,
			"per_diem_days": 0,
			"per_diem_id": "",
			"per_diem_name": "",
			"expense_type": "non_mileage",
			"location": "Washington",
			"receipt_type": "jpg",
			"policy_violated": false,
			"comments_count": 0,
			"report_status": "submitted",
			"price_precision": 2,
			"mileage_rate": 0,
			"mileage_unit": "km",
			"receipt_status": "processed",
			"is_uncategorized": false,
			"is_expired": false,
			"gl_code": "LG001",
			"exchange_rate": 66.943366,
			"start_reading": "",
			"end_reading": "",
			"payment_mode": "Check",
			"customer_id": "27927000000075081",
			"customer_name": "ACME Corp.",
			"custom_fields": [		   
			],
			"project_id": "27927000001243001",
			"project_name": "Coffee Research",
			"transaction_description": "",
			"tax_id": "16367000000086001",
			"tax_name": "Sales Tax",
			"tax_percentage": 2,
			"amount": 207.65,
			"is_inclusive_tax": false,
			"vehicle_type": "Bike",
			"vehicle_id": "17456000000078029",
			"fuel_type": "lpg",
			"engine_capacity_range": "between_1401cc_and_1600cc",
			"is_personal": false,
			"policy_id": "16367000000092011",
			"policy_name": "LIC",
			"documents": [
				{
					"file_name": "receipt1.jpg",
					"file_size_formatted": "71.8 KB",
					"attachment_order": 1,
					"document_id": "16367000000083071"
				}
			],
			"reimbursement_reference": "",
			"reimbursement_date": "",
			"reimbursement_paid_through_account_id": "",
			"reimbursement_paid_through_account_name": "",
			"reimbursement_currency_id": "",
			"reimbursement_currency_code": ""
		}
	]
}
Template JSON
{
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "Container",
            "style": "emphasis",
            "items": [
                {
                    "type": "ColumnSet",
                    "columns": [
                        {
                            "type": "Column",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "size": "Large",
                                    "weight": "Bolder",
                                    "text": "**EXPENSE APPROVAL**",
                                    "wrap": true
                                }
                            ],
                            "width": "stretch"
                        },
                        {
                            "type": "Column",
                            "items": [
                                {
                                    "type": "Image",
                                    "url": "${status_url}",
                                    "altText": "${status}",
                                    "height": "30px"
                                }
                            ],
                            "width": "auto"
                        }
                    ]
                }
            ],
            "bleed": true
        },
        {
            "type": "Container",
            "items": [
                {
                    "type": "ColumnSet",
                    "columns": [
                        {
                            "type": "Column",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "size": "ExtraLarge",
                                    "text": "${purpose}",
                                    "wrap": true
                                }
                            ],
                            "width": "stretch"
                        },
                        {
                            "type": "Column",
                            "items": [
                                {
                                    "type": "ActionSet",
                                    "actions": [
                                        {
                                            "type": "Action.OpenUrl",
                                            "title": "EXPORT AS PDF",
                                            "url": "https://adaptivecards.io"
                                        }
                                    ]
                                }
                            ],
                            "width": "auto"
                        }
                    ]
                },
                {
                    "type": "TextBlock",
                    "spacing": "Small",
                    "size": "Small",
                    "weight": "Bolder",
                    "color": "Accent",
                    "text": "[${code}](https://adaptivecards.io)",
                    "wrap": true
                },
                {
                    "type": "FactSet",
                    "spacing": "Large",
                    "facts": [
                        {
                            "title": "Submitted By",
                            "value": "**${created_by_name}**  ${creater_email}"
                        },
                        {
                            "title": "Duration",
                            "value": "${formatTicks(min(select(expenses, x, int(x.created_by))), 'yyyy-MM-dd')} - ${formatTicks(max(select(expenses, x, int(x.created_by))), 'yyyy-MM-dd')}"
                        },
                        {
                            "title": "Submitted On",
                            "value": "${formatDateTime(submitted_date, 'yyyy-MM-dd')}"
                        },
                        {
                            "title": "Reimbursable Amount",
                            "value": "$${formatNumber(sum(select(expenses, x, if(x.is_reimbursable, x.total, 0))), 2)}"
                        },
                        {
                            "title": "Awaiting approval from",
                            "value": "**${approver}**  ${approver_email}"
                        },
                        {
                            "title": "Submitted to",
                            "value": "**${other_submitter}**   ${other_submitter_email}"
                        }
                    ]
                }
            ]
        },
        {
            "type": "Container",
            "spacing": "Large",
            "style": "emphasis",
            "items": [
                {
                    "type": "ColumnSet",
                    "columns": [
                        {
                            "type": "Column",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "weight": "Bolder",
                                    "text": "DATE",
                                    "wrap": true
                                }
                            ],
                            "width": "auto"
                        },
                        {
                            "type": "Column",
                            "spacing": "Large",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "weight": "Bolder",
                                    "text": "CATEGORY",
                                    "wrap": true
                                }
                            ],
                            "width": "stretch"
                        },
                        {
                            "type": "Column",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "weight": "Bolder",
                                    "text": "AMOUNT",
                                    "wrap": true
                                }
                            ],
                            "width": "auto"
                        }
                    ]
                }
            ],
            "bleed": true
        },
        {
            "$data": "${expenses}",
            "type" : "Container",
            "items": [
                {
                    "type": "ColumnSet",
                    "columns": [
                        {
                            "type": "Column",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "text": "${formatDateTime(created_time, 'MM-dd')}",
                                    "wrap": true
                                }
                            ],
                            "width": "auto"
                        },
                        {
                            "type": "Column",
                            "spacing": "Medium",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "text": "${description}",
                                    "wrap": true
                                }
                            ],
                            "width": "stretch"
                        },
                        {
                            "type": "Column",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "text": "$${formatNumber(total, 2)}",
                                    "wrap": true
                                }
                            ],
                            "width": "auto"
                        },
                        {
                            "type": "Column",
                            "spacing": "Small",
                            "selectAction": {
                                "type": "Action.ToggleVisibility",
                                "title": "expand",
                                "targetElements": [
                                    "cardContent${$index}",
                                    "chevronDown${$index}",
                                    "chevronUp${$index}"
                                ]
                            },
                            "verticalContentAlignment": "Center",
                            "items": [
                                {
                                    "type": "Image",
                                    "id": "chevronDown${$index}",
                                    "url": "https://adaptivecards.io/content/down.png",
                                    "width": "20px",
                                    "altText": "Details collapsed"
                                },
                                {
                                    "type": "Image",
                                    "id": "chevronUp${$index}",
                                    "url": "https://adaptivecards.io/content/up.png",
                                    "width": "20px",
                                    "altText": "Details expanded",
                                    "isVisible": false
                                }
                            ],
                            "width": "auto"
                        }
                    ]
                },
                {
                    "type": "Container",
                    "id": "cardContent${$index}",
                    "isVisible": false,
                    "items": [
                        {
                            "type": "Container",
                            "items": [
                                {
                                    "$data": "${custom_fields}",
                                    "type": "TextBlock",
                                    "text": "* ${value}",
                                    "isSubtle": true,
                                    "wrap": true
                                },
                                {
                                    "type": "Container",
                                    "items": [
                                        {
                                            "type": "Input.Text",
                                            "id": "comment${$index}",
                                            "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",
            "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": "$${formatNumber(sum(select(expenses, x, x.total)), 2)}",
                            "wrap": true
                        },
                        {
                            "type": "TextBlock",
                            "text": "(-) $${formatNumber(sum(select(expenses, x, if(x.is_reimbursable, 0, x.total))), 2)} \t",
                            "wrap": true
                        },
                        {
                            "type": "TextBlock",
                            "text": "(-) 0.00 \t",
                            "wrap": true
                        }
                    ],
                    "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": "$${formatNumber(sum(select(expenses, x, if(x.is_reimbursable, x.total, 0))), 2)}",
                                    "wrap": true
                                }
                            ],
                            "width": "auto"
                        },
                        {
                            "type": "Column",
                            "width": "auto"
                        }
                    ]
                }
            ],
            "bleed": true
        },
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "selectAction": {
                        "type": "Action.ToggleVisibility",
                        "targetElements": [
                            "cardContent4",
                            "showHistory",
                            "hideHistory"
                        ]
                    },
                    "verticalContentAlignment": "Center",
                    "items": [
                        {
                            "type": "TextBlock",
                            "id": "showHistory",
                            "horizontalAlignment": "Right",
                            "color": "Accent",
                            "text": "Show history",
                            "wrap": true
                        },
                        {
                            "type": "TextBlock",
                            "id": "hideHistory",
                            "horizontalAlignment": "Right",
                            "color": "Accent",
                            "text": "Hide history",
                            "wrap": true,
                            "isVisible": false
                        }
                    ],
                    "width": 1
                }
            ]
        },
        {
            "type": "Container",
            "id": "cardContent4",
            "isVisible": false,
            "items": [
                {
                    "type": "Container",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "* Expense submitted by **${created_by_name}** on {{DATE(${formatDateTime(created_date, 'yyyy-MM-ddTHH:mm:ssZ')}, SHORT)}}",
                            "isSubtle": true,
                            "wrap": true
                        },
                        {
                            "type": "TextBlock",
                            "text": "* Expense ${expenses[0].status} by **${expenses[0].approver}** on {{DATE(${formatDateTime(approval_date, 'yyyy-MM-ddTHH:mm:ssZ')}, SHORT)}}",
                            "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"
                            }
                        }
                    ]
                }
            ]
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.2",
    "fallbackText": "This card requires Adaptive Cards v1.2 support to be rendered properly."
}
Adaptive Card