What are adaptive cards?
Adaptive Cards provide a versatile solution for presenting and exchanging information blocks across different platforms, eliminating the need for CSS or HTML customization. These cards are authored in JSON format, enabling seamless integration with various cloud applications and services. Once delivered to a specific host, like Microsoft Teams, the JSON content is transformed into a native user interface that dynamically adjusts to its environment. As a result, process designers can effortlessly maintain consistent UI patterns when displaying information within business processes and automation workflows.
Where can I start to use Adaptive cards as a beginner?
The easiest place to start designing cards as a maker is adaptivecards.io. There are of course more pro dev tools such as Teams Tool kit for VS Code but for this post let's keep things simple.
For serving adaptive cards the easiest way to do this is through Microsoft Teams via Power Automate.
There are many templates to get you started, or you can just jump right in and design a custom card for your needs.
Let's design a feedback form using adaptivecards.io, and serve using Power Automate.
How Do I create and send an Adaptive Card. First things first we need to create the content for our adaptive card. Head over to adaptivecards.io and select New Card from the ribbon menu.
Then in our case we what to select Blank Card from the Create menu.
Next, we need to change Select host app on the ribbon to: Teams.
Now let's look at adding in some of the elements. We need a title, subtitle, text input field and an action button. When adding each of these elements you must also add an ID this will ensure your JSON is valid and this helps to identify the output.
Serving the adaptive card. For this functionality we need turn to Power Automate and create a workflow. Now, because were testing I will select create from an instant flow.
Note: Posting an adaptive card can be run during or after any process, for example; You have a workflow that creates an item in SharePoint after a form is submitted, you could append this to the end of that workflow to gain feedback and add it to that line in SharePoint
Next, we need the action post an adaptive card and await a response.
This action enables the posting of an adaptive card as a Flow bot to a designated user, this flow execution pauses after the card is posted until the recipient interacts with the required inputs within the card. Once the recipient responds, the flow resumes its execution. It's important to note that the flow can provide dynamic content for one response per recipient and per card.
Post as - Flow bot
Post in - Chat with Flow bot
Message - Your JSON code
Update Message - Any message you would like the user to see after submission.
Recipient - Either a static or dynamically chosen email address.
Here is the JSON I used
{
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.4",
"body": [
{
"type": "TextBlock",
"text": "FEEDBACK",
"wrap": true,
"id": "FB01",
"size": "Large",
"weight": "Bolder",
"color": "Default"
},
{
"type": "TextBlock",
"text": "We would love to hear your feedback!",
"wrap": true
},
{
"type": "Input.Text",
"placeholder": "Placeholder text",
"id": "FB02"
},
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"title": "Submit Feedback",
"associatedInputs": "auto",
"id": "FB05"
}
],
"id": "FB04"
}
]
}
To get the output from the adaptive card when a user responds we need to grab the content from the action Post adaptive card and wait for a response.
Now because I am testing, I will just use a compose action to show you the outputs.
The ID you had used for your text input in the adaptive card should now be visible in the dynamic content, choose the ID
WE ARE READY TO TEST!
Now for the exciting part! Lets test our hard work............Click Test > Manually > Save & Test
Your user will receive a message in teams with the adaptive card!
In the background the workflow is waiting for a response form the user to complete the process.
Once the user responds you will receive their input in the compose action.
This output could be captured and used to update or create new items in any process you need an input form. Go have a play and try it for yourself, and don't forget to post a comment with what you made or even better still post about it on our Facebook group SUMMERY
In summary, Adaptive Cards offer a versatile solution for enhancing user experiences in Teams and Power Automate. By leveraging their flexibility and customization options, organizations can create visually appealing, interactive, and personalized content that improves productivity, collaboration, and automation. With the ability to streamline processes and provide rich user interactions, Adaptive Cards are an invaluable tool for modern workplace communication and workflow automation in Microsoft Teams and Power Automate.
Comments