Adaptive Card Approvals in Outlook - Part 1

Adaptive Cards are transforming how we create interactive, actionable messages in Outlook, and I’m kicking off a multi-part series exploring how they can integrate with the Power Automate approvals process. In this first post, I’ll walk you through the process of setting up an Adaptive Card in Outlook using Power Automate, from building the card and configuring your flow to registering it with the Actionable Email Developer Dashboard. Along the way, I’ll cover key insights, including why testing on yourself can be misleading and how to avoid common pitfalls that could trip up your automation.

This is just the beginning! In the upcoming posts, I’ll dive deeper into how Adaptive Cards can work seamlessly with Power Automate’s built-in approval system and how you can dynamically create new Adaptive Cards when users are reassigned. Stay tuned as I break down how to streamline your Outlook workflows with powerful automation!

Step 1: Create a Card Response Power Automate Flow

The first step is to create a Power Automate Flow that will handle the response when a user interacts with the Adaptive Card.

1. Create a new flow with the trigger "When an HTTP request is received."

2. Set the trigger's security: In the "Who can trigger this flow?" setting, select Anyone to ensure it can be accessed from Outlook.

3. Define the Request Body Schema: Insert the schema that represents the data you expect the card to send to the flow upon user interaction.

4. Add a Compose action: This will capture the incoming data for logging and debugging.

5. Save the flow: Once saved, copy the HTTP POST URL generated and store it in an easily accessible location (such as Notepad) for later use.

Step 2: Register with the Actionable Email Developer Dashboard

To send Adaptive Cards via email, you must register your integration with Microsoft Outlook

1. Go to the Actionable Email Developer Dashboard: https://outlook.office.com/connectors/oam/publish

2. Create a new provider:

3. Select the scope of submission and submit the request for approval.

4. Copy the Originator ID once approval is granted and save it alongside your flow's HTTP address for future reference.

Step 3: Design Your Adaptive Card

Now that your flow and provider are set up, it’s time to design your Adaptive Card.

1. Go to the Adaptive Card Designer: https://adaptivecards.io/designer/

2. Select the host app as Outlook Actionable Messages.

3. Use templates: There are multiple templates available that you can modify to fit your needs.

4. Add an Action Set: Set the action type to Action.Http. Use the HTTP POST URL from the response flow, and Headers Shown Below

5. Body: Include the data to send back to the flow. If using text input from the card, reference it using its ID, e.g., "ApproveCommentID": "{{ApproveCommentID.value}}".

Step 4: Trigger Adaptive Card from a Flow

Now, create another Power Automate Flow that sends the Adaptive Card when triggered by an event, such as a new SharePoint item being created.

1. Create a new flow triggered by an event, such as "When a new item is created" in SharePoint.

2. Copy the Adaptive Card payload from the Designer Payload Editor and paste it into a Compose action.

3. Modify the payload: to include the below header substituting the Originator value for your own.

4. Dynamically replace placeholders with event-related values.

{
  "type": "AdaptiveCard",
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.0",
  "originator": "000e7af3-xxx-xxxxxxxxxxxxx"
}

Step 5: Format the Adaptive Card for Email

To embed the Adaptive Card in an email:

1. Create a new Compose action.

2. Wrap the Adaptive Card JSON in a script tag:

<script type="application/adaptivecard+json">
{AdaptiveCard_JSON_Body}
</script>

Step 6: Send the Email with the Adaptive Card

1. Add the "Send an email (V2)" action.

2. Insert the formatted Adaptive Card in the email body.

3. Ensure recipients are authorized to interact with the card.

Step 7: Process the Card Response

Return to the Card Response Flow to handle the user's interaction.

1. Ensure the incoming data format matches the expected JSON Schema.

2. Process the response: Take any necessary actions based on user input.

3. Compose a response to send back to the Adaptive Card. Sample Code below

{
  "type": "AdaptiveCard",
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.0",
  "originator": "000e7af3-xxxxxxxxxxxxxxx",
  "body": [
    {
      "type": "TextBlock",
      "text": "You have @{triggerBody()?['Type']} item @{outputs('Get_item')?['body/Title']}",
      "wrap": true,
      "horizontalAlignment": "Left",
      "size": "Small"
    }
  ]
}

Step 8: Send a Response to Update the Card

1. Add a "Response" action in Power Automate.

2. Configure the response: as Shown below

Conclusion

With these steps completed, you now have a fully functional Adaptive Card workflow in Outlook. Users can interact with the card, trigger a Power Automate flow, and receive real-time updates.

Several issues to be aware of when creating these cards:

• If you test the card by sending it to yourself, it will always appear correct—even if something is incorrectly configured in the Approval Dashboard. Always test it with another user to ensure it works as expected.

• This solution only works in Outlook and does not function with other web services.

In the next blog post, we will explore how to replace the default Power Automate Approval process with an Adaptive Card to enhance your approval workflows.

Stay tuned for the next installment in this series!