Power Apps Forms - Updates, Unsaved & Submit Confirmation

hello everyone this is razer durrani in today's video i will cover three scenarios related to the form control in powerapps scenario number one checking to see if the user has made any updates to any of the controls or data cards in the form control scenario number two highlighting the columns on which the user has made changes in we'll add a visual indicator and scenario number three which is perfect for tabbed forms or multi-screen forms wherein once the user goes through the process of filling the form the final part is to show a summary of all the updates that the user has made so let's get started with the video but first my introduction [Music] the first case we will cover is to check if the form has any unsaved changes so i have a gallery on the left hand side here and a form control on the right hand side the gallery and the form control are connected to each other so if i select a record in the gallery the form control will showcase that specific record and the user can make modifications to the data in the form control now i can make modifications to the data in the form so let's say i change the estimated end date maybe i change this to august 12th and click ok now i would like to give the user an indicator that they have made a modification to the form and that that modification has not yet been saved so for that i will add a label control place the label right here for the text property of the label i will enter you have unsaved changes i will just format the label center align it and set the color as orange now to only show this label when there are changes that have been made to the form i will head over to the visible property of the label and just use a simple formula which is the name of my form which in this case is form project dot unsaved so there is a property here called unsave which will return a boolean value of true or false depending on whether a change was made because i have made a change to the form i changed the estimated end date i have that message being displayed let's say i go ahead and update my data now if i go ahead and select a different record i don't see that message right now but if i start making changes let's say i change the approval status to pending because i have made a change and this could be a change in any column in this form control i will see that message which says you have unsaved changes now if i revert this back to the previous value because it's not a change to the original value of the form i don't see that message right here so this is a nice way of giving a visual indicator to the users of a form whether they have any unsafe changes however what if the user makes multiple changes so let's say i change the title to document management that's a change i get the message that says you have unsafe changes and let's say i also change the description now the message at the bottom will always say that you have unsaved changes but what if i want to highlight the columns where the user has actually made a change now for that we would have to write formula for every data card of your form control in order for us to go ahead and give a visual indicator to the user that a change has been made so for example let's take the title data card and for the data card i will go to the border color property now the border color by default in this case is gray and that's why i see this gray border around my control if the user has made a change to the data in that card i will change the border color to let's say orange so for that what i can do is if this item dot title because this is the title column so i'm getting the value from the title column for this specific record and i will check to see if this is not equal to the value in this specific control so i have selected the control within the data card and if you look at the left hand side tree view it's called data card value one so i will copy this go back to my formula plug this value dot text so the actual value in the title column is it different from the value in that control in this case it's a text column so i'm checking the text property if yes then plug in the color orange else keep the color as gray and i will close my if condition now if i go ahead and preview my app because i made a change to the title column you will notice that it is applying this orange border around it so that's a visual indicator to the user that they have made a change now bear in mind that if i was to create a new form in case of a new form the user is always going to add data because they are creating a record so in this case if i was to enter any text it is always going to give me that indication that a change has been made but in reality i only need this for the edit form so for that i can add an extra condition here wherein i can check the mode of my form so the name of my form dot mode is equal to form mode dot edit that means the form has to be in edit mode and the second criteria which is the title value of my record is it not equal to the value in this control now if i go ahead and preview the app and let's say i create a new record this time if i put in text you will note that i don't get the border around it but if i select an existing record and if i make a change immediately it will highlight that a change has been made and this time the form is truly in edit mode now this concept is something that i can apply to every data card in my form control so that as the user makes changes i can highlight that to the user so here is an example of a formula for a date control type column once again i'm checking to see if the form is an edit mode and if the value of my column which is the estimated start date is this not equal to the selected date in this control and this control is named data card value two so here's my formula which says data card value two dot selected date if it doesn't match put the color orange so if i preview my start date is the 23rd of april if i change this to the 28th you will see that it gives me that visual indicator of a change that has been made and if i revert to the original date the visual indicator goes away i'll show you one more formula and this time for a choice column and this is what my formula looks like if the form is in edit mode and the choice column dot value not equal to this control which is data card value 4 dot selected dot value so if it doesn't match put the visual indicator so if i was to change the estimated duration to one year for example i can clearly notice where a change has been made now this could be really handy in large forms or forms that have been broken up as tabs so the user always has that visual indicator of the changes that they have made in the form and also the fact that they have unsafe changes so that they don't forget to hit the update button now on similar lines i have a sharepoint list customized form using powerapps and if i was to edit an item in this sharepoint list i have my form that opens up and this is a tabbed form wherein the user can select the different options and they basically tap through the different parts before they finally go to the confirmation screen screen wherein i have a submit button where i can submit my changes or of course i can click on the save button on the top now the same concept i have applied here as well so if i was to make any modifications here so let's say i change my content type wherein i i add video to this because i made a change i get that visual indicator i can also see that i have unsaved changes and this is extremely handy in tabbed forms so the user knows that they have unsafe changes and this is true for any tab in my form because i have applied that logic to every control now another thing that we can add to our form control specifically in cases around tab forms is as the user makes changes so let's say this time i remove the video tag update the description maybe change a few dates as the user makes these changes and as they move through the tabbed form when they go to that final tab i would like to display the complete details of that form basically give the user a preview of all the data that they have filled out so far before they go and hit the submit button so for that in powerapps what we can simply do is go to insert and add a form which is of type display the display form and this form i will connect it to that same data source i will position it right here maybe i will change this to a one column layout because i have that much real estate now for the item property of this form control i already have a main form and this is that edit form where the user goes and adds or edits records now if i need all the values of the data in this main form all i have to do now is for my display form that i added for the item property simply use main form which is the name of the control of my edit form dot updates and updates will basically give me all the data that is currently in those cards in your main form so if i just pick updates this will automatically get all the details from that record so if i preview the app now i can see all the data so let's say i go back to my information tab maybe i add a couple more content types here i update the description i update the dates for draft due by and published by so i've made a lot of changes here can even go and add attachments but when i go to this final confirmation screen all those changes that i just made will all be reflected right here in this one view form and i have unsafe changes but here it's like a confirmation to the user that these are the details that you've plugged in go ahead and submit them so i've just gone ahead and published my form and right here now in my sharepoint list if i select a record and click edit so if i start making changes those will be reflected i get the message that i have unsafe changes i make more changes in my different tabs and finally when i head to that confirmation screen i can see all my changes in one place before i go ahead and click submit so these were some simple tips of checking to see if there are any unsafe changes highlighting the controls that the user has changed and finally how to show the updates that the user has made in a single form 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: 43,186

Keywords: power apps forms - updates, unsaved & submit confirmation, powerapps forms, powerapps forms tutorial, power apps, powerapps forms sharepoint, powerapps forms excel, powerapps form validation, powerapps updates, powerapps unsaved, learn powerapps, powerapps edit form, powerapps display form, powerapps custom forms, reza dorrani, powerapps forms submit con, powerapps, power apps form check if updated, powerapps track changes, powerapps forms summary, powerapps form tutorial

Id: S0Zs66RVka4

Length: 13min 29sec (809 seconds)

Published: Thu Apr 22 2021