Migrate incoming webhook to power automate for Teams

Microsoft has announced that the incoming webhook connector will be removed from MS Teams in the coming months. This post provides a detailed guide on how to migrate to alternative solutions.

(A Chinese version of this post is available: 將 Teams 的 incoming webhook 移轉到調適型卡片)

What happened

Starting from 7/9, a message is automatically added to every message card that is posted via incoming webhook:

The description guide me to the post Retirement of Office 365 connectors within Microsoft Teams. It reveals:

• The change is announced on 2024/7/3.
• People won't be able to create new connector since 8/15
• All existing connectors will stop working since 10/1 Existing connector works until 2024/12/31, and could be extended to 2025 Dec if some agreement is signed (Edited)

This means they have introduced a breaking change globally, but have only given developers a three-month transition period.

Further, they no longer broadcast this change on message card since 7/17 - without expanding the period. I think some users might find their notification system stop working later this year.

Not a drop-in replacement

The replacement for incoming webhook is Microsoft Power Automate. And after a quick trial, I confirmed that I cannot simply change the webhook URL to migrate the notifications to the new platform.

Adaptive card

I need to use an adaptive card to post via Power Automate. Therefore, the initial challenge is creating the card and filling the values.

Then I found this site really useful: Adaptive Cards Designer

The latest version of Adaptive Cards is 1.6. However, some components from version 1.5 are still buggy in Teams. Therefore, it's suggested to downgrade the target version to 1.4. You can change the target version using the dropdown menu at the top-right of the designer site.

Personal note for v1.5

As of July 2024, Microsoft's document states that the Teams platform supports version 1.5. However, when I tried it, I encountered the error message:

I follow the suggestion from this article and downgrade my card to version 1.4. Then the issue is resolved.

Power automate webhook

The generated adaptive card payload cannot be used directly in a power automate webhook. However, it can be easily adapted by wrapping the payload with the following code:

{
    "type": "message",
    "attachments": [
        {
            "contentType": "application/vnd.microsoft.card.adaptive",
            "content": {
                "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
                "type": "AdaptiveCard",
                "version": "1.4",
                "body": [
                    // card payload
                ]
            }
        }
    ]
}

Please replace the attachments/content with the entire payload card generated from designer site. The field such as $schema and type are added as an anchor to let you understand the hierarchy in the payload.

Posting this payload to power automate webhook URL and you should find the card appears on Teams. ✨🍰✨

Improving card appearance

Well, it works, but the posted card doesn't look that great (for me)...

Full width card

It looks okay for the example since there are not much information on it. But I'm doing this for posting some production information to Teams, and I want more space.

The solution is adding msteams snippet to the root space:

{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "msteams": {
        "width": "Full"
    },
    "body": [ ... ]
}

Ref: Construct full width cards

The footer

Another annoying thing is the footer - the line that reads:

The hyperlink on "Get template" directs the user to create a new power automate workflow. Instead of being a hint for workflows, it feels more like a footer ad and could be misleading.

This article notes that this line won't appear in the cloned workflow. By clicking "Save as" and switching to the new webhook URL, the problem could be fixed.

Recap

• Use adaptive card 1.4
• Create the adaptive card in Adaptive Cards Designer
• Wrap adaptive card payload before sending to power automate webhook
• Add msteams snippet if you want the card to be full width
• Copy the workflow to remove the annoying footer