Post the Adaptive card in the MS Teams


Platform Notice: Cloud - This article applies to Atlassian products on the cloud platform.

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:

    {
        "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:
  • The post card looks as below in my test instance (Please adjust as desired):

Additional Resources

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


Last modified on Oct 24, 2024

Was this helpful?

Yes
No
Provide feedback about this article
Powered by Confluence and Scroll Viewport.