⚙️How to create an Approval Workflow in Teams using Power Automate and Adaptive Cards

hi everyone teams approvals app it's a great way to approve or reject approval steps directly in Microsoft teams in this video I'm going to show you how to post adaptive Cards into teams why adaptive cards this is a fantastic way to customize the form that you want to prompt and display to the end users in fact by using an Adaptive card you are able to provide and create additional fields in the form the card displayed it will offer many fields that the user can use to provide additional information to a specific step of a process then after that the end user has provided his or her response power automate flow can go forward with next steps okay let's get started and I show you every step here I am on my PC the scenario that I want to talk about is azure Point list where I will start every new requests coming from my employee in my organization related to a new asset now let me Demo immediately the use case dictionary and the solution that I want to talk about in this SharePoint list every user in the organization clicking on the button new item can request a new asset let me type in right now surface laptop Studio for example there are many information here but I'm going to fill out just this field asset tag now let me click on Save and this information is stored in this SharePoint list now this will trigger a power automate flow and this power automate flow will send to the responsible of this process and approval workflow an approval step this will go across Microsoft teams and using adaptive card I'm able to display this approval step now let's jump on Microsoft teams just to see if the approval step is landed now let me open teams I can't see already a notification coming if I go on chat the Adaptive card comes across the power outage made but in Microsoft teams let me click on this chart and here I can see the card coming I can open the URL just to check the the request the exact requests coming from the user or I can then Define my comments so why I'm going to approve or reject this request if I don't write anything inside of this field there is a validation that display a message to the end user that value should be defined in this field now let me type for example okay and then I'm going to click on the button approve this will move to the second steps of this workflow by updating the SharePoint list now let me go back on the SharePoint list to check if the the value is changed I can see here in this column status that now the request is approved I can see my comment and who has approved the request now let's start from scratch I'm going to recreate the entire process with you just to show you every step to follow in order to recreate this kind of scenario first off I have to create an Adaptive card that I'm going to send to Microsoft teams just to refresh my memory an Adaptive card is a piece of UI that you can develop using Json and this piece of UI can be transformed then into a native UI in Microsoft teams in Outlook in Viva connections and so on now I am on this side this is the classic side to create adaptive cards adaptivecars.io you have to click on the designer in the menu to build new adaptive cars then second things to do is to Target the platform where you want to display the Adaptive card in my case in Microsoft teams then I'm going to select Microsoft teams here you can even select the temp if you have a dark or light mode let's keep the light mode this is the place where you can write directly Json if you want or you can use the this designer just to drag and drop the component that you want to use now let's click on the button new card I'm going to start from scratch let me select a blank card and now let's start to build our adaptive card so first off I need to add a text block where I'm going to to write the title of this adaptive card so let me select under elements the text blocks I'm going to drag and drop this element now here in the text field I'm going to write my text which is new asset requested and then I'm going to replace then this this part of the text with my variable let's move on and I'm going to add another text field just to remember to the approver who has submitted this this request then always in the text I'm going to write something here and here we go I added also here my text submitted by and then I'm going to replace this text with my variable now I'm going to add an action set with a link just to give the chance to the approver to check in detail the request opening the list item in the SharePoint list then I'm going to click on add a new action and then it would be a connection open URL and finally in the URL I'll write the link to the item then I'm going to add an input text to give the chance to add comments and to explain why a request has been approved or rejected so first of all I'm going to set here a placeholder comments let me add a label at the reason of your choice below then here very important is to Define an ID underscore comments because this will give the chance in power automate to read this value using this ID let me set a validation for this field because this is our required field and as our error message I am going to display the reason of the approval or rejection must be provided I'm going to add another action set because it's time to add a couple of buttons here add an action this would be the first button to define the approve step I'm going to select action submit and this is very important in the ID this is the approve button and in the title I'm going to define a proof now let's add another action step here at an action again action submit we select this one in the ID I'm going to say reject and as a title of course reject okay my card is completed now I can use this adaptive card in my power automate flow so I'm going to copy card payload and then let's jump on power automate I have here a tab already open let me go on my flows and now I'm going to create a new flow I'm using here a service user to orchestrate all power automate flows in my tenant let me select an automated flow and then here I'm going to type asset request then when an item is created in the SharePoint list this trigger will start the flow now the the site address enter custom value this is the URL of my SharePoint site this is the list asset manager let's add a second step here and now I'm going to search for the Microsoft teams connector and I'm going to use this action post adaptive card and wait for a response I'm going to post this adaptive card as the flow bot in Microsoft teams and then I'm going to post this in a chat and in the message I can write the the payload that I created before now let's start to add some information here new asset requested so here I'm going to add a dynamic value and this would be the title of my SharePoint list item then submitted by we have the requester so let me jump in the dynamic content panel and this is created by display name then the link let me search for the link to to item and here we go I would say that we are pretty good to go the updated message will be thanks for your response and the recipient this is the owner and the responsible for this process and that would be this this user Juliano voila so this action is completed also we have added the only information let me check again regect approve approve we have the link the submitted by the title okay it's look it looks good now let's simplify the name of this action by tapping uh adaptive card for example I'm going to remove all this text adaptive card here we go then I'm going to save and now to get the exact value that we want to get I'm going to execute this power automate flow how to do that I'm going directly to the Azure Point list I am now connected as party Fernandez and then I'm going to add a new item let's add for example something Mac OS laptop for example save now this new item is added I can go back to my power automate flow let's go back and let's wait that runs now this flow us run it I can open my Microsoft teams client up and here I have in the power automate both this this adaptive card that shows up I have new asset requested Mac OS laptop submitted by Patty Fernandez here I can open the link and here I have my text where I can write my decision no so let's click on reject as you can see the validation is working the reason for the approval rejection must be provided we have no devices at the moment let's click on reject and now this adaptive card is closed thanks for your response this is the message that I configured before so now that this power automate flow is closed I can open exactly this this instance and we can see the the result in the body of outputs we can see that I have in under data I have the ID that I specified for the comments field and then very important I have submit action ID so I can see that I received reject this means that the user has clicked on the button reject I'm going to copy this one submit action ID because I'm going to use it in edit mode in my flow let's add a new step I want to check the response and here I'm going to click in the dynamic content panel on the expression and now let's define my expression body single quote adaptive card question mark square brackets single quote and submit action ID then I can confirm by clicking on OK if this is not equal to reject then I'm going to add another SharePoint action here and this is the update update item I'm going to Target always the same SharePoint side it doesn't shows up then I have to click on custom value I have here in my clipboard already saved it let me Target the asset manager I have to use the the current ID of course then I have to retype the title which is required and now it's time to fill out some additional field so if it's not rejected is approved in the comments here I'm going to add another value and here I'm going to use the same approach is body then adaptive card question mark square bracket single quote this time is data question mark square bracket single code single quote and then I'm going to get comments let's click on OK I'm able to to get this value as well here is decided by and here I can do the same but I have to check again back because I don't remember the value of the response so let's see if I can save in the meantime yes so let me go back let me see the last run to check the response adaptive card so this is the email of the user so I have to invoke the responder and then the email or user principle user principal name is even better is responder okay let me edit again the flow and let me add this additional information update item in decided by claim I'm going to set under custom value expression body single code single quote this is another card question mark before the user's principal there was another property responder let me click on OK we have defined this as well in the case the request is approved the owner of the asset will be who has created this request then let me search here in the dynamic content panel created by claims because this one would be the the owner of the new asset differently what I can do here is copy this in the clipboard let me click on my clipboard and let me add this this action we have the ID the title but except for the status value which would be rejected okay I retype it basically the value in they decided by claim user principal name of the responder and let me save now this flow so we are good to go and to test this this workflow let me open this browser instance where I am logged as Patty Fernandez and let me create and submit a new request so I want to have right now and NASA's laptop I'm going to submit this request save this new request is submitted now let's wait for the power automate flow here I have the windows notification power automate sent a card I have here my card new asset requested as laptop submitted by Patty Fernandez here I can open the list item here I am I have the the request submitted from the user let me open Microsoft teams again here I can provide my comments it looks good and then I'm going to select approve now this request is approved let me open again the browser as a petty Fernandez and I can see that the list item has been updated I have the status approved and it looks good in the comment if you want to involve more approvers what you can do opening again power automate what you can do here is targeting a channel where you can involve more people in a team for example to do that I'm going to change here this action adaptive card post as flow bot and here post us I'm going to Target Channel and this the the card would be the same basically and then I can now Target a team in Microsoft teams which is global HR and the channel would be General if you want to restrict to a few people this approval step you can also Target another another Channel where you have different membership this could be a private channel for example but let's target general or I can Target another team where I have really two or three people inside but this just to to give you the another perspective and another scenario that you have let me click now on Save and as a hand user now I'm going to add another item in this list and this time would be a xiaomi laptop let's click on save a new item has been added and created let's wait for the Adaptive card in Microsoft teams let me go in Microsoft teams clicking on themes and in the general channel here I can see if something is coming not yet now I have this adaptive car new asset request let's xiaomi laptop Patty Fernandez I can add the the comment here as a member of this of this theme now I can provide my decision okay and then on approve and here we go we have the same user experience but we can Target more approvers for example or you can build more complex scenario in going on a power automate and adding another action like that so you can build several level of approval just to give you the full overview of the user experience in Microsoft teams even in the mobile version of Microsoft teams I'm going to change something here I'm going to Target again the chart thanks for your response and here I'm going to Target another user that I have in my teens mobile app so I can click on Save and then as a party Fernandez I can create another item in this list let's add to Lenovo laptop for example let's click on Save and now let me open the mobile version of teams I am now on teams mobile on my Android device I am logged as Diego siciliani I have a new notification coming in chat and here I have a power automate card just receive it so as you can see here I have new asset requested Lenovo laptop submitted by Patty Fernandez here I can open the request I can add a something in the comments here no longer available and then I can tap on reject now the Adaptive card is updated and this is the user experience on the teams mobile app all right we have seen in this video tutorial how to post adaptive cards using power automate into Microsoft teams if you enjoyed this video as always please consider to subscribe like comment I hope to see you next time bye

Channel: Giuliano De Luca

Views: 6,528

Keywords: giuliano de luca, adaptive cards, microsoft teams, power platform, power automate, microsoft flow, adaptive cards microsoft teams, adaptive cards power automate, adaptive cards tutorial, microsoft 365 developer, how to, office 365, approve and wait for a response, post adaptive card in a chat or channel, logic apps, microsoft 365, power automate teams message, flow teams adaptive card, flow teams integration, flow teams connector, power automate teams adaptive card

Id: QB4PU6xyQ6M

Length: 22min 32sec (1352 seconds)

Published: Thu Oct 13 2022