Using Adaptive Cards in Approvals

Introduction

In the realm of workflow automation and digital business processes, effective communication and decision-making are essential for smooth operations. Approval processes are central to many workflows—whether it’s approving expenses, vacation requests, purchase orders, or project milestones. Traditionally, approvals were handled via email threads or static forms, leading to delays and a poor user experience.

Enter Adaptive Cards—a modern, lightweight UI framework designed to deliver rich, interactive, and actionable content across multiple platforms. When combined with workflow tools like Microsoft Power Automate, Adaptive Cards enable organizations to streamline approvals with interactive, user-friendly interfaces that can be embedded directly into apps like Microsoft Teams, Outlook, and others.

This comprehensive guide explores how Adaptive Cards enhance approval processes, how to create and use them, real-world use cases, and best practices for implementation.

What Are Adaptive Cards?

Adaptive Cards are platform-agnostic snippets of UI—written in JSON—that render consistently across supported hosts like Microsoft Teams, Outlook, and other applications. They enable developers and non-developers alike to create visually rich, interactive content that integrates seamlessly into conversations and workflows.

Originally developed by Microsoft, Adaptive Cards are part of the Microsoft Bot Framework and are widely used in tools like Power Automate, Power Virtual Agents, and Teams apps. With them, users can read, respond to, and take actions—such as approving or rejecting a request—without leaving the host application.

Why Use Adaptive Cards in Approvals?

Traditional approval emails often rely on text-based content with links to external systems. Adaptive Cards transform this experience by:

Embedding the entire approval interface in a message (e.g., in Teams or Outlook)
Reducing friction for approvers—no need to switch apps or log in elsewhere
Improving turnaround time due to in-context actions
Offering flexibility in layout and formatting
Enabling conditional logic and dynamic content display

These advantages make Adaptive Cards ideal for approval scenarios that demand efficiency and clarity.

Components of an Adaptive Card

Adaptive Cards are defined using JSON schema and consist of:

Body: Contains text, images, facts, and input elements (e.g., TextBlock, Input.Text, Input.ChoiceSet).
Actions: Includes buttons that perform operations (e.g., Submit, OpenUrl).
Data Binding: Dynamic data can be inserted using placeholders that reference workflow content.
Schema Version: Specifies the card version, ensuring compatibility with the host.

A simple example might include:

{
  "type": "AdaptiveCard",
  "version": "1.4",
  "body": [
    {
      "type": "TextBlock",
      "text": "Expense Report Approval",
      "weight": "Bolder",
      "size": "Medium"
    },
    {
      "type": "FactSet",
      "facts": [
        { "title": "Employee:", "value": "Jane Doe" },
        { "title": "Amount:", "value": "$1,200" },
        { "title": "Category:", "value": "Travel" }
      ]
    }
  ],
  "actions": [
    {
      "type": "Action.Submit",
      "title": "Approve",
      "data": { "action": "approve" }
    },
    {
      "type": "Action.Submit",
      "title": "Reject",
      "data": { "action": "reject" }
    }
  ]
}

Integration with Power Automate Approvals

Power Automate allows users to build flows that incorporate Adaptive Cards in approvals. There are two primary methods to send Adaptive Cards:

Send Adaptive Card and Wait for Response
This method sends a card to the approver and pauses the flow until a response is received. Ideal for synchronous approval processes.
Post Adaptive Card to Teams Channel or Chat
A more flexible approach that sends a card to a Teams user or channel, optionally waiting for user input.

Steps to create an approval using Adaptive Cards in Power Automate:

Create a Flow (Automated or Instant Cloud Flow)
Define the Trigger (e.g., when a new item is created in SharePoint)
Add Approval Step (Start and wait for an approval)
Create Adaptive Card JSON (Using Adaptive Card Designer or manually)
Use “Post Adaptive Card and Wait for Response” action
Capture and handle the response (Approve/Reject)
Continue the workflow based on the decision

Real-World Use Cases

1. Expense Report Approvals

A finance department automates expense approvals. When an employee submits a report via Microsoft Forms, a Power Automate flow sends an Adaptive Card to their manager in Microsoft Teams with approve/reject options.

2. Vacation Request Approvals

HR creates a leave request system where employees submit requests in SharePoint. An Adaptive Card with details and buttons appears in the manager’s Teams chat. The manager clicks a button to respond, and the system updates calendars automatically.

3. Procurement Approvals

When a purchase order is created, Power Automate sends an Adaptive Card to the procurement team lead with line-item details. They can approve, reject, or request more information directly from the Teams interface.

4. Content Publishing Workflows

Content writers submit blog drafts in a CMS. An editor receives an Adaptive Card in Outlook with summary, preview, and approval buttons. Their response updates the CMS status.

Creating Adaptive Cards with the Designer

Microsoft offers the Adaptive Card Designer at https://adaptivecards.io/designer, a drag-and-drop interface for building cards.

Choose a host app (e.g., Microsoft Teams) to preview rendering
Drag elements into the card body
Add inputs, buttons, and dynamic content placeholders
Export the JSON code
Paste the code into Power Automate’s Adaptive Card action

Handling Responses and Actions

In an Adaptive Card approval, user actions (e.g., button clicks) send data back to the flow. Power Automate can branch based on this response:

"actions": [
  {
    "type": "Action.Submit",
    "title": "Approve",
    "data": { "action": "approve" }
  },
  {
    "type": "Action.Submit",
    "title": "Reject",
    "data": { "action": "reject" }
  }
]

In the flow, use a Switch or Condition to branch logic based on outputs['submitAction']['action'].

Best Practices for Using Adaptive Cards in Approvals

Keep It Clear and Concise
Show only necessary information. Use bold headers and FactSets to highlight key points.
Use Data Binding Wisely
Bind card content to dynamic data (e.g., item title, creator, timestamp) for personalization.
Minimize User Input
Prefer buttons over text inputs to speed up decision-making and avoid validation issues.
Ensure Responsiveness
Test cards on mobile, desktop, and web to ensure consistent rendering.
Maintain Accessibility
Use appropriate alt-text and readable font sizes for inclusive design.
Handle Timeouts Gracefully
Design fallback logic in case users don’t respond in time—e.g., escalate or send reminders.
Log Actions
Keep audit trails of who approved what, when, and from where for compliance.
Version Control
Maintain versions of card JSON designs, especially when working with multiple teams or flows.

Security Considerations

Authentication: Ensure users receiving cards are authenticated via Teams or Outlook.
Permissions: Limit who can act on approvals based on their roles.
Data Leakage: Avoid including sensitive data unless secure and necessary.
Tamper-proofing: Never rely solely on client-side data—always verify in the flow backend.

Challenges and Limitations

While powerful, Adaptive Cards come with certain limitations:

Limited Interactivity: Compared to full apps, cards offer limited inputs and controls.
Static Layouts: No advanced formatting (e.g., tables) without custom rendering.
Size Constraints: Hosts like Teams impose character or element limits.
No Inline Logic: You cannot perform logic or calculations inside the card itself.
Version Compatibility: Ensure that your card schema matches the version supported by your host (e.g., Teams supports up to 1.4).

Despite these limitations, Adaptive Cards remain a game-changing enhancement to approval workflows.

Future of Adaptive Cards in Approvals

The future looks promising as Microsoft and other contributors continue to evolve the Adaptive Card framework. Upcoming trends include:

Increased Host Support: More apps (e.g., mobile platforms, web portals) will support Adaptive Cards natively.
AI Integration: Cards may use AI to suggest actions, pre-fill responses, or analyze approval trends.
Composable Cards: More modular and dynamic card structures will support complex scenarios.
Improved Designer Tools: Enhanced UI tools will allow more business users to create and edit cards without writing JSON.