Hello, everyone. Reza here. This video is an introduction to Adaptive Cards for Microsoft Teams. By leveraging Power Automate, we will cover the basics of Adaptive Cards, look at how we can deliver actionable content directly to Teams as a message or as a post in a Teams

channel, or in the form of messaging extensions. I will also showcase various scenarios in which you can leverage Adaptive Cards inside of Microsoft Teams. So let's check it out in action. [Music] Adaptive Cards provide us a whole new way to deliver UI. These are platform-agnostic snippets of

UI that are authored in JSON, and apps and services can openly exchange these. Our focus on the app is Microsoft Teams. So when delivered to Teams, the JSON will transform into the native UI, automatically adapting itself to Microsoft Teams. The easiest way to get started with

Adaptive Cards is to check out the samples that have been provided for us. We have been provided with a wide variety of samples to choose from. To try out any specific sample, we can click on "Try it yourself." So this will take us to the Adaptive Cards Designer web page, which allows us

to design our Adaptive Card. Right here on the top, we have been provided with selecting the host so that we can see how this Adaptive Card would render, for example, Microsoft Teams. This is how the Adaptive Card would render inside of Microsoft Teams. If I was to change this to the dark

theme experience for Microsoft Teams, the card will automatically adapt and render the UI. JSON schema that gets generated for this specific Adaptive Card is provided for us right here at the bottom, and the easiest way for us to copy the JSON is by clicking on "Copy card payload."

To render these cards to Microsoft Teams, we have Power Automate actions readily available in Power Automate. I will head over to create and create a simple instant cloud flow, a flow that will trigger manually on click of a button. I'll click create. I've given my flow a name.

I'll add a new step and search for "Post adaptive card". One of the native actions for the Microsoft Teams connector is "Post adaptive card in a chat or channel". I'll go ahead and select this. Now, you can post these cards either as the flow bot

or as the user, the user's context under which the flow is running. In this case, I'll select the flow bot and I would like to post this adaptive card in either a channel or a chat with the flow bot, or as a group chat. In this case, I'll pick "Chat with the

flow bot" since I want to send this out to a specific recipient. And the recipient, in this case, will be the user who is triggering this flow. So I'll pick the user email from dynamic content, and "Adaptive card" is where we need to post the adaptive card that I copied

from "Copy card payload". So I'll paste that JSON code in here, save my flow, and for testing purposes, I will click on test, manual, and I will run this flow. Now, once this flow triggers, it will go ahead and post an adaptive card as the flow bot to Reza, who is the

recipient, that's the user who's running the flow. Now, inside Microsoft Teams, the flow bot has sent me a message, and that message is this rich adaptive card experience. Now, the data that's being showcased here is hardcoded. That's because the adaptive card information that has been provided here

is hardcoded, so let's transform this and make this dynamic in Power Automate. I need the weather information for my current location, so right before posting this adaptive card, I will insert a new step. There is an action called "Get current weather information" from the MSN Weather

connector. I will select this. It's asking me for my location. When I manually run this flow, Flow can track my location. So from dynamic content, I will pick the full address. In the adaptive card JSON, the location was Redmond, so I'm going to change this

to my location. I'll just plug in state as the dynamic property. Here is the date and time for this. I will select the timestamp at which this flow got triggered. The current temperature, which was hardcoded, now I will get the current temperature from the dynamic content property,

temperature. And then I have other details here for temperature: high temperature, low. I'm going to keep this simple. I will remove the specific object of type column. You can always validate your results. You can copy this JSON, go back to adaptive cards, and paste it right here on the payload, so you can see

that the card is being rendered in some form or the other. Now that I have the adaptive card built out dynamically based on my location, I will test this flow again. The flow has triggered, picked up my current weather information, and posted the adaptive card, and the Flow bot sends

me that adaptive card message. I am based out of Texas. That's the current date and time, and that's the current weather at my location. Now, in the Adaptive Cards designer experience, when I go to "New Card," I can pick from a wide variety of templates that have been

provided for us. And when I pick a specific template, I have the ability to update the template. I can select controls, either remove them, I can drag and drop elements on the card experience, and the JSON code is automatically being generated for me. Another option we have is to start from

a blank card experience. One thing I highly recommend when you're working with Microsoft Teams and Power Automate: when it posts the adaptive cards, it respects a specific targeted version. So ensure that you select the host app as Teams so that that specific target version is put in

play. Now, let's take a use case wherein I have a Microsoft Team called "My HR Team", and I would like to post an adaptive card which gives a happy birthday message to any member of the team who has their birthday today. First, I would like to showcase text.

"Happy Birthday!" So, from the left-hand side, under elements, I'll pick the text block, drag it, and place it on the card. The moment I do that, the card payload editor adds that JSON to the body of the card. Now, for every control that we add to the

card, we have relevant properties associated with it. For example, for my text block, I have the text property. So here I will say "Happy Birthday!" There are various other properties to choose from: the size. I would like to increase the font size to large. We'd like to make

this bold, and the color for this, I will go ahead and pick an accent color. My horizontal alignment, I'll put it right in the center. Next, I would like to display the picture of the user whose birthday it is today, and the name of that user. And I would

like to place them horizontally next to each other. To do that, I can add a column set container. And in this container right here, we have the option to add columns. So if I select this, it has now created a couple of columns for me. In the first column, I would like to

place the image of the user. So I'll pick the image control, drag it, and place it right in this column. The image control has specific properties associated with it. One of them is the URL. For now, I'm just going to enter some text. I'm just mentioning 'User Image URL'.

The image has a style property, so I'm going to style it in the form of a person. I can even make it actionable. So when the user clicks on that image, then something should happen. For example, open a URL. Next, I want to show the display name of

the user. So I'll pick a text block and drop it in the column next to it. The text, I will call it 'User Display Name'. All of these we will make dynamic inside of Power Automate. Now, for my first column, the width I will change it to automatic,

so it automatically sets the width. I will add another text block. For this, I will give a message, 'Have a nice day!'. And then finally, I would like to place another image. The URL is a URL of a GIF on the web. So I'm just going to select that,

so it displays that specific image inside my adaptive card experience. I'll go ahead and copy the card payload. I'll pick the scheduled cloud flow, and I will run this flow every day, let's say at 8 AM. I'll click create. Next, I will add a step to get the group.

Members from my Microsoft team, there is a connector called Office 365 Groups. As part of this connector, we have an action called "List group members." So, I'll select this action, and here I need to pick the ID of my group. If I open this drop-down, it will list

out all my Microsoft Teams. I'll go and pick my HR team. My next step would be to loop through all the items. I will pick the "Apply to each" loop, and I will loop through the "value" property, dynamic content coming from the "List group members" action. Now, for each of these users that I'm

retrieving, I need to check whether today is their birthday or not. And to do that, I have to get their profile information. And there is an action called "Get user profile" from the Office 365 Users connector. I will select this. Here, I need to provide the user

principal name that is provided as a dynamic content property. So I'll select this. And as part of the profile action, we will get the birth date information for the specific user. Now, we need to check if today is the user's birthday. So for that, I will add a condition.

Here, I will write a simple expression to format the user's retrieved birth date into purely month and day, since that's the only information that I require to check if that matches with today's month and date. So I'll head over to "Expression" and use the "formatDateTime" 

expression. The first parameter, I'll head over to dynamic content, and from the "Get user profile" action, I will pick the birth date. This will plug in the formula for that specific property. I will format this as month and date. I will click OK. Now I need to check if this is equal to

Once again, I'll use an expression. Format date time. We have a function called UTC Now, which gives me the current date and time. I will format this as month and date. If this matches, that means today is the user's birthday. My next step is to go and post that

adaptive card. So, I'll add an action: Post an adaptive card in a chat or a channel. This one I will post in a channel in Microsoft Teams. It opens up additional options, one for selecting my team. My team is my HR team, and then, as part of this team, it will

load up all the channels. So I'll pick the General channel. And right here is where I can paste my adaptive card payload. The user display name... I will delete this text. From dynamic content, I will pick the display name of the user from the user's profile.

And for the user's image, I need to get the user's photo. To do that, right after "Get user profile," I'll add an action called "Get user photo." This requires the user principal name, so I'll select that. Now, you only want to fetch the photo if

today is the user's birthday. So, I'll select this and drag it in the yes branch. I would like to perform this action before posting the adaptive card. So I'll select the adaptive card and move it down. In the "Post adaptive card" action, the property where I need to enter the

URL of the image, which is the user's photo, I will replace this with... You need to provide the Base64 encoded information so it directly plugs in that image. I'll paste my text, and right after this, I will head over to expression and use the Base64 function.

And the parameter for this will come from dynamic content, image file content, from the 'Get User Photo' action. I'll click on OK. This completes my flow. I'll click on Save. As per my user profile information, my birth date is set as March 18th. That's

the date I'm recording this video, and I am a part of the HR Microsoft team. This flow is scheduled to run every day at 8:00 AM. For testing purposes, I will manually run this. The flow has triggered. It will go and fetch all the members of this Microsoft

team, check if it has anyone's birthday today. If yes, it will go and post the adaptive card. Let's head over to Microsoft Teams. Here is the general channel for my HR team. As per the profile information, today is Reza's birthday. So, it goes ahead and

sends a happy birthday adaptive card. Now, you can expand this in various other scenarios. For example, if a new user is added as a member to a Microsoft team, there is a trigger in Power Automate for that. So, I can pick that information about that new user who's joined the team,

and an adaptive card can be sent out to the team. We can welcome that user. An actionable button, if I click this, it will open that user's profile information. Another scenario where we can leverage adaptive cards is Teams messaging extensions. When we receive messages, and this could

be one-to-one chat messages, group chat messages, or messages in channels in our teams. For each of these messages, if I go to the three ellipses here, we have something called as actions, wherein we can take specific actions. We can create flows that allow us to

create our custom actions that we can call based on this messaging experience. So, let's take a use case: whenever I receive these chat messages, if they are task-related, maybe I put them in Microsoft To Do so I can track them and close them out. To create this experience, I will create

an instant cloud flow. And here I will pick the trigger for a selected message in Microsoft Teams and click Create. I will give my flow a name. The selected message action gives us the ability to create an adaptive card, and the beauty of this is when I select

that, it brings the entire Adaptive Cards designer experience directly inside of Power Automate. And the card that's created here is based on a basic template. Let's try and modify this. For the first control, if I head over to element properties, I'll change the text

to "Create a Microsoft To Do Task". The next section, I will remove this. The first thing I need from the user is the title of the task. For the input text element, I'll change the placeholder to "Task Title". For the next element, I will ask for the

due date of the task. I don't want text boxes here; remember, these are templates, so you're free to make changes. I want the date input, so I'm going to select this and place it right here, and the user can go ahead and submit it. Now, whenever you have these input

controls, you need to ensure that they have a specific ID property associated with it. So for this one, I will name this as... I like to follow this naming convention, which is "ac", meaning adaptive card, and then my control, which is "Task Title". For my due date column, I'll do the same

AC due date. This completes my adaptive card. I'll click on Save. So that's the adaptive card that will launch when the user triggers this flow for a selected message in Microsoft Teams. I would like to add a Microsoft To Do. I'll add a new action.

add a to-do. So I'll select this. Which list in To Do do I want to add it to? I'll add it to my task list. The title of my task, if you look at dynamic content, I have my input controls, the IDs that I plugged in,

are available right here. So I can directly read their values. So I need the title of the task. So I'll pick it from the AC task title property. The due date, I will pick it from my due date property. The status of the task I'll set it to

not started. Content section of this task, I'll plug in message subject. The trigger action has all that information for us. If I search for subject, we have a dynamic property called message subject. If you want the body of the message, we can even get that in its true form, its HTML form, or in

its plain text form. I'll pick plain text. I would like to also give a link in Microsoft To Do to the Teams message for which I created this to-do. For I will swap over to the code view here and write simple HTML. I'll create an

anchor tag, the href for which will be the link to the message. I have that in dynamic content. I complete my HTML. And once my to-do task is created, I would like to notify myself that this task has been created with a link to the task in Teams.

And to do that, once again, we can use an adaptive card. So, post an adaptive card in a chat or a channel as the flow bot. Post in chat with Flow Bot. The recipient, I can pick from the dynamic content property called originating user ID, the user who triggers the flow.

Now, for the adaptive card, in the Adaptive Cards designer, I'll start with a blank card, add a text block, and with the card selected, I will add an action. And this action would be to open a specific URL. The URL property would be a URL to my

to-do task. The title would be "Open To Do". I'll copy the payload, go to my flow, paste it in here. My text, I will plug in the title of the task, and the URL would be the URL to my to-do task. Now, to-do tasks have a very specific URL,

and that URL looks like this: todo.office.com/tasks/id/the ID of the task/details. If I search for ID under dynamic content, the "Add a to-do" action gives me that information. So I'll just plug that right here, and I will go ahead and save my flow.

The flow is saved. Now, in Microsoft Teams, for any message, if I go to the three ellipses, go to More Actions, here is my flow that I created: "Create a to-do task". Let's see, like this. This will now launch the adaptive card for us directly inside of Microsoft

Teams. I can provide the title of my task, and I can define a due date for my task and click submit. And the moment I do this, the flow will create a Microsoft To Do. And once it does that, it will send me an adaptive card that has the name of my

a task and an actionable button to open that specific to-do. If I select this, it will directly take me to Microsoft To Do and show me my new task that has been created. And here are the details: the title of the task, the due date, and if you look at the message body,

this information is coming from my Microsoft Teams message. Here is that original message, and I even have a link to the message. If I select it, it will directly take me to Microsoft Teams, directly to that specific message. And here's that message for which I created

the to-do. And to do it, once I complete my task, I can click "Completed." Now, there are many times when you want to send an adaptive card from flow to Teams, and we need the flow to wait for the user to respond to that adaptive card. Let's take a travel request as an example.

My users record travel requests in a system of record. In my scenario here, it is SharePoint. So, whenever a travel request comes in, I want an adaptive card created inside of my HR Microsoft Team, so my team is notified about it. And at the same time, I want the HR team to take a decision,

basically an approval process around whether the request that has come in, they accept it or not. And they can also plug in their comments if required. In Power Automate, since I want the flow to trigger whenever a new item is created in my SharePoint list, I will

select the automated cloud flow, and my trigger is when an item is created. I'll give my flow a name and click "Create." I'll pick my site address, I'll pick the SharePoint list. Next, I will add a step: "Post an adaptive card and wait for a response."

Since I want to wait for the user to give me that response in Microsoft Teams, I'll pick this action. Once again, posted as the Flowbot and posted in a channel in Microsoft Teams. I will select my HR team, and the channel will be the General

channel. Update message is when a response is given. What's the message you would like to give at that instant? I'll say, "Thanks for the response." The message is where we need to plug in the adaptive card. Let's get that JSON from Adaptive Cards designer.

I'll first enter a text block here. I'll display the title of the travel request that has come in. Next, I'll give the name of the user who has made that request. Then I want to provide a link directly to that item in SharePoint, so I'll add

an action set. And in this action set, I'll add an action: open URL. The URL will be linked to the item. The title will be "See request details." I will pick a choice set input type control. So I need the ID, AC adaptive card decision. The choices will be yes

(these are key-value pairs; I'll keep them the same: yes and no). I can even make them required while they are filling this card out. I'll give the following error message if they don't fill it out and try to submit the form: "The controls can have a label associated"

with it." I'll give it the label "Accepted," and the placeholder text would be "Decision." I need the commands that a member from the HR team would potentially enter while interacting with the adaptive card. I will put a text box control. It's an input control, so ID

AC commands, label commands, placeholder text. I'll make this multi-line. This is... well, I'll make it required. I'll put my error message in case the user does not fill this in. And finally, I need a button that allows the user to submit. So I'll select my

card, go to add an action, and pick action.submit. The title will be Submit Response. This completes my adaptive card. I'll click on Copy Card Payload and paste it in here. The first hardcoded text block, I will plug in the title of the request. And in the second text block,

I'll plug in the created by user's display name. The open URL action, I need the link to the item. So I'll pick the link to item dynamic content. Now, based upon the decision that the user takes, I would like to grab that decision and the commands

and accordingly change the status of that item and plug in the commands in my SharePoint list. To do that, I will add a new step. I'll add a condition since I want to check the output. And here, if you observe, there's no dynamic content that I'm

receiving, specifically the input type properties, which had these IDs. Since we are not receiving it for now, I will delete my condition and save my flow and go and create a sample travel request. So my flow triggers once. So I'm plugging in the information,

save. And here's my new request that has come in. Power Automate is listening to any new item created in my travel request list. The moment the flow triggers, we can see how the flow is waiting and the adaptive card would have gone out to the general channel in my HR team.

The title of the request, the name of the user who made the request, an actionable link that opens the details of the request. This should directly open that specific SharePoint list item that I created. And now I can take a decision of whether I accept this or not.

And I can enter my comments and I can submit my response. This will in turn go ahead and accept the response and close the card. And here's the updated message that says, "Thanks for your response." If I go back to the flow, the flow has now completed.

And if we look at the outputs of this action, we have a lot of useful information that we get under the data property. Its our main two properties that we created, which is the decision and the comments. That's what I need to grab. The reason why I ran the flow is because

it's very important for us to understand how we can grab this information. This response is in JSON, so from the body property of this action we need to go to the data property, and from within it we need to grab the decision or the comments. So now let's edit the flow.

This action, I will rename it to something simple. I will rename it to "Card." Now I'll add my condition. Condition is: go to expression, body of card (that's the name of my action), question mark, data, question mark, decision (these are all case-sensitive). I will click OK. If this is equal to

yes, then I will update my SharePoint item. Pick my SharePoint site, pick my SharePoint list, the ID of the item I'll pick it from the trigger. Any mandatory fields I would have to refill. So I'll pick title. The approval status will change to

approved, and the approval commands would be the expression: body.card.questionMark.data.questionMark.ac_commands. I'll click OK. That completes my update item action if the decision of the card was yes. If it's no, I will simply copy this and paste it in the no branch.

And here I will change the decision to rejected. I will go ahead and save my flow. Now, let's have James create a travel request item. James enters the travel details and submits his request, and once the flow triggers, here is the adaptive card that is posted

in the HR team. I can see the details of the request, can open the request if required, and see all the details directly in SharePoint, and I can take my decision right here. It's approved. I'll submit the response. The response gets logged. The flow, this time, will move ahead and

based on the response, it will change the status of this request to approved, which I did here live, and it has also gone ahead and plugged in the commands that I entered in that adaptive card. Another thing that you should try out are the templates. If you go to Power Automate templates

and search for adaptive cards, there are a wide variety of templates that are provided for us. For example, create a task in Planner from a selected message in Teams. Let's take one of the templates: "Generate a dynamic poll based on an adaptive card." Click continue. This will create the flow.

This can post an adaptive card to a channel in Teams. So in this case, let's pick my HR team and the General channel. Should the card update? Yes. I'll say, "Thanks for the response." You can notify someone that there was a response. I'll notify myself.

I'll save the flow. This flow runs manually, so I'll click on "Run" to generate a poll. That's my question. I can provide my answers, semicolon separated. I will click "Run" to run this flow. James is a member of the HR team. Here's the adaptive card available in

the general channel for HR team event feedback. Here are the four options. Optionally, James can also add commands. Observe how it toggles the visibility of this section. So these options are also possible with adaptive cards. In this case, I'll say the event was great and submit

my feedback. In this case, the original user only gets notified that the poll response was successful. There are various other templates that you can choose from. For example, send me an adaptive card that gives me information about all my planner tasks that are pending. We can even trigger adaptive cards

directly from Power Apps, since Power Apps can call Power Automate. Here is a help desk Power App where end-users can create ticket information. The user enters the details of the ticket and clicks "Submit". The request gets logged. Power Automate is triggered, sends Reza as the approver an adaptive

Adaptive Cards in Microsoft Teams using Power Automate | Beginners Tutorial

Reza Dorrani

Microsoft Teams용 적응형 카드 소개 및 Power Automate와 함께 사용하는 방법.

적응형 카드에 대한 개요와 Microsoft Teams에서 실행 가능한 콘텐츠를 제공하는 데 사용하는 적응형 카드에 대해 알아보세요.

적응형 카드를 플랫폼에 구애받지 않는 JSON의 UI 스니펫으로 설명하며, Microsoft Teams와 같은 다양한 플랫폼에 적용할 수 있습니다.

사전 제작된 샘플과 적응형 카드 디자이너를 사용하여 카드를 만들고 시각화할 수 있습니다.

호스트 선택 및 테마 사용자 지정과 같은 기능을 포함한 적응형 카드 디자이너의 데모입니다.

다양한 시나리오에 맞는 Power Automate로 동적 적응형 카드 만들기.

MSN 날씨 커넥터를 사용하여 Teams에서 사용자에게 동적 날씨 정보를 게시하는 흐름을 빌드합니다.

날씨 데이터를 가져와서 적응형 카드에 위치별 정보를 채웁니다.

템플릿을 사용하고 적응형 카드 디자이너에서 템플릿을 사용자 지정합니다.

동적 사용자 정보와 이미지가 포함된 생일 카드 만들기.

파워 오토메이트 및 적응형 카드를 사용하여 Teams 채널에서 생일 인사말을 자동화합니다.

팀원의 생일을 확인하고 개인화된 카드를 보내도록 예약된 흐름을 설정합니다.

Office 365 커넥터를 사용하여 사용자 프로필 및 생일 정보를 검색합니다.

조건과 표현식을 사용하여 생일 날짜를 확인하고 카드 콘텐츠를 동적으로 작성할 수 있습니다.

적응형 카드를 사용하여 Teams 메시징 확장 프로그램에서 사용자 지정 동작 만들기.

입력용 적응형 카드를 사용하여 Teams에서 선택한 메시지에서 할 일 작업을 만드는 흐름을 구축합니다.

작업 세부 정보 및 마감일을 수집하기 위해 Power Automate 내에서 적응형 카드를 디자인합니다.

할 일 작업을 만들고 작업 링크가 포함된 확인 카드를 보냅니다.

적응형 카드로 승인 프로세스를 구축하고 사용자 응답을 기다립니다.

SharePoint 목록의 새 항목에 의해 트리거되는 출장 요청 승인 흐름 만들기.

팀에 적응형 카드를 게시하고 승인 결정 및 댓글이 포함된 응답을 기다립니다.

사용자의 응답을 처리하고 결정에 따라 SharePoint 항목을 업데이트합니다.

사전 제작된 적응형 카드 템플릿과 다른 앱과의 통합을 살펴보세요.

설문조사 및 플래너 작업 생성 등 적응형 카드용 Power Automate 템플릿을 사용합니다.

설문조사 작성 템플릿과 피드백 수집을 위해 사용자 지정하는 방법을 시연합니다.

헬프 데스크 티켓 승인과 같은 작업을 위해 적응형 카드를 트리거하는 Power Apps와의 통합을 선보입니다.

Adaptive Cards in Microsoft Teams using Power Automate | Beginners Tutorial

Adaptive Cards in Microsoft Teams using Power Automate | Beginners Tutorial

스크립트