Adaptive Cards are flexible, lightweight UI snippets for presenting information in a visually rich way. While Power Pages (formerly Power Apps Portals) don’t natively support Adaptive Cards directly in forms or lists, you can embed them using a mix of custom HTML, JavaScript, and web templates—often combined with Power Automate or Power Virtual Agents.
Use Cases
- Show personalized dashboard cards
- Display notifications or approval status
- Integrate chatbot responses (e.g., Power Virtual Agents)
- Render data dynamically (e.g., ticket summaries, alerts)
How to Implement Adaptive Cards
Option 1: Embed Static Adaptive Cards
- Use the Adaptive Cards Designer to build your JSON card layout.
- In your Power Pages Web Template, use the HTML + JavaScript to render it:
<div id="adaptiveCardContainer"></div> <script src="https://unpkg.com/adaptivecards/dist/adaptivecards.min.js"></script> <script> const card = { "type": "AdaptiveCard", "body": [ { "type": "TextBlock", "text": "Hello from Power Pages!", "size": "Large" } ], "actions": [ { "type": "Action.OpenUrl", "title": "More Info", "url": "https://yourportal.com" } ], "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "version": "1.4" }; const adaptiveCard = new AdaptiveCards.AdaptiveCard(); adaptiveCard.parse(card); const renderedCard = adaptiveCard.render(); document.getElementById("adaptiveCardContainer").appendChild(renderedCard); </script>
Option 2: Dynamic Adaptive Cards from Power Automate
- Trigger a Power Automate Flow via form submission or portal event.
- Generate an Adaptive Card payload in the flow.
- Send back the card to be rendered in Power Pages via API or context variable.
- Use Liquid/JavaScript to inject the dynamic JSON card into the page.
Option 3: Use with Power Virtual Agents
- Power Virtual Agents bots embedded in Power Pages can return Adaptive Cards as part of conversation.
- Ensure the chat is set up correctly, and cards are built within the PVA bot using standard templates.
Security Tips
- Never include sensitive user data directly in the card without verifying roles/permissions.
- Sanitize any dynamic inputs in the card payload.
- Ensure actions (like OpenUrl or Submit) are secure and validated.