Enhancing Power Platform Processes with Adaptive Cards

Power Platform fundamentals are based on a low-code no-code mindset. Anyone can pick up these tools, and with a little training they can build automations to reduce their manual tasks, apps to assist in business processes, secure data sources to replace legacy systems, and so much more. But the platform lends itself to all skill levels. Pro developers have tools they can use to enhance their processes as well, such as HTTP functionality, JSON parsing, advanced querying, and HTML support. Furthermore, as you use the tools available to you, you'll notice how similar they are most coding languages. The "Condition" action in Power Automate is functionally the same as an "if" statement in programming. The "Switch" action is... a "switch" function. Variables act like parameters. The list goes on. You don't have to be a developer to use the platform, but if you have some experience, you'll grow to love it because the architecture was designed around processes you are used to. That was me; a TypeScript SharePoint developer for 3 years before becoming a Cloud Solution Architect for the Power Platform. These tools were so easy to pick up, and the possibilities proved endless.

One of the coolest tools available on the platform are Adaptive Cards. Adaptive Cards are snippets of UI that can be used across platforms, such as Teams, Outlook, SharePoint, and even iOS and Android. And while these cards require no coding experience, if you have some you are going to love them. They can be actionable, dynamic with data from the Power Platform, static, and used on whatever cadence you need them to be. There are templates you can use out of the box or change to fit your data, and a designer where you can personalize the look and have the card JSON output generated for you. As a developer you may notice a few things you're used to: passing parameters, binding syntax for parameter passing, a JSON backbone, and more. Here's a dive on what Adaptive Cards do, common use cases, and an end-to-end working example using Power Automate and SharePoint.

What are Adaptive Cards?

An Adaptive Card is a JSON object that forms a platform-agnostic card to be rendered inside of whatever application hosts it. If an application supports them, the cards offer a consistent user experience with the added bonus of simple Power Platform integration. When you visit the Adaptive Card document site, you will see a list of samples. One of those samples is a flight tracker. When you go to the designer page and enter that Template JSON, you'll see what this app would look like in the list of host applications. Here is how the flight tracker would look in Outlook vs Teams:

Outlook

Teams

Once you've prepared your card, every platform has different procedures for how you add it to their platform, and you can build whatever automations you want around them! This is focused on Power Automate, but there is a ton of documentation for using these on whatever platform you see fit.

Common Use Cases

Reminders from a post being created or notifications

• If meetings from a specific person (like your CEO), or meetings you've put into a specific category are scheduled for that day, you could create an Adaptive Card with details about that event and remind yourself on a cadence (check once per day/hour/15-minutes), so you don't miss it in your sea of potentially optional meetings. 

Dynamic forms in Teams

• While form and poll functionality exist in Teams, it's not always the easiest to gather that data and use it elsewhere. Additionally, you are limited to the data types available on that platform. With an Adaptive Card, you could send out a card with a video that follows up with questions for your team to provide feedback, or a simple form that accepts text and dates for upcoming events to look out for. From there, you could store that data in SharePoint, Dataverse, or any other reachable data platform and create automations off of them in Power Automate.

Start an office pool for a sporting event coming up in Teams (for bragging rights, obviously)

Once you have the template built you can use it again with different data, whether it's on a daily, weekly, monthly, or manual basis. Some tasks would be achievable through other avenues, like standard structure auto-emailers, but the familiarity of these cards tends to drive higher engagement and the reusability will save you development time. Additionally, learning how to develop these cards will help your business grow across platforms, even if that's outside of the Microsoft ecosphere, as everything is open source and non-reliant on a singular underlying technology.

Adaptive Cards in Action

You want to create a system where when an item is added to a SharePoint list, the creator is emailed an Adaptive Card that asks them for additional information. From there, information added to that Adaptive Card will be added back to SharePoint and we can flip the item status to "Complete".

Step 1: Build an Adaptive Card to be sent, as well as a response card after the card is sent

In the Adaptive Card Designer, you will create a new card from blank. Set the host app to "Outlook Actionable Messages" in the top ribbon. From there, you will add a TextBlock to explain what information you need from the user, formatting it in the Element Properties pane on the right side of the screen:

Next, you want to make sure that the item is associated with our SharePoint list item, but for this use case you don't want the user to see that SharePoint Id. You can do this by passing the SharePoint item Id to a hidden text input using the Id property. So, you will add a new text input, set the "Initially visible" property to unchecked so it is hidden from the user, set the "Id" property to "sharePointId", and the "Default Value" property to 1. You will add our own Id from SharePoint in a flow later:

From there, you add a text input field for the user to enter the information you're looking for, change its "Label" property to be descriptive of what you're asking for, make sure the "Required" property is set to true, and set the "Id" to "justification":

Finally, you will set up an HTTP action so the card response can be captured. To do this, you will click the "Add an action" button you see under the card when you hover over it and click "Action.HTTP" from the dropdown menu (if you do not see that, make sure your Host Application is set to "Outlook Actionable Messages" in the ribbon). You then change the "Title" property to "Submit", "Style" property to "Positive", "Method" property to "POST", leave the "Url" property blank for now, and use the following JSON format for the "Body" property:

{
"userJustification": "{{justification.value}}",
"sharePointId":"{{sharePointId.value}}"
}

That is the body you will send in our HTTP POST call to send data back to Power Automate. Lastly, you will click "Add a new header" twice under HTTP headers, and add the following values (Authorization is blank):

Your action properties pane for the "Action.HTTP" button should now look like this:

Keep that tab open, as you will add a URL to that HTTP action after we set up our flow.

The last step on the platform for now is creating one more Adaptive Card, so the user knows their submission was successful. Open a new Adaptive Card Designer tab, click "New card" in the ribbon, create a blank card, set the host app to "Outlook Actionable Messages" and add a TextBlock with a basic response for the user:

Keep both tabs open; you will need them when you build the flows. Now it's time to set up a flow for that HTTP POST call to target in Power Automate.

Step 2: Setting up our flows

Flow 1

You will need two flows for this process; one triggered by the SharePoint item being created, and one for the HTTP response. Counterintuitively, you'll need to create the second one first because the HTTP URL is necessary for the initial card to be sent.

For the first flow, you will want to create an Instant Cloud Flow with the "When an HTTP request is received" trigger. Inside the "Request Body JSON Schema", you will enter this schema to match what we're expecting from the Body of the Adaptive Card HTTP action:

{
    "type": "object",
    "properties": {
        "userJustification": {
            "type": "string"
        },
        "sharePointId": {
            "type": "string"
        }
    }
}

Next, add a new "Compose" step to the flow and set the Inputs equal to the body of the HTTP response:

Save your flow. When you save, you'll notice you now have an HTTP POST URL to use in your trigger:

The next step in this flow will be an "Update item" SharePoint action. Pick your SharePoint site and list, then for the Id field you will use the "sharePointId" response from the HTTP body to find the SharePoint list item. This has to be converted to an integer so the data types match, which can be done using an expression:

int(outputs('Compose')?['sharePointId'])

You can also use the trigger body here with the following call, but "Compose" gives more control for testing in steps if necessary:

int(triggerBody()?['sharePointId'])

Then, you will set the "User Justification" column to the HTTP userJustification, and the Request Status Value to "Complete". Your action should look like this:

The next step is a response. You want to use the second Adaptive Card you created as a response to the user, so the user knows the card was submitted successfully. Add another "Compose" action and rename it "Compose - JSONResponse". Copy the Card Payload from your second Adaptive Card in the designer and paste it into the "Compose" inputs (set the version to 1.0, as that is what Outlook supports thus far) :

                      

The last action in this flow is a "Response" in the Request actions list. That response should have a status code of 200, the following header (CARD-UPDATE-IN-BODY: true) and uses the outputs from "Compose - JSONResponse" as the body:

That response will be sent back to Outlook to update the body of the card to the confirmation card content. And that's it for the first flow! Before you move on to another tab, copy the HTTP POST URL in the trigger. In the first Adaptive Card, paste that URL into the "Url" property for the HTTP action:

Flow 2

Create a second flow, with "Automated cloud flow" as the type and the "When an item is created" SharePoint trigger, using your SharePoint site and the target list. Add a "Compose" action below the trigger and paste in the Card Payload JSON object from your first Adaptive Card into the inputs (set the version to 1.0, as that is what Outlook supports so far). Replace the "text" property inside of the "sharePointId" portion of the JSON object with your SharePoint Id from the item that was created in the trigger:

The last step in this flow is to send that Adaptive Card to the user via Outlook. Under the "Compose" action, add a "Send an email (V2)" Outlook action. You must send Adaptive Cards using HTML, so like the </> button in the ribbon of the email body and paste the following code:

The entire flow should look like this:

Testing the Adaptive Cards

 

To test this system, create a new item in your SharePoint list. Fill in the "Title" column, leave the "User Justification" blank, and set "Request Status" to "Pending":

Wait for your SharePoint triggered flow to trigger and check your mailbox in Outlook. You will have an email with the Adaptive Card asking for a justification:

        

Enter a justification and click "Submit". The Adaptive Card should be replaced with the second confirmation card you created:

Now when you check SharePoint, the justification will be there, and the "Request Status" will be set to "Complete":

        

Closing Thoughts

Adaptive Cards are a tool in your toolbelt for the Power Platform, with additional extensibility since it's platform-agnostic. These cards can be simple or complex. When your users see these cards, they will feel familiar and engaging. And your developers can do some incredible things with them when utilizing the full toolkit of the platform they build them on. If you have any ideas for what you might do with Adaptive Cards, drop them in the comments for this post or on LinkedIn!