Adaptive Cards with Microsoft Teams – JSON Templates Part 3


Notice: Trying to access array offset on value of type bool in /var/www/wp-content/plugins/wp-social-sharing/includes/class-public.php on line 81

In a continuation of my earlier article, Adaptive Cards with Microsoft Teams with Examples, we continue with the details of how to create these Adaptive Cards authored with JSON templates. The templates can be used as-is, edited to suit your organization’s needs, or used as a launching point to customize your templates.

Samples and Templates of Adaptive Cards for Microsoft Teams

This is exciting as these select samples and templates are created and offered for Microsoft Teams to show what you can create. These can be copied, edited, and tweaked to create any possible scenario. There are limitless scenarios to design and create.

Product Video

Data JSON:

{
  "odata.metadata": "https://a830edad9050849nda1.sharepoint.com/portals/hub/_api/$metadata#SP.ApiData.VideoItems/@Element",
  "odata.type": "SP.Publishing.VideoItem",
  "odata.id": "https://a830edad9050849nda1.sharepoint.com/portals/hub/_api/VideoService/Channels(guid'1833f204-bb2a-4e93-b8dd-b236daeccae8')/Videos(guid'6b518eae-b0d9-4951-b6da-1e5f58a43daa')",
  "odata.editLink": "VideoService/Channels(guid'1833f204-bb2a-4e93-b8dd-b236daeccae8')/Videos(guid'6b518eae-b0d9-4951-b6da-1e5f58a43daa')",
  "ChannelID": "1833f204-bb2a-4e93-b8dd-b236daeccae8",
  "CreatedDate": "2015-07-08T05:05:06Z",
  "Description": "",
  "DisplayFormUrl": "https://a830edad9050849nda1.sharepoint.com/portals/Red-Channel/pVid/Forms/DispForm.aspx?ID=5",
  "FileName": "Divers - Future of Productivity.mp4",
  "OwnerName": "TEST_TEST_SPOProvHeartbeat_E3_15_4911090814_22,#i:0#.f|membership|admin@a830edad9050849nda1.onmicrosoft.com,#admin@a830edad9050849NDA1.onmicrosoft.com,#admin@a830edad9050849NDA1.onmicrosoft.com,#TEST_TEST_SPOProvHeartbeat_E3_15_4911090814_22,#https://a830edad9050849nda1-my.sharepoint.com:443/User%20Photos/Profile%20Pictures/admin_a830edad9050849nda1_onmicrosoft_com_MThumb.jpg,#,#",
  "ServerRelativeUrl": "/portals/Red-Channel/pVid/Divers - Future of Productivity.mp4",
  "ThumbnailUrl": "https://adaptivecards.io/content/poster-video.png",
  "Title": "Divers - Future of Productivity",
  "ID": "6b518eae-b0d9-4951-b6da-1e5f58a43daa",
  "Url": "https://adaptivecardsblob.blob.core.windows.net/assets/AdaptiveCardsOverviewVideo.mp4",
  "VideoDurationInSeconds": 388,
  "VideoProcessingStatus": 2,
  "ViewCount": -1,
  "YammerObjectUrl": "https://a830edad9050849nda1.sharepoint.com/portals/hub/_layouts/15/videoplayer.aspx?v=https%3A%2F%2Fa830edad9050849nda1%2Esharepoint%2Ecom%2Fportals%2FRed%2DChannel%2FpVid%2FDivers%20%2D%20Future%20of%20Productivity%2Emp4"
}
Template JSON: 

{
        "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
        "type": "AdaptiveCard",
        "version": "1.1",
        "fallbackText": "This card requires Media to be viewed. Ask your platform to update to Adaptive Cards v1.1 for this and more!",
    "body": [
        {
            "type": "Media",
            "poster": "${ThumbnailUrl}",
            "sources": [
                {
                    "mimeType": "video/mp4",
                    "url": "${Url}"
                }
            ]
        }
    ],
    "actions": [
        {
            "type": "Action.OpenUrl",
            "title": "Learn more",
            "url": "https://adaptivecards.io"
        }
    ]
}

Expense Report

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,
                  "style": "heading"
                }
              ],
              "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,
                  "style": "heading"
                }
              ],
              "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",
          "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",
                "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": "${description} $${total} collapsed"
                },
                {
                  "type": "Image",
                  "id": "chevronUp${$index}",
                  "url": "https://adaptivecards.io/content/up.png",
                  "width": "20px",
                  "altText": "${description} $${total} 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."
}

JSON Scripts and Templates: Microsoft.com

  • Saturday, December 04, 2021 By : Mike Maadarani    0 comment