Post the Adaptive card in the MS Teams

Summary

This article discusses how to troubleshoot issues with the formatting of Microsoft Teams Adaptive Cards generated through Jira Service Management (Cloud) automation. The user faced problems with the automation rule successfully posting alerts to MS Teams but failing to display the data in the customised card format.

Environment

Jira Service Management (Cloud)

Diagnosis

The automation rule was correctly configured to post messages to Microsoft Teams when a specific priority incident is created. However, the output alerts were not formatted as intended (adaptive cards), despite using a webhook and JSON data.

Cause

The main issue arose due to limitations within Jira’s automation framework and the Adaptive Cards schema. While customization was possible, the intended post card format required certain elements that could be either unsupported or misconfigured in the original setup.

Solution

• To create an Adaptive Card that aligns with a desired format, you can include background images, additional text styling, icons, and more structured layouts. While there's a lot you can customize, please be aware that there are some limitations within Jira's automation and the Adaptive Cards schema.

• After conducting several tests in lab, We've put together an example JSON that closely matches the desired format in terms of colors and background images, although it may not be a perfect match:

  Sample JSON Format:

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 {     "type": "message",     "attachments": [         {             "contentType": "application/vnd.microsoft.card.adaptive",             "content": {                 "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",                 "type": "AdaptiveCard",                 "version": "1.3",                 "backgroundImage": {                     "url": "https://www.w3schools.com/w3images/fjords.jpg"                 },                 "body": [                     {                         "type": "TextBlock",                         "text": "Summary: {{issue.fields.summary}}",                         "weight": "Bolder",                         "size": "ExtraLarge",                         "wrap": true,                         "horizontalAlignment": "Center",                         "color": "Warning"                     },                     {                         "type": "ColumnSet",                         "columns": [                             {                                 "type": "Column",                                 "width": "auto",                                 "items": [                                     {                                         "type": "Image",                                         "url": "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/512px-React-icon.svg.png",                                         "size": "Small",                                         "style": "Person"                                     }                                 ]                             },                             {                                 "type": "Column",                                 "width": "stretch",                                 "items": [                                     {                                         "type": "TextBlock",                                         "text": "{{issue.key}}",                                         "weight": "Bolder",                                         "size": "Medium",                                         "wrap": true,                                         "color": "Warning"                                     }                                 ]                             }                         ]                     },                     {                         "type": "TextBlock",                         "text": "Created Date: {{issue.fields.created}}",                         "weight": "Bolder",                         "size": "Medium",                         "wrap": true,                         "color": "Good"                     }                 ]             }         }     ] }

• Few considerations for image as below:

• Background Image: This image URL (https://www.w3schools.com/w3images/fjords.jpg) will be set as the background of your Adaptive Card.

• Icon Image: This image URL (https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/512px-React-icon.svg.png) will serve as the icon in the card.

• The post card looks as below in my test instance (Please adjust as desired):

  • 

Additional Resources

• Atlassian Partner Directory

• Microsoft Adaptive Cards Documentation

For further customization or troubleshooting, contacting a certified Atlassian partner is recommended.