New Microsoft Teams Workflows WebHook Explained
In today’s digital workplace, automation plays a critical role in enhancing productivity and streamlining communication. Microsoft Teams, already a powerful collaboration tool, takes automation to a new level with its Workflows app, making it easy for users to create incoming webhooks and display adaptive cards seamlessly. This guide will walk you through setting up both, step by step.
Why do I need to do this?
From roughly 2017 to August 2024 there has been Office 365 connectors have been available for this use case. Microsoft decided to retire the Office 365 connectors service in Microsoft Teams and you can’t access them in the New Microsoft Teams client. You have until December 2025 to update your webhooks or else you’re webhooks will stop working.
Here is the full Microsoft Message Center Notification for you to read. On the plus slide they extended the timeline from a couple months to over a year.
Now lets deep dive the new solution!
What Are Incoming Webhooks?
Incoming webhooks in Microsoft Teams allow external services to send messages directly to a Teams channel. These messages can be formatted as JSON and can include rich content such as Adaptive Cards, which provide a visually appealing and structured way to present information.
What Are Adaptive Cards?
Adaptive Cards are flexible, platform-agnostic snippets of UI that allow you to present data in a visually rich format within Teams. With Adaptive Cards, you can include text, images, buttons, and other elements to make your messages interactive and engaging.
Video Guide
Step-by-Step Guide to Setting Up Incoming Webhooks and Adaptive Cards in Teams Workflows
When working with incoming webhooks there is and “chicken and the egg” situation when setting this up. Both the Microsoft and the Application you’ll be working with will be asking for information from the other side before it’s made yet. When it comes to webhooks, json, and adaptive cards it can get really confusing really quickly. So lets break it down step by step
Get the Right Tools for the Job!
The underlying code for webhooks and adaptive cards is JSON. Well it’s true that you can use notepad to edit JSON, it’s a much better idea to get an IDE/Editor to do this. The best free solution in my opinion is VS Code or Visual Studio Code if you want to use the full name. VS Code is a available for every platform and has 1000s of extensions to extend it’s capability. It’s Notepad++ on steroids.
After you have VS Code installed, you need to add a couple of extensions to make this process super easy.
The first extension to add is called Adaptive Card Previewer.
This extension gives you a live preview of your card so you can easily see the end result of the card without having to testing in production systems. It also give you previews in Light and Dark mode as well so you can verify you’re custom color scheme will work.
The next extension is called Adaptive Card Studio. This extension adds in all the resources you could ever need to make custom Adaptive Cards.
When you add these extensions to VS Code, then you have everything you need to dominated Adaptive Cards in Microsoft Teams.
You Get a Template!
Trying new stuff is a little easier when you have a usable example to reference. The following examples and other scripting items are available on my GitHub repository. I’ve created a basic Adaptive Card notification for a Synology NAS and simple alert for when you’re assigned a task/issue in Jira.
Synology NAS Alert
Synology’s webhook alerts are pretty basic and are great starting point for adaptive cards development.
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "TextBlock",
"text": "Synology NAS Alert",
"spacing": "Medium",
"horizontalAlignment": "Center",
"size": "ExtraLarge",
"weight": "Bolder",
"color": "Accent"
},
{
"type": "TextBlock",
"color": "attention",
"size" : "large",
"weight": "bolder",
"text": "Critical Alert!",
"separator": true
},
{
"type": "TextBlock",
"text": "**Details**"
},
{
"separator": true,
"type": "TextBlock",
"text": "@{body('Parse_JSON')?['text']}",
"wrap": true
},
{
"type": "TextBlock",
"text": "**Resources**"
},
{
"separator": true,
"type": "TextBlock",
"text": "[Click Here](https://synology.com) to View"
}
]
} This creates a nice but simply Adaptive Card through Power Automate.
Jira Assignee Adaptive Card
The second example I created is for Jira. This example is for when some one is assigned a task in Jira. This template is more advanced because Jira is a more advanced platform.
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "TextBlock",
"text": "Jira Assignment",
"spacing": "Medium",
"horizontalAlignment": "Center",
"size": "extraLarge",
"weight": "Bolder",
"color": "Accent"
},
{
"type": "TextBlock",
"text": "_The new Jira: from **teams** to dreams_",
"separator": true
},
{
"type": "TextBlock",
"text": "@{body('Parse_JSON')?['fields']?['project']?['name']} - @{body('Parse_JSON')?['fields']?['summary']}",
"weight": "Bolder",
"size": "Large",
"spacing": "None",
"wrap": true
},
{
"type": "TextBlock",
"text": "**Details**"
},
{
"separator": true,
"type": "TextBlock",
"text": "@{body('Parse_JSON')?['fields']?['description']}",
"wrap": true
},
{
"type": "TextBlock",
"text": "**Resources**"
},
{
"separator": true,
"type": "TextBlock",
"text": "[Click Here](https://YOURJIRATENANT.atlassian.net/jira/software/projects/KAN/boards/1?selectedIssue=@{body('Parse_JSON')?['key']}) to View"
}
]
}This alert passes the project name, issue name, description, and a direct link to the task in jira.
To be fair, Jira has a lot of out of the box integrations. This could be redundant with other features.
