Adaptive Cards in Microsoft Teams using Power Automate | Beginners Tutorial

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 team's 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 a 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 flowbot to reza who is the recipient that's the user who's running the flow now inside microsoft teams the flowbot has sent me a message and that message is this rich adaptive card experience now the data that's being showcased here is hard coded that's because the adaptive card information that has been provided here is hard coded 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 dynamic 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 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 have 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 on 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 on 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 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 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 cloudflow and i will run this flow every day let's say at 8am 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 principle 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 format date time expression the first parameter i'll head over to dynamic content and from the get user profile action i will pick the birthdate 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 principle 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 1s21 chat messages group chat messages or messages and 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 will trigger 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 it's 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 flowbot post in chat with flobot 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 slash id slash the id of the task slash details if i search for id under dynamic content the adder 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 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 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 message body this information is coming from my microsoft team's 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 once i complete my task i can click completed now there are many times when you want to send an adaptive card from floor to teams and we need the flow to wait for the user to respond to that adaptive card let's take 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 commands 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 cloudflow 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 so 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 and 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 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 dot 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 users 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 commands 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 is our main two properties that we created which is the decision and the commands 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 can we 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 commands 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 ac 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 question mark data question mark ac commands i'll click ok that completes my update item action if the decision of the card was yes if it does 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 and 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 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 user enters the details of the ticket and click submit the request gets logged power automate has triggered sends reza as the approver and adaptive card need id card is the title of that request if i click this will directly open up that item in powerapps it takes me directly to that item i can see all the information and i can give my response right here maybe i worked on the ticket the status is closed i complete the form click submit my response will be logged james will be notified that the request is now completed james can see the status you're changing to closed and here is all the information that was entered in that adaptive card most of the samples that i demonstrated in this video i will make them available for you to download the link will be in the description of the video so do check it out if you enjoyed this video then do like comment and subscribe to my youtube channel and thank you so much for watching

Channel: Reza Dorrani

Views: 65,990

Keywords: adaptive cards microsoft teams, adaptive cards power automate, adaptive cards, adaptive card io, adaptive cards tutorial, teams adaptive cards power automate, teams adaptive cards designer, teams adaptive card wait for response, teams adaptive card submit, reza dorrani, power automate, flow, Microsoft Teams, Teams, post adaptive card to teams using flow, post adaptive card in a chat or channel, adaptive, teams messaging extensions, for a selected message, flow teams adaptive card

Id: LAOVAr5GP84

Length: 35min 57sec (2157 seconds)

Published: Mon Mar 21 2022

Reddit Comments

[u/sgtsnacks64]

Do the adaptive card functions take json payloads yet? It’s so painful designing adaptive cards with hard-coded values.