Power Apps Gallery Edit Form Tutorial for Beginners

hello everyone reza here in this video i will show you how to connect a gallery control to an edit form control we will reuse the form control so users can create edit and view data and i will also show you how we can leverage the same technique to create an editable grid experience wherein the user can also add attachments related to the item so let's check out this video in action [Music] the two most widely used controls in power apps are the gallery control which allows us to list our data and a form control which allows us to interact with our data create items edit items of view items the gallery and the form control are connected to the same data source my data source here is a sharepoint list called inspection the same concept will work for any other data source of your choice when the user lands on the home screen of this app the form control by default is set to new mode so the user can create a new item in my data source the gallery is connected to this form control if i was to select a specific record in the gallery the form control now will showcase the data related to the selection that the user makes in the gallery and the form mode is set to view mode so the user cannot make any changes to make modifications there is an edit icon right here if the user selects this the form now becomes editable if the user selects any other record the same process would follow if the user wants to create a new record they'll click on the plus icon the four mode changes the default selection of the gallery goes away key thing to note that all of this is happening in the same screen experience so let's see how we can build an experience like this from scratch first i need the gallery to showcase the data from my sharepoint list my sharepoint list is already connected to my power app you can head over to data go to add data connect to sharepoint connect to your sharepoint site and select that list i will go ahead and insert a vertical gallery control the data source for this gallery control would be my sharepoint list the gallery control by default will have the first item in the gallery selected the gallery control has a property called template fill we will add a formula to check if the item is selected and if it is we will give it a different template fill color if this item dot is selected then let's give it a color else we keep the original template fill color we can see how the first item in the gallery has a different template fill color that is applied since that is the selected item of this gallery if i was to preview the app and select a different item the template fill would be applied accordingly next we will add the edit form control go to insert forms select the edit form the data source will be the same sharepoint list this will go ahead and add the columns from my sharepoint list in here i can head over to edit fields reorder the columns define the type of control for example description is multi-line text so i can change that specific columns that i do not want to showcase on the form i can remove it and so and so forth our goal is to connect the form control to the gallery control the form control has a property called item here we need to give the context of a specific record in the data source that is connected to the form control and this reference we will give as the selected item of the gallery control my gallery control i have renamed to gal inspection so the item property of the form would be gal inspection dot selected the moment i do that the form control will showcase the selected item of the gallery let's preview the app let's select the home inspection we can see this in action right here the default mode for the form control is set to edit basically the user is editing the record that is selected in the gallery the user needs to be provided with an option to submit the changes to do that we will insert a button control i'll change the text property of the button to submit and on the on select property of this button we will go ahead and submit the data in the form control the function is called submit form and here we need to give the reference of the form control my form control i have renamed to form inspection so here i will go ahead and pick form inspection let's preview the app for this item let's make a change i'll change the subtitle from summertime to summer and i will click submit the moment i do that we can see the change has been reflected in the gallery that means it has gone ahead and made the modification for that item in my backend data source as well which in this case is my sharepoint list now the form control allows me to make changes to an item but i want to also give the ability to the user to create new inspection items to do that i will add a button i've changed its text to new inspection when the user selects this button i would want the behavior of the form to change to a new item form on select of the button i will use the formula reset form the name of my form which is form inspection and then change the mode of the form to new form the function is new form and then provide the context of the form which is my form inspection if i preview the app and click on new inspection the form behavior now changes to a new item form experience i've gone ahead and filled this form out and if i click on submit it will once again submit the data in the form to my data source in this case it will create a new record in my sharepoint list once i click submit the moment i hit submit the form control now shows the first item in the gallery which is selected and the new record that i created which was site inspection that's right here at the bottom to show the latest modified items right at the top for the items property of the gallery i can use the sort function on my sharepoint list sort this by modified date in descending order so this will now have my latest item right here on the top so user can create a new inspection or user can select an existing inspection now observe when i click on the new inspection button the form changes to new mode however when i make a selection in the gallery it is not changing the mode of the form to edit so now we need to take an extra step to do that since we are trying to reuse the form control for both the new and edit experience for the gallery control there's a property called on select we will take that step to change the mode of that form first we will reset the form and then we will set the mode of the form to edit by calling the edit form function now if i make a selection of a gallery item the mode of the form will change to edit so it showcases that specific item if we click on new it changes the mode of the form to new there is still a confusing aspect for the user visual indicator for the user is that lawn inspection is selected but they are creating a new inspection so we would like this selection to go away by default a gallery always has an item selected so how do we go about changing that behavior the gallery control has a property called default it's set to empty if i change this to an empty record observe the moment i do that it doesn't highlight any item in the gallery that means currently the gallery has no selection if i was to go ahead and select an item now it will respect that selection if i was to make a change to this form and submit it will go ahead and make the update refresh the gallery and the first item in the gallery is selected which is exactly what i need however when the user clicks on new inspection i would like this gallery to go back to no selection so basically the default value that i have hardcoded to an empty record here i need to now drive this from a variable so when the user selects on the new inspection button i will add an extra action here to set a variable i will call this variable var gal default and i will set this to that empty record for the default value of the gallery i will replace this with that variable preview the app if i click on new inspection the form changes to new mode and the gallery now has no selection so it's a clear indicator to the user that they're creating a new record if i make a selection it will go ahead and highlight the selected item and show that specific item in the form once again if i click on new inspection you would be assuming that it would reset the gallery but it does not and the reason here is because this variable is already set to that empty record so powerapps assumes that this value has not changed what we need to do is initiate an actual change of this value so right before setting this variable set this variable to this time i'll use the function blank now all this is doing is setting that variable to a null value and then setting that variable to an empty record because blank and this empty record are considered two different types powerapps understands that there's a change and because there's a change that's made it will trigger that default selection of the gallery let's check it out i'll click on new goes to empty it removes the selection of the gallery i'll select a specific record it will highlight the selection if this time i click on new it will go ahead and remove the selection of the gallery also to give a clear message to the user of whether they are creating a record or editing a record we can insert a label right above the form i can change the text of the label depending upon the mode of my form if the form control dot there's a property called mold if the mode is equal to formode dot new then the text of the label would be start a new inspection else inspection and here i would like to give the title of the inspection that they are currently editing so i'll use the ampersand for concatenate inspection gallery dot selected item dot title let's preview the app if i click on new inspection it says start a new inspection if i select a specific item in the gallery the text changes to inspection of the current selected items title now when a selection is made on the gallery the form is editable if you would like the form to be in view mode when the user can only view the data the simple change we need to make is for the on select property of the gallery where we were setting the mode of the form to edit now i will change this to view now if i make a selection the form is not editable in this case the submit button makes no sense since the user is viewing the data for the visible property of the submit button we will set the formula my form dot mode should not be equal to formode dot view basically if the form is in view mode do not show the button if i click new inspection the form changes to new mode so the button is now visible and the user can submit the data if i make a selection the form is in view mode and the user cannot modify the data now to give the user the option to modify the data i will need another button called edit so insert a button changed the text of this button to edit on select of this button i will first reset the form change the mode of this form to edit the form is in view mode if i click edit the form is now in edit mode and we can see the submit button so the user can now make changes and once they have their changes made they can click submit the data gets submitted to the data source however the form is still in edit mode that's because when the user clicked the submit button the mode of the form was added the form control has a property called on success whenever the form successfully submits the data to the data source this is the function that gets called so here we will reset the form and set the mode of the form to view i have my site inspection selected i edit this i make a change i click submit the data gets submitted and the item is again selected and the default mode of the form is set to view if the user creates a new inspection and clicks on submit the form gets submitted but the form says no item to display and the reason here is because when we clicked on new inspection we are setting the default mode of the gallery to the empty record so there's nothing selected so when the new form is submitted the data is going to my data source because i see that in the gallery however there is no selection on the gallery and the form is being set to view mode on the on success property so the form has no item to showcase for viewing and that's why the form is empty so to fix that on the onsuccess property right after viewform we will set that variable which is var gal default to the last submitted item of the form and you can get that by using the name of your form control dot there's a property called last submit so i'm giving the reference of the last submitted item so that becomes the default value that is selected in my gallery i'll create a new inspection i'll click submit this time the gallery has a selection which is the last item in the form that the user submitted and it shows that in view mode i can go and change this to edit to make changes to this and if i submit those changes would be reflected in my gallery so that's how you can reuse the form control experience for the user to create edit and view items now this experience of the form control being connected to a gallery comes in very handy in scenarios where you would like to create a grid like experience for the user and i have done multiple videos on how to create grid experiences using powerapps galleries very similar to excel make changes once they have their changes in play they can exit the grid view and all those changes will be saved in the data source in one go including performing bulk capabilities one key limitation related to the grid experience was patching attachments however using the concept of a form control being attached to a gallery here i have my grid experience and on the right hand side i have my form control this form control only has the attachments data card in play the form control is connected to my gallery control so when i make a selection in my gallery item it will showcase the attachments that are related to that item this is the grid experience so as the user makes changes it will save those changes to my data source and for the user to change the attachments they have the attachments control here where they can make those modifications attach files and once they've made the changes they can go ahead and click on save and this save icon all it does is it submits the form the form is related to my specific item that's selected in the gallery so if i click on save it will submit the attachments observe that the save button does not show up until the user makes a change in the attachments control and to do that is extremely easy the form control has a property called unsaved so for the save icon the visible property is set to the form control dot unsaved let's select an item i have not made any changes to the form so the icon does not show up the moment i add an attachment or initiate the process of removing an attachment the icon will show up and now to take this one level higher what if i want to create a full grid experience wherein the attachment control as well acts like it is a part of the grid in this case i've taken a different approach to the grid experience the grid is actually not an editable grid when the user makes a selection of a specific item in the gallery only that record becomes editable and the way i've made that record editable is by using a form control basically i have superimposed the form control on top of the gallery control so from a user standpoint when they make a selection it appears as if they are editing that specific record so if i make changes here i get that same save icon at the right that means i'm making changes do you want to save this and this includes the attachments as well if i make those changes i have to click save when i click save it will basically submit the form so this is actually a form control experience it has all those data cards that are horizontally aligned it has the attachments control the key here is how to position the form control to sit exactly on top of the selected item of the gallery to do that i'll point you to a reference article on the forums the link will be in the description for this video my gallery that is showing the data from my sharepoint list needs to have a property called row number so i need to know which row in the gallery is selected based on the item that's selected i need to calculate the y position of the form control so i superimpose it exactly on that item so to do that we need that row number property we read the data from our data source put it in a collection and then run a formula to add that row number the gallery is connected to that collection and this collection has that property called row number when the user selects an item in the gallery i can get that property by using the formula gallery dot selected dot row number and for the form control the y-axis property which defines where this control is placed on the y-axis it has to be exactly on that selected row here is the formula to grab that get the row number multiply that by the template height of the gallery 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: 285,088

Keywords: powerapps gallery edit form, powerapps gallery edit, powerapps gallery and form on same page, gallery and form powerapps, power apps gallery default, power apps, powerapps, powerapps beginner, reza dorrani, powerapps form mode, powerapps new edit form, powerapps sharepoint, microsoft, powerapps tutorial for beginners, powerapps gallery attachments, powerapps edit form from gallery, powerapps edit form, tutorial, microsoft powerapps, power apps edit form, how to, learn powerapps

Id: HHXKfB1iAH4

Length: 23min 5sec (1385 seconds)

Published: Mon Jan 24 2022