Form Control in Power Apps | Must know features & properties

hello everyone raza here this video is all about the form control in powerapps i will cover the must-know features of the form control its properties how to work with data cards position them bulk update the properties related to data cards reusing the form control to create edit and display a record and a lot more so let's check it out in action [Music] the form control in powerapps is used to display edit and create a record in your data source in this scenario i have a data source which is a recruitment tracker sharepoint list the gallery showcases all the data from the sharepoint list and on the right hand side is where i have my form control i can create a new record i can view an existing record by selecting one from the gallery and i can edit an existing record to get started with the form control in the insert tab under forms we have a couple of options display form and edit form the display form only displays fields from your data source so it's a read-only form and it can only display a single record from your data source the edit form allows you to edit existing data and add new data to your data source the edit form can also be used to display data from your data source the edit form can do exactly what the display form does and more purely because i can change the behavior or the mode of this form to act like a new form view form or an edit form which basically allows me to reuse the form control for different scenarios which is a recommended best practice so i will start with the edit form i will rename this form control to form recruitment the key properties of the form control the first one is data source the data source in my scenario is the sharepoint list so i'll go ahead and select it and the moment i pick this data source it will bring in the columns from my data source and these columns are listed here in the form of fields if i head over to edit fields i can see the list of all columns that are being displayed in this form control the attachments field i do not want to display it on this form so i can simply select it by going to the three ellipses and i'll go ahead and remove it and it's been removed from the form control i can do the same thing for any other field of my choice if i would like to add fields from my data source to this form control i can go to add field this will list out all my fields that are not part of this form control currently i can go make my selections and click add and they will be added to the form control i even have the ability to reorder or reposition the fields on this form control i can do that by simply selecting a field dragging and dropping it to another position so progress now is the second field in this form control i can even reorder fields by selecting them directly on the form control i can simply select this and position it in a different location and automatically the cards will reposition themselves the key thing to understand about a data card is it contains four key controls data card key this contains the text of your column or field from your data source data card value the type of this control depends upon the type of column or field and your data source in this sharepoint list the title column is a text column that's why this data card showcases as a text control progress for example is a choice column and that's why it is represented here as a combo box control the star visible label control shows the star symbol if this column is a required column and the error message will show the error message related to any validation errors that could potentially occur when the user is submitting the data in this form control snap to columns now by default this is turned on and what snap to columns does is it automatically places the data cards depending upon the column number that you have specified in the columns drop down currently this is set to three so based on the width of this form control it is equally spacing three columns if i change this to two it will now position the data cards in a 2 column format and i can change this from 1 all the way through a maximum of 12. in this scenario i'll set it as 3 since i have that much real estate to play with you also have the ability to define the layout of the form control by default it's vertical meaning the name of the column and the associated control will be positioned vertically if i change this to horizontal the name of the column and the control itself will be positioned horizontally default mode edit form or a new form or a viewform now by default it is added if i was to preview the app it says no item to display the reason is because when the form is in edit mode or when the form is in view mode you are editing or viewing a record from your data source you need to give the context of an existing record from your data source and that is defined in a property called item currently that is set to empty and that's the reason why when i preview the app i do not see any item for now i will set the default mode of the form to new if i preview the app now this is a new form experience meaning i am creating a new record in my data source there are also other properties like the background color of the form so maybe i'll give it a light blue background color now there are various instances in which you would want to control how much real estate does a specific column on the form take for example i want the title column to span two columns to do that i'll select the title data card and simply drag it across that width and it automatically then repositions all the other controls notes i want this to span across the entire width of my form so i can simply select it and drag it across the entire width all the data cards that are a part of this form if i head over to edit fields depending upon the type of the control for example here i have a column of multi lines of text called nodes here the default control type is edit text i have the ability to change this and i have various other options to choose from i can either set it in edit mode meaning the user can make modifications to it or i can set it in view mode here i will change it to an edit multi-line text experience so we can see how this card has modified the control type i would like to change the height of all of these data cards in my form control experience now the way we do that is we select a data card and then we get all of its properties to modify one of them is the height but i would like to update all of the data cards to a specific height by holding the control key you start selecting a few data cards the moment a couple of data cards are selected try control a that will go ahead and select all the data cards for you and now i have the ability to make modifications to all of the common properties of these data cards in one go for example height i would like to set all of the heights of these data cards to let's say 125 so we can see how all the data cards have automatically updated their heights plus there are many instances where you would want to change the font size or the font style of the data card key and the data card value controls now since these controls are part of a data card if i hold the ctrl key and start selecting them across different data cards it will not work so the trick way to select all the data card key and value controls inside all the data cards of your form controllers select the form control change the layout of your form control so i'll change it from vertical here to horizontal and then go ahead and hit the undo button in the ribbon context on the top right so i'll select this so this will go ahead and undo the changes but what it does is it goes ahead and selects all those data card key and value controls in all my data cards now with all of these selected i can change its properties in one go for example the font i will change this to a different font modify the font size same goes for font weight and for any other property that you would like to change now if i preview my app i can see how all the changes have come in play to all my data card controls many a times we want to position our data cards in a custom manner for example if i want these two data cards to take 50 of the real estate that's available here with my snap to columns turned on and with my column width being three if i try and increase this one of the controls will take 75 of the real estate there is no way for me to give both of these 50 of the real estate so to do something like that go ahead and turn off snap to columns i can pick this data card and accordingly position it and i can do the same thing for my other data card as well also with snap to columns turned off and let's assume this app was built keeping responsive design principles in mind if i was to reduce the width you will note how the columns are trying to realign or reposition themselves depending upon the real estate that's available however if my width decreases one of my columns here for example the title card this has a defined width now if you would want the width itself to also be fluid basically dynamic or responsive in nature all i need to do for that data card is turn on with fit so you see it automatically fits the width depending upon the width of my form control ideally in case of snap to columns turned off i would want to do that for all my data cards and once again that same trick hold the ctrl key select a couple of cards ctrl a turn on with fit for all my cards now as the width of the form changes automatically all the controls will reposition or realign themselves another key feature around the form control is the ability to add your own custom cards to do that i will go to edit fields and in the fields panel on the top right we have these three ellipses if i select this i get the ability to add a custom card so i will click on add a card and that card is sitting right here at the bottom my first step i'm going to reduce the height of this card and i'm going to select this card and move it right here at the top and i want this card to span the entire width so i'm just going to drag it across i'm going to ensure i turn on with fit now in this custom data card that i added there are no controls so let's add a label control in here the width for this label control i will set as parent dot width so it takes the entire width of that data card and i will ensure that i center align its text and since i want to create that section header like experience i will give this label control a different fill color and set its color to white here is my label text i would like to add another section so once again i will add a custom card and take similar steps this section i've called it as details now i would like to position this data card probably right here in the center and now all i have to do is decide which data cards go in which section by simply just dragging and moving them across these different sections now in order to submit the data that is held in this form control i need to add a button on my screen so i will insert a button control position it right here at the bottom change the text property for this button to submit and on select of this i would like to submit my form so the function is called submit form and then i have to provide the name of my form which is form recruitment now if i preview the app and click submit this will try and submit this form but there is a data card in here that is required and this data card's required field property is coming directly from my data source which is my sharepoint list in my list i only have this column as required now the beauty of data cards is you can change the behavior of the card you can add required field validations to any data card in your form control even though they are not required in my backend data source for example i have a column here called progress if i want to make this required i go to the advanced tab search for the property called required now every data card by default is locked locked meaning this card is locked based on the behavior of the column coming in from the data source if you want to make changes to it you have to ensure that you unlock that data card and in this case i need progress to be a required field so i will unlock this data card and change its required property to true and straight away we can see that the validation has gone into play and these required field validations i can make them conditional as well for example if the progress is set to active in that case i have to ensure that i have a position defined so for the position data card since i want to make a change to its required field validation property once again i'll unlock this go to its required property if you click on the property name it will actually place it right on the property bar so you can plug in your formula i will use data card value 16 which is the combo box control for progress dot selected dot value is equal to active let's preview the app the progress if i pick active you will see how position now suddenly becomes required if i pick any other progress type position is not required now this is a new form control experience so whatever information i'm adding in this form will be submitted to my data source as a new record now when i click on submit it will submit the data to my data source typically we lead the user to a success screen and in powerapps we have a nice template called the success screen so i'll just pick that template so it creates the screen for me that i have renamed to success screen now when this submit button is clicked we are submitting the form we want to navigate to the success screen so we use the navigate function right here after this but there is an issue if we do this submit form tries to submit the form to the data source but it could succeed or it could fail so if you just navigate away to the success screen you may give the user a false positive result the form control itself has a couple of properties one is called on success and the other is called on failure on success is a guarantee that the operation of that form control has performed successfully so if you're ever trying to give a success message to the user or navigate the user to a different screen make sure you do that on the on success property of the form control so here i will use navigate and i will navigate the user to the success screen so if i preview this app and click submit this has navigated to the success screen that means guaranteed it has made an entry in my sharepoint list now from the success screen you would want the user to go to a screen where they can see all the data from the data source and to show more than one record from your data source or a list of data you would want to use the gallery control so i'll quickly add the vertical gallery control and connect it to my list i'll change the layout of this and position it right here and from this screen i want to lead the user over to my form screen whenever they're trying to create view or edit data so to create data i've added a button here now in my form screen my form control has the default mode of new so from my gallery screen if i want to lead over to that form screen and ensure that the form resets itself so it goes back into the new mode because that's the default mode all i have to do is initiate reset form the name of my form and then navigate the user over to my form screen if i preview this app click new applicant i'm back to my form screen and my form is in new mode now when the user selects an item from my gallery i would like to redirect the user to the form screen and also show the data related to the item that the user selected in the gallery for this right icon on select i would like to lead the user to my form screen but the form needs to be in view mode so i'll use the function view form and then provide the name of my form so that's my view form and navigate the user then to my form screen if i preview the app and let's say i select raw file nadal and i click view this leads me to my form control in view mode now the form control is not showcasing any data the reason is because the form is in view mode and for view and edit modes we need to ensure that the item property of the form is set my gallery is called gal data item property i will set it to gallery dot selected now in this case the form control is in view mode meaning i cannot make any changes to the form control so if you think about it we have reused the form control the same form control was used to create new records and now the same form control is run in view mode where it is showcasing a record from my data source now of course i cannot submit a form that is in view mode so this submit button should not be visible here in the view mode experience of the form the visible property of the submit button i will set it to my form control dot mode this should not be equal to formode dot view so as you can see the submit button is not being represented so the user can only view the data i can go back select another record and view the data for that specific record or i can click on new and the form now opens up in new mode and i can see the submit button as well now what if i would like to give the user the ability to edit data so for that when i head over to the view experience of the form i have added the edit icon on select of this icon i will change its behavior to edit form the name of my form control plus this icon should only show up if the form is in view mode so for the visible property form dot mode is equal to formode dot view let's preview the app edit the form goes in edit mode so now i can make modifications to this i change the status here from new application to active and i click submit this will lead me to the success screen i can go back to my main screen and we can see that the gallery is showcasing the updated status that's because the update has been made in my data source the default property of a data card now for my title data card the default value is set to this item.title now if i want to change that i have to unlock the card i would like to set the default value only when the form is in new mode if the form dot mode is for mode dot new then i will set it to new applicant else this item dot title so if i preview the app you can see how it set the default value since this was a new form if i pick an existing record it will show me its data if i edit it it will allow me to modify it but only in the new mode it will set that default value there is a visible property of the data card so i can show and hide data cards depending upon specific scenarios another thing what you could add is a button that allows the user to cancel or reset the form control on select of this button reset the form control so for this new form control if i was to go out and fill this form and now i realized i want to reset this or cancel my changes i simply hit cancel and it resets the entire control the submit button if you would like to only make it enabled if the form is valid that is the user has filled out all the mandatory fields for the display mode property of my submit button i can use form dot valid so there's a property called valid that tells me if the form is valid or not if it is then set this button in edit mode else disable this button so here for a new form experience it's disabled because i have to fill out the mandatory field once i have all my mandatory fields filled out the button comes alive if i change this to active we made position mandatory so you can see that the submit is disabled until i enter the value for position also if you would like the user to know that they have made certain changes on the form which are currently unsaved i add a label control here so that's a message that i put in this label control the visible property of this message would be my form control dot unsaved let's try it out with a new form the moment i start making changes this message comes alive because i have not yet submitted this form if i pick an existing record and let's say i edit this and if i make a change once again it says that the form is unsaved so the user knows that there are changes that need to be submitted when the user submits a new record and we take the user to the success screen many a times we want to show specific information for that submitted record for example in the case of sharepoint there is a column called id and this is an auto generated column so on the success screen i would like to show that id so i've added a label here and to show data from the last submitted item for the current user session who's running the app the form control has a property called last submit this gives you all the data from that submitted record to your data source in case of sharepoint if i want the id i can simply do dot id and here is the id of the last record that i submitted also if i would like to show all the details of the data that i just submitted in view mode maybe in this case i use the display form position it right here connect this to my data source it will get in the columns from that data source and this as well has an item property and i can set this to my recruitment form dot last submit so it will show me all the data of the last submitted item now there are also various scenarios in which the schema of our data source changes for example in my recruitment tracker list i would like to add a column of type number i call this rating the user can provide a rating from value 1 all the way through value 10. now since the schema has changed and i am still in the edit experience of the app i need to ensure that i go to the data source and i refresh it so it understands the latest or the updated schema now for my form control i will add that rating control i will bring that control right here now this rating control is a number field so this control is a numeric control so it only allows numbers however i would like to change the behavior of the control itself to make a change to your data card we have to begin with unlocking the data card now in my case i have this data card value control i do not want to use this control i want to change it to a rating control and power app so i will set its visible property to false next i will insert the control that i would like to add in my case i'll pick the rating control i'll set its max value to 10 so the user can go from 1 all the way through 10 the default value of this control i would like to drive it from my data card the default value i will use parent dot default so whatever is the default value of this card and the card itself has a default property which is this item.rating now in case of a new form basically the four mode is new i would like to set the default rating to 1. else i'll use this item.rating also the data card has a property called update this defines what value gets updated to your data source whenever a change is made now this one points to data card value 38 the text input control that i set to hidden i do not want to use that control rather i would like to use my rating control so i'll copy the name of this rating control and for the update property of this data card i'll use the rating controls value for a new applicant we can see that the default rating is one and i can change this i've set it to 8 and i can submit in my data source here is my new applicant and here is the rating set to 8. if i pick that specific record we can see how the rating control is showcasing that specific rating of it that i had set and if i edit the form i am free to make changes and resubmit and all those modifications will be pushed through in my back-end data source all these same core concepts is what i have applied in this screen i have a gallery control that is connected to a form control when i select a gallery item the form control shows me that data the form control here is broken into tabs i have done videos on how to break your forms into tabs or multi-screen forms here is another example of a tabbed form or a multi-screen form experience where the form is broken up into multiple screens here is an example of a form control that has custom data validations 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: 119,312

Keywords: powerapps form control, power apps form control tutorial - new edit form, power apps form control tutorial, powerapps, power apps, form control, powerapps forms examples, powerapps forms submit button, powerapps tutorial, powerapps sharepoint form, form control powerapps, powerapps form mode, powerapps form design ideas, powerapps forms, powerapps form control tutorial - new edit form, reza dorrani, reza dorrani powerapps forms, powerapps data cards, data cards, microsoft, form

Id: rxL_Wcs3kJA

Length: 30min 58sec (1858 seconds)

Published: Mon Jun 06 2022