Adaptive cards in Teams are a great way to create shortcuts and ask for more input. They are usually the bridge between a Teams message and an underlying Power Automate workflow. In this tutorial, I’ll show you how to use Adaptive Cards to create “add task” shortcuts within Teams. You can watch the full video of this tutorial at the bottom of this blog.
An adaptive card is a way to interact with a team’s message. For example, we have this chat here, and I have a message from Brad Pitt. I can click the three dots and open ways to interact with that message so I can reply to it, pin it, etc. I can also use these things here, which opens up adaptive cards to interact with it further.
For example, I have an adaptive card here called Test, and when I click on it, it produces a screen like this, and it asks for additional input.
I can then select a date and then click submit. In the background, the adaptive card takes that input and launches a Power Automate workflow. In this case, it adds that task to my Microsoft planner.
Adaptive cards can get very complex, or they can be very simple. For this example, we’ll go through the easy route. Now let’s jump into Power Automate and we’ll create a new flow. It’ll be an automated cloud flow.
How To Use Power Automate To Create Adaptive Cards In Teams
We’ll go to our Teams as a trigger. The trigger that we’ll choose is For a Selected Message because this workflow only gets activated if someone clicks those three dots on the message, and then does something with the adaptive card itself.
We don’t even need to create an adaptive card if we don’t want to consume any other input from the actual message. But we want to create a way where if someone messages you a random task, you can click the three buttons, and then add that task to your Microsoft planner with ease.
We get a no-code visual UI to basically move things around. So, we have a text box here, where we can write, Add a task. And then, we can say, Shortcut to add a task to Planner. We don’t need the rest of these things here, so we can just X them out. All we really need is the due date.
We’ll use card elements on the left to bring in Input.Date because we want a date field. In terms of the date, we’re going to set the ID of this Input.Date to be called date_due. This will be the dynamic content that we use in the following steps of the Power Automate workflow.
We’ll save our card and do a new step. After someone clicks Submit, we want to add that task to Planner. So, let’s open the Planner control and create a task.
For the title of the task, technically, we should have asked for the title of the task and made the actual message, the description instead. But for now, we’ll just make the title of the task equal to the actual message itself. We’ll make it equal to plain text message content. Then, we’ll make the due date, simply the date_due, which is what we ask for when we create the adaptive card. Let’s also put it into a To-do bucket.
Now the first time you save an adaptive card workflow, it does take a little bit of time because it’s kind of creating a UI aspect of a workflow. Usually, when you think of Power Automate workflows, they don’t require UIs, but this might take a little bit.
Now let’s go to Teams and test this out. For example, I will get a message from Brad Pitt. Instead of me copying this message and going to the Planner, opening it up, etc., all I need to do is click on the three dots, go to actions, and then go to the adaptive task we created.
We then get this popup message that we created. We can select the date and click, Submit.
If we go to our Planner, we refresh the page, and we should see it.
***** Related Links *****
Power BI Integration In MS Teams
Power Automate UI Flows: Creation And Setup
UI Flow Inputs In Microsoft Power Automate
Conclusion
This is a quick introduction to Adaptive Cards in Teams. Adaptive Cards are a great way for you to interact with a message. After you click submit on an adaptive card, which is usually used to consume more input from the user, you can then do it for whatever you want. In this example, it is to create a new task. You can use it to forward a message to someone else. You can use it to send an email out, and so on and so forth.
I hope you’ve enjoyed learning this one. If you have questions, let me know in the comments below. You can also watch the full video of this tutorial for more details.
All the best!
Henry
[youtube https://www.youtube.com/watch?v=_24DPzNlXA0&w=784&h=441]
