Post Adaptive Card to a Teams Channel on Opportunity Win

After playing around with adaptive cards a bit this weekend, I have decided that this is actually one of my favorite things to use when posting messages to Microsoft Teams or Outlook! First let me explain what adaptive cards are and how we can use them in different applications. Adaptive cards are built from JSON and that content can then be rendered inside a host application like Microsoft Teams, Outlook, Webchat, Cortana, etc. In short adaptive cards are messages that will adapt to the user interface it is presented in. So for example if we use an adaptive card in Microsoft Teams, it can look different from when we use an adaptive card in Microsoft Outlook. We can show data in adaptive cards, but we can also add images, Maps (etc.) or buttons that will allows end users to perform actions or enter data into the card. Your first thought when you read that adaptive cards are created using JSON was probably ‘I am not a developer so I can’t use this’, which was my thought as well. This is not true! You can still build your own adaptive cards by using the adaptive cards designer which you can access online!!

Scenario

The scenario for this article is as follows: an opportunity closes as won in Dynamics 365 Sales, after which an adaptive card is posted to a Microsoft Team channel, tagging the owner of the opportunity and showing details of the opportunity. I will show the opportunity name, the actual revenue and a button that will allow users to click and open the opportunity record. I will first create the Adaptive Card and then use Power Automate to post the card to one of my Teams channels.

Create the Adaptive Card

You can access the adaptive card designer here. When you open the page you’ll notice a simple card is loaded on the screen as an example. If you click on the ‘Samples’ tab on the top of the screen you’ll be able to take a look at several different samples that you can start from. Once you find a sample that you like, click on ‘Try it yourself’ on the left side of the screen. The card will be loaded in the window and you’ll be able to start editing the card.
For my example I choose the ‘Stock Update’ card. On the top of the screen you’ll see ‘Select host app’ which is a drop down field. Since I am going to use this card in Microsoft Teams, and my instance is setup to use the light background, I choose the ‘Microsoft Teams – Light’ option.
You’ll see the preview of the card in the window. On the right hand side of the card you’ll see the card structure. If you click inside an element in the preview window (I clicked inside the box that shows ‘Open, High and Low’) you’ll see data appear in the element properties window. Since I don’t need this box, I am going to delete it by clicking the X button twice. Then I click inside the field that has ‘Microsoft Corporation’ in it and in the ‘Element Properties’ window I’ll type ‘CONGRATULATIONS ON YOUR WIN <Owner>’ in the text field. In my flow I’ll replace <Owner> with the data from the closed opportunity so that I can tag the opportunity owner when I post the card to Teams. When you scroll down in the ‘Element Properties’ window you’ll notice under the ‘Style’ section that you can change the font side and color. Set the font side to ‘Extra Large’ and the color to ‘Attention’.
Click on the field that reads ‘Nasdaq Global Select: MSFT’ and enter <Topic> in the text field under the ‘Element Properties’. We will replace this later in the Power Automate flow with dynamic content from the opportunity. (Yes this will be the data in the opportunity topic field!) Feel free to change the size to medium. Replace the data in the text field of the date field with ‘Total Revenue:’. Then replace the data in the text field of the number value with <ActualRevenue>.This is where in the flow we will enter the dynamic content from the ‘Actual Revenue’ field of the opportunity. Remove the field below, then click on the outline of the card. You’ll notice ‘Add an action’ will appear, which you’ll need to click on, then select ‘Action.Open.URL’ from the drop down.

You’ll notice a button has been added to the card that reads ‘Action.OpenUrl’. Click on the button and in the Element Properties window type in ‘View Oppty’ in the ‘Title’ field and enter ‘<URL>’ in the Url field. I will replace this with the proper URL later in the Power Automate Flow. The last thing I am going to do is add a gif to the card. From the left side under ‘Elements’ drag the image element to the top of the card. It’ll show as an empty image. Click inside the box then under ‘Element Properties’ you can paste the URL of an image in the ‘Url’ field. I am using an image that I found online. Below the preview window you’ll notice the Card Payload Editor. This is the JSON code that we will use in the Power Automate Flow to create the card. Click on the ‘Copy card payload’ button on the top of the screen.

Create the Power Automate Flow

I want this card to be posted to a Microsoft Teams channel when an opportunity is closed, so this will be an automated cloud flow. Log into Power Automate and click on the ‘+Create’ button to create a new flow, then select the automated cloud flow option. I clicked skip on the next window so that I have access to the full screen. For the trigger I select ‘When a row is added, modified or deleted’. The change type is update (remember we only want this flow to run when an opportunity is closed as won), the table name is ‘Opportunities’ and the scope in my case is ‘organization’. I entered ‘statuscode’ as a column filter and ‘statuscode eq 3’ in the ‘Row filter’ field so that this flow only runs when an opportunity is won.
In the next step I need to get the owning users’ username so that I can mention them later in the teams message. Click on ‘+New Step’ and select the ‘Get a row by ID’ action. The table name is ‘Users’ and the Row ID is ‘Owner(Value)’. Since I only need 2 columns, I entered ‘domainname, fullname’ in the ‘select columns’ field, but this is optional, not required.

In the next step I am going to get the @mention token for the Teams user so that in the post I can tag the owner of the won opportunity. Click ‘+New Step’ and search for the Microsoft Teams action called ‘Get @mention token for a user’. In the ‘User’ field I entered the ‘Username’ from the previous step. That’s all for this step!
Click ‘+New Step’ and search for the Microsoft Teams action called “Post adaptive card in a chat or channel (preview)’. This is where I am going to use the JSON from the adaptive card we created earlier.
In the ‘Post as’ field I select ‘Flow bot’, but you can also post as a user. Select ‘Channel’ as the option for ‘Post in’ and select the appropriate team and channel. In the adaptive card section I paste the JSON from the adaptive card I created earlier. I do need to replace some of the items in the JSON with dynamic values from the related opportunity:
Replace <Owner> with the ‘@mention’ from the ‘Get @mention for a user’ step.
Replace <Topic> with the ‘Topic’ field from the triggering opportunity.
Replace <ActualRevenue> with the ‘Actual Revenue’ field from the triggering opportunity.

We need to replace the <Url> field with the URL of the triggering opportunity. In order to do that I need the first part of the URL and then add the unique ID of the triggering opportunity to the URL. I opened a random opportunity from Dynamics 365 Sales in the browser and I copied everything until ‘……opportunity&id=’ and deleted <Url> in the JSON and then pasted the data. Then I put my mouse next to the URL (‘……opportunity&id=’) and entered the opportunity’s unique ID. Below is a screenshot of what that looks like.

That was the last step so all you need to do now it test the functionality! I hope you enjoyed this post! Be sure to check in again next week for a new article or subscribe here to never miss another post!