Power Apps Form Control Tutorial - New Edit Form

hello everyone this is raza durrani today's video is all about the form control in powerapps we will leverage the form control to create edit and view records from our data source we will connect the form control to a gallery customize the data cards add conditional validations add sections change the data types of the cards and also leverage the same form control for creating editing and viewing records so let's get started with the video but first my introduction [Music] so to begin with understanding the basics of the form control my scenario here is an issue tracking application and the data for which is coming from a sharepoint list which has a wide variety of column types from text columns to multi-line text columns to choice columns and so and so forth now as part of this app i've already built the home screen which basically has a very simple header experience on the top and a gallery control that is directly connected to that sharepoint list which is the issue tracking sharepoint list now i would like to provide the users an option to create records edit records or view records from my data source in this case a sharepoint list so let's see how we can go about doing that now i have a second screen that i've created called the form screen and all i've added here is the header now because i want the user to create records i will go ahead and insert the form control now the form control there are two types one is the edit form control which basically allows you to edit existing data or add new data to your data source there is also a display form control which allows you to just view your data from your data source it's basically a read-only form wherein you can view a single record now as part of this demo i will show you how we can leverage just a single form control in this case the edit form control and change the behavior of the form so that it acts like a new form or an edit form or a view form depending upon the user action this enables reusability and increases the performance of your app as well because you have fewer controls added as part of your app so let me go ahead and add the edit form control first step best practice i will rename this to form issue tracker and let's look at the properties of the form control the first property data source connect your form to a data source it could be sharepoint it could be microsoft dataverse it could be sql important to note the table or the list that you're connecting to it needs to have a primary key in case of sharepoint it already has that primary key which is the id column in case of microsoft dataverse there is a quick column that's the primary key in case of sql you need to ensure that your table has a primary key in order for you to work with the form control in my case i'm leveraging a sharepoint list i will connect to my issue tracking sharepoint list and the moment i connect to my sharepoint list this will go ahead and add the columns right here it won't add all the columns if i head over to edit fields this is where i can reorder the columns in this form control so let's say if i would like to place status right after the issue description column i just select this field and just drag it and just place it right below the description column so that's how easy it is to move columns in the form control if you would like to remove a field that's added as part of the form control just head over to the field go to three ellipses and click remove and just like that it removed the column from my form control if i would like to add additional fields or columns just go to add field search for your column this will list out all the columns just select your columns and click add and just like that it will go ahead and add that column to your form control you can also select the columns directly as part of the form control and click on delete to remove the column or you can select the column and just drag and move it across in the ui experience itself now as part of the form control if i look at the fields right here so for example let's say the issue description field this field has a name called description it's coming directly from the column in my data source it has a data type of string and it is not a required field now all of this is coming directly from my data source now in my scenario the issue description column is a multi-line text column so if you would like to change the behavior of that type of control you can even go ahead and do that right here so in my case it's a multi-line text field so i'm going to select multi-line text and just like that it has gone ahead and made the issue description column a multi-line experience for me in the form control other properties of the form control include snap to columns by default this is turned on this automatically ensures that for each row as part of this form control how many columns are being placed so right now it's three if i change this to two it will automatically change it to a two column experience the width the height everything is automatically calculated as long as i have snap to columns turned on and i can change this to any of the values that are provided right here in my scenario because i have a lot of real estate available because i'm leveraging a tablet app so let's say i'm going to expand the width of this form i can easily fit three controls so i'm going to change this to a three column experience you can even change the layout for the data cards so by default it's a vertical layout wherein the text and the control are placed vertically if i change it to horizontal they will be placed horizontally i will stick to the vertical experience for my demo the mode of the form is edit that's because i selected the edit form control now if i go ahead and preview this app you will observe that it says that there is no item to display that is because the mode of the form is edit when the mode of the form is edit or the mode of the form is view in that case you're trying to edit or view a record so i have to give the context of that record to the form control in a property defined as item if i head back to properties in my case i'm trying to design the new form experience right now when the users can create a record so i will just change the default mode to new if i play the app right now the form is going to load in a new form experience for me in order for the user to submit the data i will go ahead and add a button control and i have called this button as submit and on select of this button i will call the function submit form and all i have to do is provide the name of my form and just like that this will go ahead and submit the data in this form to my data source so if i go ahead and preview the app right now and just fill in some sample data in here and if i go ahead and click submit this will go ahead and submit the data to my data source but if you observe what has happened right now is the form just closed and it says no item to display and the reason for that is because the form was just submitted how would i know now if the data got successfully submitted to my data source or not if i head over to my issue tracking list i see that the record that i just submitted is right here and all the details based upon the column values that i filled in have all been recorded in my data source but when the user is in the app this is not a great user experience wherein the form control just closes so how do i go about redirecting the user to a success screen so for that what we could do is this i will go ahead and use one of the screen templates that are provided as part of powerapps it's called the success screen template so i've just gone ahead and placed my header control right now and this is my success screen so the user knows that the data was successfully submitted now how do i redirect the user to the screen now typically what i've observed folks do when they submit the form they immediately go ahead call the navigate function to navigate the user to their success screen or their home screen depending upon their use case the key thing to understand here is when the user selects the submit button we are submitting the form but irrespective of the fact of whether the data were successfully submitted to the data source or not we go ahead and navigate the users to the success screen that will never give you an accurate representation of whether there was any error or not when submitting the data to the data source there could be some validation issues on the form that the user has not met there could be some potential issue while submitting the data to the data source maybe someone deleted a column at the back end so how do i go about ensuring that i navigate the user only when the form successfully submits for that instead of calling the navigate function on click of the submit button where i'm submitting the form the form control has a property called on success and this gets fired only and only when the data is actually successfully submitted to your data source so this is a guarantee of success and right here is where i can plug in my navigate function there is also an on failure function that gets triggered if the form fails now if i play the app my form is still closed that's because i've already submitted the data once and i need to ensure that i reset this form and define the mode of my form as well because in my case i'm trying to leverage the same form for editing viewing and creating records i'll go back to my home screen and in the home screen because i want the user to create records i will add the plus i can write here place it on the top right and on select of this icon what i would like to do is this three functions first i will go ahead and reset the form so there's a function called reset form and all i need to provide is the name of the form next define the mode of the form in my case i want the user to create a new record so i'm calling the new form function and provide the name of the form and then finally navigate the user to the form screen now if i preview the app and select the plus icon it's going to take me to the form the form is reset in new mode and the user is ready to go and fill this form out in my case i have title right here which is a required field as part of my data source so that is being respected right here if i try and submit the form observe i get this validation error that's because this column is a required field in my data source and even though i clicked on submit it did not redirect me to the success screen because there is an issue that i need to fix so i've just gone ahead and filled in some sample data here now if i select submit this will now navigate me to the success screen and this is a guarantee of success purely because i have navigated only on the on success function of my form control and if i look at my data source here is the issue that i just created now in the success screen if you would like to show some properties of the data that just got submitted one very common use case is the id of the item in the sharepoint list which is the unique inbuilt column that sharepoint provides now if i would like to showcase that data right here what i can do is i'll just add another label control here just copy pasted the same control here and if i would like to let's say present the id of the issue to the user i can just say issue id and now i need the last submitted value to my data source for this user's session for this user session so how do i do that the form control dot last submit and this will give me the entire record if i open this it's going to show me all the data that got recorded as part of my data source for that record or item that i created and if i require the id can just go ahead and select the id column i get the id of the last submitted record for this user's session and if i play the app right now here it is issue id number 17 and if i click on the back icon on the top here is the issue with id 17 that just got created for me so that's how i can create new records by just using those simple formulas now as part of the form control we can make a lot of modifications and i'll show you a few cases here one common scenario is the required field validations now let's take an example of the assigned to card if i would like to make this column as a mandatory field all i have to do is select the data card head over to the advanced properties and search for a property called required on the data card now this property is by default locked that's because when i created this form control and connected to my columns the behavior of all of these columns is coming directly from my data source and that's why it's locked if i would like to change the behavior you can even go ahead and do that and for that you have to unlock the card and now you're free to change any of the properties of the data card or the controls within the data card so in my case i will just change the required field to true and if i preview the app now and try and submit this app notice that assign to is also a mandatory field although it is not mandatory in my data source now what about title it's mandatory in my data source what if i unlock this card head over to the required property for this and set it to false well if i do that it will still enforce the fact that title is required in my data source that means you can make your form more restrictive in power apps but you cannot make it least restrictive it will respect the base behavior of your data source in my case it's the sharepoint list now you can also make fields mandatory or required conditionally so let's say in my case if the category selected is a bug in that case i would like to make the issue description mandatory so i will select the control right here and the category data card and just grab the name of that control in this case it's a combo box control that's because at the back end my category column is a choice column now if i head over to the issue description data card and unlock this card because i want to make a change for the required property by default it's set to false but now i want to change this i'm going to change this to the category control name dot because it's a combo box control i want the selected value and check to see if this value is equal to bug this function equates to either true or false if the value is bugged it's true otherwise it is false let me also go ahead and place this category column right next to the issue description column now if i preview this app observe issue description is not mandatory right now but the moment i select bug issue description becomes mandatory you can even add a lot more complex scenarios around validations and form controls i have done a full video on this i'll place the link to that video in the description for this video so do check it out another common use case is around setting default values now as i'm creating this form there are certain things that i would like to set to a default value for example the date reported column now when i am creating the issue more or less the date reported is today's date in order for me to set that i once again will select the data card unlock its properties head over to the default property of the data card of the data card not the control the data card and for this data card if i look at the default property it says this item.date reported that means whatever is the current reported date of this item but i would like to set it to today's date only if it is a new record that is being created that means if the form is in new mode if the form control dot mode is equal to form mode dot new that means if the form is in new mode it's a new record that's been created in that case go ahead and plug in today's date otherwise grab the value of the column directly from the record now if i preview this app i'm recording this video as of the 4th of feb check the date reported column right here it's defaulting to today's date and i don't want the user to change this column value that means i need to change the mode of this card and the way i can change that is once again select the data card head over right here to the display mode property of the data card now the display mode property of the data card by default is parent dot display mode if you look at the data cards here the parent for the data cards is the form control so it's following the mode of the form because the form is currently new mode the user can make changes to this data card but i would like to change that behavior and i'm going to change this to display mode dot view and now if i preview this app observe that the user cannot make any changes to the date reported you can also change the default behavior of the controls in a data card so let's take a scenario here priority in my data source is a text column but i would like to make priority a drop down column so the users can select the priority values based on a drop down and these values are actually coming from a different sharepoint list altogether and this could be any data source it could be excel it could be sql dataworks your choice so you here i have a sharepoint list and i have the priority column drop down values right here so how do i go about leveraging these values well in my power app i've already gone ahead and connected to the priority sharepoint list now if i would like to change the behavior of this data card of course i would have to unlock the card next delete the control within that card this is a text column in my data source so that's why it's placing a text box here i'm going to go ahead and delete this the moment you do that you're going to get errors it's fine ensure you have the card selected and insert the type of control that you would like to add and you can insert any of the control types you feel like you would like to change it to a slider control a rating control or toggle control check box your choice in my case i want it to be a drop down because i want the user to select one of those values so i'll select drop down i'm gonna place the drop down control right here now because i've added my own control i have to do some work right here in this data card first step best practice rename your control i have renamed my drop down control to drp priority now the first step is change the items property of the drop down control so i'm going to change this to my issue priority list and for this drop down control i would like the values to come from the title column now if i preview this app observe that these values low medium high critical are actually coming directly from my sharepoint list if i add another entry in here when i make a change that change would be reflected directly in my power app dynamic in nature and extremely powerful another feature of the drop down control is a property called allow empty selection by default it is false i'm going to go ahead and change this to true so it will basically allow an empty value initially so if i preview the app i don't see that empty value but if i come back and try and create a new record observe that the priority column is empty to begin with now i do see these two errors so let's go about fixing these errors the first error is around the positioning of a field called error message as part of the data card and because i deleted that control which was the text control and i've replaced it with the priority drop down control all i have to do is just replace the name of that control with the new control that i just added and that just fixes the first issue the next issue is around a property called update of the data card now update basically defines that when the data is being submitted to the data source what's the value that needs to be written to that column the column in question is a text column so i have to write a text value back to my data source previously it was the text box control so it was the name of the text box control dot text but now that control is missing and that's why i'm getting this error so i'm going to replace this with my drop down control dot selected and selected will give me the entire record and that's why it's throwing me an error again because it's expecting a text value so when you're changing the behavior you need to ensure you're still respecting the base column data type in your data source and in this case it's going to be selected dot title because i want to just pass the title and that comes from the title column right here in my issue priority list which is the same value that the user will select from this drop down and now i don't have any errors right here as part of the data card that you add you always get four controls the main control the mandatory field indicator the error message and the column display name now if you would like to change the display name of this data card if i head over to the data card and search for display name if you observe the display name is priority and this came from my data source if i would like to change this to issue priority you can even go ahead and change that next scenario for the expected completion date i would like to set the expected completion date of this issue based on the priority that the user selects i want that value to be set dynamically so in my backend data source for issue priority i have the list i also have a column of type number which is days in which i am defining how many days to add to the created date of the issue to define what the expected completion date is so for example if i'm creating a critical issue the expected completion date is three days that means three days from today if it's high it's seven days from today medium 14 low 30 days from today in order for me to achieve something like that i will head over to the expected completion date data card unlock this data card and because i want to change the default value head over to the default property and right here at the same formula as before i want to just do this the first time when the user is creating a record so for that same as before if the for mode is new in this case i would like to go ahead and add days to the created date or basically today's date there is a function called date add when i'm adding days i am adding days to today's date and how many days would i like to add well that depends upon my priority drop down selection so the priority drop down dot selected dot days dynamic directly from my data source i'm going to close the function so this formula will get called if it is a new form else you get the value directly for the record from the data source and now if i preview this app observe the value for the expected completion date if i select this as high priority the date will be seven days from today that is the eleventh of feb if i select critical priority the date will be three days from today which is seventh feb this completion date calculation is actually happening dynamically if i change the number of days right here it will change that behavior here as well and for this data card because i don't want the user to make changes i will head over to the display mode and change the display mode of this data card to display mode dot view another scenario when the user selects a specific priority i would like to also give a visual indicator or a visual cue to the user and for that in the priority data card i will head over and add a simple shape of type circle and i will place this right next to issue priority now for this shape what i would like to do is head over to its fill property and change the fill property to the following if the value that is currently selected in my drop down control is blank that means nothing is selected then set the background color to transparent else i want you to get the color so there's a function called color value and where do i get that color value from once again dynamic from my data source in my data source i have a column called color code wherein i have defined the hex values now if i head back right here and if i need that value all i have to do is drop down priority dot selected dot color code if i preview this app observe the color of the circle changing based on the selection i make here's medium priority here's a critical issue here is a high priority issue and if i just create a new record and issue priorities empty the color is transparent the moment i pick a specific priority here is a visual indicator once again the color for which is coming dynamically another common scenario is you would like to create sections in this form control and the easiest way to create sections is this just select the form control head over to properties go to edit fields and right here on the top right hand corner there's this option called more actions right here is where i can add a custom card okay so i'm just gonna add a custom card and i will create two sections i'm going to add two custom cards and these cards are placed right here of course i can move these cards around so i'm just going to place this one on the top what i can also do is span the entire width of the top section i just dragged the card all around so it took the entire width of the top section select this data card and insert a label control and this label control i'm just going to go ahead and drag it across the full width i'm going to call this my issue info and i've just gone ahead and styled the label control and this data card has too much height right now because i just have one control so i'm just going to span the height all the way to the top and just like that it looks like there's a section right here called issue info in which maybe i would like to add the title of the issue the category of the issue and the issue description another custom card that i added maybe it's a separate section i want to create so i'm going to drag this right here and i'm going to make this full width and basically replicate the previous behavior again i'm going to call this issue details place it right here on the top reduce the height and now if i preview this app check this out it just looks like you've created sections within the form now if you have a lot of columns as part of your form control you will see a scroll bar right here in the form control a vertical scroll bar and if you don't want to give that experience to your users you can even go ahead and break your form you can create a multi-screen form experience i've done a video on that as well the link to which is in the description for this video so do check that out as well now let's go ahead and head over to the main screen now this is where the user can select existing records right i have a gallery and on select of an item in this gallery i would like to lead the user to that same form control wherein they can either view the record or edit the record now for that i'm going to select the first item in the gallery and insert a couple of icons one for viewing the data and another one for editing the data and now the formula for this is literally almost a replica of what we are executing on the add record action so i will just go ahead and copy the formula head over to the view record on select of this i'm going to just fire the same formula the only thing that i will change here is the mode of my form i'm going to make it a view form and for the edit option i'm going to change the mode of my form to edit form now if i play this app and let's say i select first record to edit if i click edit it's going to take me to the form control but i don't see any item that's because i have not yet defined the item property associated with my form control and for this property all i need is a context to the selected item in my gallery and for that all i have to do is the gallery dot selected that means the record that was selected in the gallery if i preview this app observe it's showing me all the data coming directly from my data source based on the record that i selected there is one issue though if you look at the issue priority it is not defaulting to the actual value so if i head back if you notice the issue priority in this case is medium but when i go ahead to edit the record or for that matter if i go ahead and view the record i don't see the value for the issue priority column that is because for this data card i created my own custom control in there and to fix that for this control there is a property called default and by default the value in a drop down control is set to one i just have to change that to parent dot default and just like that if i preview this app now observe it's getting me the value for that record and also adding the conditional formatting color shape if i head back and if i try and edit a record let's say i select record with id number five if i edit this i get all the details associated with that record of course i can make changes here let's say i change the priority on the fly let's say i change the status here to maybe blocked and if i click submit it's going to post the data to my data source and if i go back here are the updates that i just made so this is how you can leverage the form control to post data directly to your data source create record edit record or update record so this video is a beginner's tutorial for working with the form control i do plan to add additional videos and cover more complex scenarios in future if you like this video then do like comment and subscribe to my youtube channel and thank you so much for watching

Channel: Reza Dorrani

Views: 364,624

Keywords: power apps form control, powerapps forms tutorial, powerapps new edit form, powerapps forms, powerapps form control, powerapps form mode, powerapps forms for sharepoint, form control powerapps, edit form control powerapps, powerapps edit form, powerapps edit form item, powerapps edit form gallery selected, powerapps edit form submit button, powerapps new form, create form in powerapps, Power Apps Form Control Tutorial, PowerApps, microsoft powerapps, reza dorrani, Power Apps

Id: aVEaRpAlaTA

Length: 32min 23sec (1943 seconds)

Published: Tue Feb 09 2021