How to create Approval Forms in Power Apps

hello everyone reza here in this video i will show you how to create custom approval forms directly inside powerapps we will leverage the powerapps form control for creating those forms for our approvers we will send email notifications and use the deep linking concept to directly link to the approval task in powerapps create an approval dashboard using galleries and even send out the approval form inside microsoft teams through adaptive cards so let's check this out in action [Music] here i have a help desk power app the data for which is coming from a sharepoint list this is a role based power app i am currently logged in with my account and since i have tasks assigned for my approval i have this section called pending tasks if i select this it will showcase all the tasks that are pending my response currently i have one task that is assigned to me if i select this item it will take me to the form experience for that specific record and here as the approver i get an approval information section that is editable and has specific columns that requires my input i can see all the details of the ticket if required i can make changes to the details of the ticket and i can take a decision as to the status of this specific ticket so let's say i completed this ticket change the status to closed i have another column here that tracks the ticket information in another system like workday so i need to enter the id of that and i can enter my commands right here and then submit my response the ticket status is updated i have no tasks that are assigned to me if i head over to all tickets and go to closed the ticket that i completed has the status now changed to closed if i was to select this this ticket is now not editable and all the approval information details are available to be viewed right here this ticket was created by a user james if james was to login to that same power app james can see all his tickets here is that ticket which is closed james can select this and see the status of the ticket and the details that the approver put in now let's try and see what happens when james creates a new ticket james starts filling out the details of the ticket picks the department associated with this request picks the request type picks a priority for this ticket and submits his request now the moment that information goes into the system if james filters the data by pending he can see that ticket in action right here and if james selects this the details of the ticket are provided to james this form is locked down that means james cannot make any further changes to this ticket at the same time the approver in the system which is reza gets an email notification that a new ticket has been assigned he gets all the details of the ticket along with the link to directly take an action associated with the ticket request that has come in if reza selects this it will directly launch the power app and deep link into that ticket screen that is editable since reza is the approver for that specific ticket once again as i can see all the ticket information make modifications to it if required update the status of the ticket and submit the response additionally in microsoft teams the power automate bot sends reza a chat message which has an adaptive card experience here essa gets notified that there's a new ticket that has been assigned to him the status of that ticket is spending here is the title of the ticket the person who submitted the request the details of the ticket and the approval form that reza can fill out in power apps has also been made available to reza right here i'll set the ticket status to closed and put in the commands both of these are mandatory fields workday id is not but i'll plug in that information as well and submit my response directly from within microsoft teams now if i head back to powerapps and look at the tickets where the status is closed here is the ticket that james had created the status is marked as closed and if i look at the details of this ticket we can see all the information that i plugged in as the approver directly from within microsoft teams let's try and build the core concepts of this solution from scratch i will start by creating a new canvas app from blank i'll give my app a name and click create i will connect to my data source which is sharepoint connect to my sharepoint site select my sharepoint list and click connect the two key columns that i would be dealing with here one is status column type is choice and second is assigned to this is where i will define my approvers in this scenario i'm keeping it extremely simple i have this as a single line of text column this could be a person type column a multi select person type column to showcase the tickets from the sharepoint list i'll insert a gallery control connected to my sharepoint list i'll set the wrap count of the gallery to 3. i've picked the layout title subtitle and body in one of these controls let's say subtitle 2 i would like to showcase the status of the ticket status as the choice column status dot value now i need to create the form experience so users can create edit or view the ticket information i've created a second screen here i will insert and edit form control connect this to my sharepoint list i've changed the number of columns to two and the layout i'll change it to horizontal we want to reuse this form control so that users can either create edit and view the data right here on the same form experience in my home screen on select of this icon inside the gallery i would like to redirect the user to my ticket screen which has that form plus i would like that form to showcase the details of that ticket in view mode so on select of this i will set a variable called veriform mode i will set this to formode.view and i will set another variable called var item to this item which gives me the context of the selected item inside the gallery and then i will navigate the user to my ticket screen for the form control in the ticket screen we have a property called item i will use that variable which is var item and for the default mode property of the form i will use my variable which is var form mode now if i head back to my home screen and preview the app if i was to select a specific item let's say laptop ram upgrade it will take me to that form screen and showcase all the data related to that item in view mode to provide the user an ability to go back to the previous screen i will insert an icon i've picked the back icon on select of this i'll use the navigate function to take the user to the home screen now i want to leverage that same form so the user can create a ticket in the system once again i will insert an icon on select of this i will set those two variables again where form mode this time would be for mode dot new and where item since it's a new record i will set this to blank then navigate the user to my ticket screen let's try this out here's the new form in action in here for the user to submit the information i've added the save icon on select of this i will use the function submit form and provide the name of my form which is ticket form and when this form is submitted successfully for the form control we have an on success function i will first notify the user with a message type success and navigate the user to the home screen for the columns or the data cards within the form control this is where i would like to create that section experience for the approver so they can modify that specific section in the form control go to edit fields on the top right we have the three ellipses add a custom card increase its width to full width and select this and drag it and place it in between here i'll set width fit to on i will insert a label control the width for this label will be parent dot with the text for this i will set it to approval information i will give this a background color and increase its font size and for the data card i will reduce the height so it matches the height of my label control if i preview the app i will see the section experience now below this is where i would like to define those columns that my approver should be able to make changes to i have this workday column i want the command so i'm going to select this bring it down the assign two column is where i will define who this task is assigned to i will define that in power automate so for now i will select this data card and delete it i'll do the same thing for attachments the status is something that the approver should be able to modify so i'll bring the status down now once i have this defined the approval information related data cards in case of a new form i would not like to show these data cards so what i need to do is write a property for the visible formula of these data cards now one way is to write the properties one by one another option is if you select a card hold the control key and start selecting another data card it will start selecting all of them together so i've picked workday my custom data card my status data card and the commands data card so i have all of these data cards selected i will head over to the visible property and plug in the following formula where form mode that's my variable that defines the mode of the form is not equal to formode dot new that means if this is a new form do not show those columns so if i preview the app i am in the new form experience i don't see that information if i was to select an existing item i will see that information the save button on the top visible function would be var form mode is not equal to formode.view when i click save it will submit the form and once the form is successfully submitted i am going to notify the user at this instant i want to trigger a power automate workflow that workflow would go and set the status of the ticket to pending and assign the task to my approver and send the approver a notification email now all of this i can do directly inside power apps as well by using the patch function sending the email out but i'm leveraging power automate because i want to add an additional capability and that capability is to send that adaptive card out to my approver and teams as well to call a flow from powerapps for the on success property of my form first thing make sure you copy all this code save it in notepad so you have this and you don't lose this go to action and click on power automate i'll go to create a new flow here i will pick the first option which is powerapps button now this uses the version one trigger for power apps there is an updated trigger for this i'll recommend you to use that so go to three ellipses and delete pick the powerapps connector and pick the version 2. here we get the ability to add those dynamic input properties now when powerapps calls flow i can pass parameters and i need to do that in this case since i need to tell flo which ticket or which item in my sharepoint list are we dealing with so i'll create an input of type number i will call this my item id and this information will come from powerapps when i will call the function to call the flow first step i will use the getitem function from sharepoint i'll pick my sharepoint site where i have my service desk list and for the id i will pick the dynamic content item id next i will pick sharepoint update item once again pick my site my list id would be the id coming in from the trigger any mandatory fields that you have identified in your data source you would have to refill it that is one of the reasons why i did get item so i'll plug in the title and here i will define those two key attributes of mine the status which i would like to change to pending and assign to is where i can plug in the email address of my approver the approver here can be made dynamic it could be based on the type of the ticket it could be based on a sharepoint group but an ad group i have done multiple videos on dynamically selecting approvers i'll place those links in the description for this video so do check it out in this case keeping it extremely simple i've gone ahead and plugged in my email address in here so i would be playing the role of the approval for any ticket that comes into this system and right after this i would want to notify my approver about the ticket being created and a task pending their action so i will select send an email to my approver the subject new ticket assigned i can dynamically pick properties and put it out in the email for example put the title of the ticket in the subject in the body i can provide the description the department value the request type value and so and so forth now when this email goes out i need to provide a link so that the approver can directly go to the power app and directly go to that specific item that was assigned to them so they can take the approval decision to do that we need to perform deep linking in power apps i need the url of my power app i have not yet saved my app so i'll go to file save and back to make.powerapps.com here is my app go to three ellipses and details here is the web link for my app i will copy this go back to my flow here i will go to the code view and plug in an anchor tag experience where the href which is basically the hyperlink is that url that i copied i will provide some text and close the anchor tag so the user gets an email with a link to my power app but i need to deep link the user directly to that specific item to do that i will pass an extra parameter in the url for that i'll use the ampersand symbol and i would pass the id of my ticket you can name this parameter as you like calling this id is equal to and here from dynamic content i will pick the id property of my item i will rename this flow and save this flow back to my power app ticket form on success function go to action and power automate now i should see my flow listed so i can select this and it will add that flow call directly to my onsuccess function now once it does that it will clear out the existing formula that you had in place and that's one of the reasons why i had copied it earlier the name of my flow.run and it is expecting a parameter of type number so i need the id of the item that i can get directly using the name of my form control ticket form dot last submit dot id and i will paste my earlier formulas that i had in play here and this flow we want to only call it when a new ticket is created since after that the updates are made by the approver to do that fairform mode is equal to formode.new then call the flow now when the flow sends the email it has this hyperlink with the id parameter in my power app i need to deep link the user to the ticket screen and open that specific item to do that on the app object first we will head over to the function called start screen this is where you define the starting screen of your app if this is empty it goes to the first screen of your app which is home here i will plug in the following formula if not off is blank to read parameters we have a function called param and this is where i can define my parameter the parameter that i defined on flow had the name id so i'll use that and is this ticket assigned to the current user who's launching the app basically is the user the approver of that item to do that i need to look up that item look up my data source which is service desk where the id is equal to the parameter value and here i will run into an error since id is of type number the parameter is being passed as string so i need to typecast this using the value function i would like to grab the assigned to user information and this i will compare with user.email if both of these conditions are met i would like to take the user to my ticket screen else i would like to take the user to my home screen so this formula will take the user to the ticket screen if they are the approver however for my ticket screen i need two pieces of information i need the wherefore mode and the where item variables filled out those variables you cannot fill in the start screen there is another function called onstart this is where we would have to fill that information if there is a value in the parameter then set my variable where item to the context of that specific item once again i'll use the lookup function for the mode of the form i will set it to edit since i want the user to make changes and the user will only go to that screen if they are the approver since i have that logic in my start screen function i'll close the if condition and format the text to see the complete formula in action let's go ahead and save the app publish the app i will create a new ticket i filled out the details i'll click save if the form is successfully submitted i will be taken to the home screen here is the ticket that i had added if i select this i can see the details of the ticket this is in view mode so i cannot make any changes to this now the approver has got an email through the flow that we had created here are the details of the ticket and i have this link called take action if i select this it will directly launch that power app pass the id of the item and since i am the approver it will directly take me into the edit experience of that specific record so the approver can make the modifications and click save we can see the status of the ticket changed on the fly these are exactly the steps i took in my app as well here i created an extra screen you can consider this as an approval dashboard and here i show all the tasks or the tickets where the assigned to is the logged in user so i have a ticket assigned if i select this it will open the edit board of the form here you are free to take this to the next level you can disable the ticket information fields as well so the approver cannot make those changes you can check the mode of the form check who the logged in user is and accordingly enable or disable fields or sections and now the last part is to give the approver a notification and teams and also the ability for them to directly respond in teams we will leverage adaptive cards adaptive cards are platform agnostic snippets of ui coded in json if you head over to adaptivecards.io and go to samples here there are a list of samples provided that you can choose from you can even try them out live by clicking on the link here to try it yourself and this takes us to the adaptive card designer experience microsoft teams works with a specific version of adaptive cards so the target version i will recommend you set this to 1.3 to start with that's the supported version for now i will go to new card can pick from any of the existing designs i will showcase a simple example so i'll pick a blank card and let's start designing our card on the fly i would like to showcase an image so i will select the image element drag it and place it on the card here you can plug in a url to an image i just plugged in the url to an image from the web i'll set the size property to medium here i would like to provide the details of the ticket that were created so i'll add a text block this is where i will add the title of the ticket so i'll just type in title for now i'll set the font size to large give this a nice accent color next i can add additional text blocks to show additional pieces of information maybe to show the description of the ticket and so and so forth then comes the main part of creating that custom form experience i need inputs from my approver from the input section i need the workday number so i'll pick the number field place it here for any input control you add you have to plug in the id associated with that i will call this id workday and the label i will plug in as workday number set the placeholder text to empty next i'll add a choice set the id would be id approval decision the label would be i'll call the status and right at the bottom is where i can define my choices now the approver in my scenario can change the status to either closed rejected or duplicate so i will plug in those key values here closed rejected and duplicate i would like to make status required so i'll select this and i can plug in my validation message i can do this for other input types as well and i need my commands so i'll add another text box call this id commands make it multi-line i'll make this required and once i'm done completing my card right at the bottom there's an option called add an action i will add an action to submit this card i'll change this title to submit response once i have my card defined i will go and copy the card payload go back to my power automate flow which i had called as service desk approval i will edit this flow right after sending the email i will add an action called post an adaptive card and wait for a response this is important since we want to wait so that the approver responds to us from teams so i'll select this i will post this as the flow bot i want to post this in a chat and the message is where you need to paste the card payload that you copied from the adaptive cards designer so i will paste that in here update message that's the message you want to give the person who is submitting the form and here you define the recipient which in my case is my approver reza in the card json there were things that i hard coded for example title i want the title to come dynamically so i will remove this and pick it from dynamic content i'll do the same thing for description and any other columns that you would like to define here once you're done defining your dynamic properties we've created the form and the flow is waiting once the flow receives a response we would like to check the outcome of the approval so that we can update our item now remember the user is also getting an email with a link directly to powerapps and in powerapps we've provided that form experience for them so they could take the decision there as well i want to ensure that their first decision is counted so if i receive a response from the adaptive card i need to first ensure that the status of the ticket is still pending so once again i will use the get item action to check the latest status of that ticket i will add a condition condition is the status from my latest get item action is this equal to pending if it is still pending i would like to go and once again update my item here i would change the status to the response that the user provides in my adaptive card to do that i'll go to enter custom value and under dynamic content i do not get any results from that adaptive card i don't get those dynamic properties those are in the works for now it's not available so to get that here's a simple trick first go and rename this to something simple i will rename this action to card and here for my status value i will go to expression and write the following expression body of the name of that action which is card question mark under brackets i'll put in data question mark once again under square brackets i will define the id of the control for which i want the value for since i need the status i have this id so i'm going to copy this go to my flow and plug that in right here this will give me the decision that the user took in teams i can do the same thing for workday id i can do the same thing for commands i'll do the commands part that's what my formula looks like and since the decision is taken if you would like to reset certain fields to null for example assign 2 i would like to make it empty i'll select this go to expression make it null once i'm done with this i'll click save now since i added that extra connector in power automate the connector for teams i have noticed that sometimes powerapps acts up so what you need to do is this where you're calling the flow copy that entire function remove it go to data sources remove the connection for the unsuccess property of my form go back to action and power automate and reassociate that flow paste your formula back in and let's test this i'll create a new ticket plugged in my details i'll click save as the approver in teams the power automate bot sends me the adaptive card here's the image title and description i have to fill in the required fields say i've completed the ticket set it to closed plug in the commands take my response back to my power app here is my request the status is closed if i select it i can see all the details right here 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: 11,373

Keywords: powerapps approval form, powerapps approval workflow, powerapps approval sharepoint list, powerapps approval process, powerapps approval flow, power apps, microsoft powerapps, how to, approval forms, powerapps approvals, powerapps, powerapps and flow, power apps approval process, reza dorrani, sharepoint, how to make an approval form, flow teams adaptive card, adaptive cards microsoft teams, adaptive cards power automate, powerapps deep linking, powerapps approval email, forms

Id: Om4beefKmV0

Length: 32min 59sec (1979 seconds)

Published: Mon Nov 29 2021