Use Adaptive Cards for Stylish Team Notifications
Learn how to stylishly notify teams using Adaptive Cards! Create platform-agnostic UI snippets to enhance your Microsoft Teams communication.
Creating and Delivering Notifications with Adaptive Cards in Teams
This blog post, authored by Lewis Baybutt [MVP], expertly guides us through the utilization of adaptive cards for delivering stylistic notifications in Teams (more information). Baybutt describes adaptive cards as platform-agnostic UI snippets written in JSON. These can be exchanged between applications and services, automatically adapting their visual layout based on the application that hosts them.
Designing an adaptive card, Baybutt explains, involves inserting placeholders into the card's design, which can be replaced with dynamic content later. This can include chat or channel-specific content when transmitting the card among your Team members or other communication stems involved. Baybutt recommends using adaptivecards.io for designing adaptive cards. The design process is user-friendly; users can drag card elements in and modify their properties to create the desired design.
The JSON payload changes with every adjustment made to the card. A standard card structure consists of a hardcoded title, logo, subhead, current date field, and a set body. Additionally, there can be "actions" or buttons to launch specific URLs.
Implementing Adaptive Cards with Power Automate
Carrying the card into Teams world using Power Automate enables smooth transmission of the adaptive card. Baybutt explains that a wider array of Teams users can be engaged by posting in an actual team channel. To post the adaptive card, Power Automate's WordPress connector and 'Get site statistics' action are used.
Next, Baybutt discusses integrating the adaptive card in a chat or channel using the Microsoft Teams connector. Describing the procedure, Baybutt says you "post as the flow bot, in a chat with the flow bot, with oneself as the recipient".
For incorporating dynamic content from influential sources, some hard-coded fields in the JSON can be replaced using expressions. After careful modifications, the version can be tested. A personal test by Baybutt emphasized changing the version to 1.4 for flawless operation.
Insights and General Overview
Baybutt's post provides a comprehensive guide to improve notification delivery in Teams using Adaptive Cards, explaining how Adaptive Cards adapt their UI based on the application they’re hosted on. This feature can be leveraged to improve the aesthetic and functional aspects of notifications. Power Automate is suggested as an effective tool to post these adaptable cards across Teams passionately and efficiently, thereby improving the enrichment of communication and collaboration.
Learn about Notify teams with style using Adaptive Cards
Adaptive Cards provide a great way to bring an interactive notification system in collaborative platforms, like Microsoft Teams. They are basically UI elements defined in JSON format that can be integrated into other applications. You might be curious about how to create and integrate them? Let’s dive in.
Adaptive Cards can be created by anyone and can seamlessly adapt their appearance based on the platform they are presented in. For example, if presented in Teams, they adapt to match the Teams' user interface.
The design for these Cards can be done on adaptivecards.io. Besides arranging elements and defining individual properties, you can see the JSON code being automatically generated for any changes you make to your card. This power of customization lets you create engaging and dynamic interface snippets.
You might now be wondering if we are strictly confined to writing JSON to create Adaptive Cards? The answer is no. Along with using adaptivecards.io, you can also harness the power of Power Apps to do so. This however is still in preview and might undergo further changes.
Once the design of these cards is finalized, the real magic happens when we decide to share them with our peers on some communication channel, like Teams. Tools like Power Automate prove to be a great help in this.
With Power Automate, we can integrate our application with the Microsoft Teams' communication channels. The content inside these Adaptive Cards can then be posted in these channels using Power Automate workflows.
The flow of these operations begins with a trigger. For instance, we will use a Recurrence Trigger to post Adaptive Card notifications daily at a specified time.
Power Automate’s WordPress Connector lets us fetch data for the Adaptive Card by calling a WordPress action in the flow. We then set 'post adaptive card in a chat or channel' action with all the necessary information including the final adaptive card payload.
This customizable setup lets us hard-code or soft-code values. For example, we can install a JavaScript plugin like Moment.js, and use it to replace any placeholder in the JSON that needs to display the current date. Similarly, we can pull dynamic data from WordPress for site statistics and post it into the Adaptive Card.
Finally, after setting the flow with everything in place including the Adaptive Card's JSON, all we need to do is start the Power Automate flow, and voila! Your personalized and interactive Adaptive Card is ready to be shared with your team at the scheduled time.
While doing these operations, if you ever get stuck somewhere or see unexpected behavior, always remember to check the version of Adaptive Cards you're using. Upgrading or downgrading it might solve your issue.
This was a walkthrough of how you can enhance your communication experience with Adaptive Cards and Power Automate. This powerful duo can be your go-to tool for creating engaging and dynamic UI snippets for versatile platforms. I hope this post has helped you in understanding the concept and working of Adaptive Cards and Power Automate better.
More links on about Notify teams with style using Adaptive Cards
- Notify teams with style using Adaptive Cards
- Notify teams with style using Adaptive Cards. 21st January 2023. Do you ever have a need to post notifications to people in Teams based on a trigger or ...
- Create flows that post adaptive cards to Microsoft Teams
- Apr 13, 2023 — Use simple blocks of data rather than complex table arrays. Prerequisites. Microsoft Teams with the Power Automate app installed. Add an action.
- Replace notification with adaptive card (contains video)
- Feb 3, 2023 — We'll replace this Teams channel notification with an adaptive card notification that will be initiated using a Power Automate flow. Watch this ...
Keywords
Notify Teams, Adaptive Cards, Style Using, Cards Communication, Messaging Teams, Adaptive Notifications, Stylish Notifications, Notify with Style, Teams Collaboration, Adaptive Teams Communication