Using Adaptive Cards with Canvas Apps in PowerApps
Adaptive Cards are a type of card that allows you to create rich, interactive, and flexible user interfaces that can be embedded into apps, including Canvas Apps in PowerApps. These cards are JSON-based, meaning you can easily integrate dynamic content into your apps while maintaining a consistent user experience. They are particularly useful for creating interactive user interfaces, displaying data, and collecting inputs from users.
Here’s a detailed, step-by-step guide on using Adaptive Cards in a Canvas App:
1. Understanding Adaptive Cards
Before integrating Adaptive Cards into PowerApps Canvas Apps, let’s understand the basics:
- Adaptive Cards are a type of content card that can include text, images, buttons, and other elements. These cards are adaptable to the container they are placed in and can dynamically change based on the content they receive.
- They are supported across several platforms, including Microsoft Teams, Outlook, Power Automate, and PowerApps.
Adaptive Cards are typically designed using JSON (JavaScript Object Notation), which is a lightweight data-interchange format. The JSON structure defines the layout and elements of the card, and PowerApps uses it to render these cards in the app.
2. Prerequisites and Setup
Before you start using Adaptive Cards in Canvas Apps, ensure you meet the following prerequisites:
Step 2.1: PowerApps Environment
- Ensure that you have access to a PowerApps environment where you can create and edit Canvas Apps.
Step 2.2: Power Automate Access
- Since Adaptive Cards often require integration with Power Automate for dynamic content and triggering responses, ensure that you have access to Power Automate.
Step 2.3: Data Source Integration
- You’ll need to connect your Canvas App to relevant data sources such as SharePoint, Excel, or Dataverse (Common Data Service). Adaptive Cards can dynamically display and interact with this data.
3. Designing and Creating Adaptive Cards
Step 3.1: Create the JSON for Adaptive Card
- Adaptive Cards are defined using JSON. Start by creating the JSON structure that will define the layout and content of the card.
- There are many templates available for creating Adaptive Cards, or you can create one from scratch using the Adaptive Cards Designer tool.
- Go to the Adaptive Cards Designer to visually design the card. This tool allows you to drag and drop elements such as text, images, buttons, input fields, etc.
- After designing the card, the designer will automatically generate the JSON code for you, which you can copy and use in your Canvas App.
Example JSON for Adaptive Card:
{
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"text": "Hello, {Name}",
"size": "Large"
},
{
"type": "TextBlock",
"text": "We received your request for {RequestType}. Please review the details below."
},
{
"type": "ActionSet",
"actions": [
{
"type": "Action.OpenUrl",
"title": "Approve",
"url": "https://example.com/approve"
},
{
"type": "Action.OpenUrl",
"title": "Reject",
"url": "https://example.com/reject"
}
]
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.0"
}
- In this example:
- TextBlock displays text.
- Action.OpenUrl creates buttons to open URLs for approval and rejection.
Step 3.2: Test Your Adaptive Card Design
- After generating the JSON, paste it into the Adaptive Cards Designer to ensure the card appears as you intended.
- You can experiment with the various layout options and controls in the designer before proceeding to embed it into PowerApps.
4. Integrating Adaptive Cards in Canvas Apps
Step 4.1: Insert a “HTML Text” Control
- In your Canvas App, Adaptive Cards are displayed using the HTML Text control, which allows you to render HTML or JSON-based content.
- Open your Canvas App in PowerApps Studio.
- From the left-hand panel, go to Insert > Text > HTML Text and place it on the canvas where you want to show the Adaptive Card.
Step 4.2: Set the JSON Content in the HTML Control
- Once the HTML Text control is added, set its HTMLText property to the JSON structure you created for the Adaptive Card.
- In the HTMLText property, you can directly paste the Adaptive Card JSON that you designed in the Adaptive Cards Designer tool.
For example:
HTMLText = "{'type': 'AdaptiveCard', 'body': [{'type': 'TextBlock', 'text': 'Hello, John Doe', 'size': 'Large'}, {'type': 'ActionSet', 'actions': [{'type': 'Action.OpenUrl', 'title': 'Approve', 'url': 'https://approve.com'}, {'type': 'Action.OpenUrl', 'title': 'Reject', 'url': 'https://reject.com'}]}]}"
Step 4.3: Dynamic Data Binding
- You can bind dynamic data from your app’s data sources into the Adaptive Card. For example, instead of a static name or request type in the JSON, you can reference data from a collection or variable in PowerApps.
- Use the Concatenate() function to dynamically build the JSON structure by inserting PowerApps data into the card.
Example:
HTMLText = Concatenate("{'type': 'AdaptiveCard', 'body': [{'type': 'TextBlock', 'text': 'Hello, ", User().FullName, "'}], 'version': '1.0'}")
Step 4.4: Customize Adaptive Card Actions
- Adaptive Cards in PowerApps can have actions like buttons that trigger further workflows, such as approvals or form submissions. To manage actions, you can use Power Automate or call functions in your app based on the user’s interaction with the buttons in the Adaptive Card.
- To trigger an action, you can use the Action.OpenUrl property in the Adaptive Card’s JSON, or you can link the button to Power Automate to execute a specific action (e.g., updating a SharePoint list, sending an email, etc.).
5. Using Power Automate for Dynamic Content in Adaptive Cards
Step 5.1: Create a Flow in Power Automate
- To use Adaptive Cards with dynamic content, you can create a Power Automate Flow that fetches or updates data when a user interacts with the card.
- Create a flow that receives data from the Canvas App and dynamically populates the Adaptive Card with live information.
Step 5.2: Trigger Flow from PowerApps
- In your Canvas App, use the Power Automate connector to trigger a flow. Pass any necessary data to the flow so that the Adaptive Card can be populated dynamically.
- For example, you could pass an approval ID or a request ID to the flow, which then fetches data from SharePoint, updates a database, or sends an email.
Use this formula in your Canvas App to trigger the flow:
'YourFlowName'.Run(Parameter1, Parameter2)
Step 5.3: Display the Response in Adaptive Cards
- After the flow completes, it can return dynamic data that you can use to update the Adaptive Card. The returned data can be embedded directly into the Adaptive Card’s JSON.
Example of using dynamic content to update the card:
"Hello, " + dynamicContent.UserName
6. Testing and Publishing the Canvas App
Step 6.1: Test the Canvas App
- Test the Canvas App thoroughly to ensure that the Adaptive Cards are rendered correctly and that all dynamic content is being populated as expected.
- Ensure that interactions such as clicking on the buttons trigger the expected actions, such as sending a response to Power Automate.
Step 6.2: Debugging
- If the Adaptive Card doesn’t render as expected, check the JSON for syntax errors and ensure that all dynamic data bindings are correctly formatted.
- Use PowerApps monitoring tools to troubleshoot any issues related to data fetching, flow execution, or card rendering.
Step 6.3: Publish the Canvas App
- Once the app is fully tested, you can publish the app to make it available to your users.
Conclusion
Using Adaptive Cards in PowerApps Canvas Apps allows you to create interactive and dynamic user interfaces that integrate seamlessly with other Microsoft services like Power Automate and SharePoint. By utilizing JSON templates and dynamic data binding, you can provide a highly customizable and responsive experience for your users.
Let me know if you need more details or have any specific questions about any of the steps!