Power Apps Editable Table

what's up everyone april dunham here in this video i'm going to walk you through how you can have inline editing inside a powerapps gallery this came from one of the questions i got from one of my youtube subscribers who asked if they could do something similar to the quick edit mode in sharepoint inside powerapps so stay tuned and i'll show you how to make this happen in [Music] powerapps [Music] let's start by looking at our mission so this came like i said in the intro out of a question from one of my subscribers saying i want to mimic the quick edit experience of sharepoint in my powerapps application so let's take a look at the quick edit experience right now this is a modern sharepoint list one of the functionalities of modern sharepoint is this quick edit button so what this does is essentially turns this sharepoint list into an editable grid so i can come into any one of these items make a change tab through and change all this information in line i just exit the quick edit and it saves my changes and takes me back to this mode of the sharepoint list so this is kind of our goal and what we're striving to mimic inside powerapps so i have a new blank power app in the list that i'm going to be working off of for this demo is this training list we have a title category instructor link description video all these so we're we're going to make kind of an editable grid of this data first step in doing this is we need to insert a gallery so we're going to click on the insert tab gallery and let's choose a blank vertical gallery i'm just going to drag this and have it take up most of the width of the screen and what i'm going to do is i'm going to put in as many text input controls as i need to for the amount of data that's going to be here so looking back at the list i want to surface up the title the category the length and the spots available just to keep it simple so that's four total text input controls when you're usually working with galleries you're probably used to adding in label controls instead of text inputs but since we want this to be editable we're going to add in input controls so that we can enter in information so i'm going to click in my gallery select input and add any text input control i'm going to kind of arrange this in the upper left hand corner of the gallery and i want to make a few key changes to the text input control itself so that it looks more like an editable grid first thing you'll notice is this text input has a really thick blue border that is kind of rounded so the first thing i'm going to do is i'm going to select that text input we're going to go over to our properties pane go to the border section we're going to change this from a 2 thickness to a 1 and i'm going to change the background color by clicking on that icon to more of a lighter gray next i don't want that to be rounded so i'm going to click on the input again we're going to go back to that properties pane and find the border radius property and change that to zero so it's nice and square a few other properties that we want to configure if i play this so you can see the functionality when i hover over this it has this blue background i don't want that because it doesn't look that much like the sharepoint list functionality we're wanting to replicate so i'm going to click on the text input select the drop down properties pane scroll down a bit and find the hover fill property and we're going to replace what's here because that's that gross blue color and we can use a relatively new function called self so self allows me to get data from the current control that i'm in so i could say self dot fill and say just use whatever the fill is of this object's fill then i want to go back into my properties pane to the hover border color because the border is also changing when i hover i don't want that to be blue i want that to be self dot whatever my normal border color is so now if i play this out you'll see as i hover over it it just stays the same now that i have that kind of looking how i want it i'm just going to come in and copy this text input because we need four total of these and i'm going to paste three more of these into my gallery i'm just going to shrink this down a bit because this height of this object is pretty big and then i actually need to point this to my data source so i'm going to click on the gallery itself and you see this select data source option pops up so i'm going to point that to my training list and now i need to tie each of these text input controls to my data if i click on this first one this is where i want the title field to show so i can do this by clicking on the text input and navigating to its default property and we'll replace that hard coded text and we'll say this item dot title to pull in the title from my list and i'm just going to repeat that for the other three text input boxes so for this default property i want that to be this item.category this one should be this item.link and this one should be this item dot spots available looking at the data spots available in length aren't ever going to be that long of text so i'm going to shrink the width of each of these a bit say to 200 we're going to click on the object and just use the properties pane size section and change that width there and i'll kind of drag that over a bit and you want to have them so it looks like a true spreadsheet a line so just right next to each other so you see i dragged that there and now it's already starting to look like a real spreadsheet so i'll take the category i'll drag that over there and then finally for the title that could be kind of long so i'm going to just use the drag and drop to expand that out to make it a little bit wider great now we're getting somewhere i'm going to save this the next thing you're going to need is headers in order to replicate the headers we're just going to use a series of label controls so if we click insert go to the text drop-down and select label we're just going to kind of position these labels above each of these gallery items so i'll take this one make it match the width of this column so this will be the label for my title field and let's copy that and paste and just create your individual labels for each of these columns to make it look a little bit more natural i'm going to change the fill of these labels so i'll select the label select the fill property i'll make it red to match my header and we'll change the text to white and just to make it easier i like to group all of these together so that i can control them as one object so i'll drag my cursor over all of those so that they're all highlighted right click and select group that way if i need to drag this around i can drag around the entire object okay so far so good i'm going to add in another item into the backing list just so we can see what it will look like with more than one item in here when i added in a second item you'll see that there's quite a bit of space between the items so we want to clean that up a bit to do that we're going to select our gallery and we want to change this template padding property there's a five in there right now let's change that to zero so that'll shrink up any padding that was there we might need to move down our gallery a bit now and then we can make one more adjustment there's a template size property so that will kind of control the space between as well so we can shrink that down a little bit and i like to go and just increments to see what it's going to look like so if it's 53 right now let me jump it down say to 48 and see what that looks like so that shrinks it quite a bit so i'll just keep staggering down until it's how i like it and looks more like a spreadsheet so let's try 40 that time awesome looks pretty good they're right on top of each other now that we've did all the formatting that we need to make it look correct we need to work on the function of it so if i play out the app as is now i can come into any of these fields type in the text box tab and change the text in all of the different columns and rows now all that's missing is a mechanism to save this back to our data source to build that out first i'm going to go into insert icons and i'll put the save icon in there just so that we have a button to save this back to our data source before i walk through showing how to patch these first we need to stop and consider performance the items in a gallery could get fairly large so ideally we'd only want to save the items that you've actually changed so rather than just going into the save button looping through every item in the gallery and writing back to the list we want to find a way to just identify the records that have been changed so to do that we need to add in a little bit of additional logic into our gallery so what i'm going to do go into my gallery and i'm going to go to the insert input and i'm going to add a toggle control now this control is going to be hidden to the end user but i'm going to use it to determine if the data in this particular row has changed so to use this toggle to help us detect changes we're going to click on the toggle itself go to the properties drop down and go to its default property so if it's false that means it's unchecked but we change it to true then it's checked so if it's true that would mean there's a change and if it's false that would mean there's not but we need to dynamically set this based off of if the value in these individual text inputs have changed so essentially what we're going to be doing is comparing the default value of these objects with the current value so in the default property of our toggle we can compare the value from our data source so let's start off with the title field so we can point it to this item.title and we can say if that is not equal to so you can do a not equal if you haven't do this before with a less than and greater than characters back to back and we're going to compare that to the actual text input value in the gallery so title field is mapped to this text input 2 so i can just type text input 2 and you notice with powerapps when you type in a property like that it highlights the text bar in green so it's pretty helpful to make sure that you have the right one and if we do a dot after that and point it to the dot text property that's going to get whatever is in the text field in that value so we're comparing essentially the default value from our data source with whatever is typed into this text box and we're seeing if those are the same if they're not the same that means this has been changed so this toggle needs to be on and when you're doing a comparison like this it's going to evaluate to false in this case if they are the same and true if they're not so that will set our toggle to whatever we need it to be so i can really just go in with each of the different columns in my gallery and do this same evaluation and i need to split these out with an or so you can do that either by typing or or i like to do it with the two parallel lines just because i come from a coding background and i'm used to that so we're saying if title from our data source is not equal to the title that's in the text then turn the toggle on or if the category from our data source is not equal to the text input to underscore one dot text and then we'll just keep doing this for each of the different fields and you notice as i type this out we have two warnings on the length and the spots available ones that's because these are number fields in my sharepoint data source so i need to make sure that this is evaluated as a number field and that they match in their type so to handle that when i'm comparing it in the text input.txt i can wrap that in a function called value so that it's evaluating them as the same data types you see as soon as i do that that underline error goes away now we can see real time feedback that this is working because i did change the value in this line so that toggle's on but i haven't changed this line yet so the toggle's off if i go in here and make a change see as soon as i do it evaluates that those don't match and it gets toggled to on if i were to delete that and make that match up to what it was it's back to off and that's real time so one thing that i'll point out how this is happening in each of these text input boxes if you select it and go to the drop down there's a property called delay output so this is set to false by default so what this is doing for us it means each time you type into this text box it's evaluating so that's how it knows as soon as i type to toggle that to on if we are to set this delay output to true i'll show you what that does and how that affects our code it's not going to evaluate in that case until we're done typing so i can be typing a bunch of stuff here but until i get to like a pause does it actually reevaluate so you might consider turning that on just for a performance enhancement typically that will help your performance a little bit if that delay output is set to true now that we've confirmed that this toggle is in fact working we can hide this from our end users we can select the toggle and set the visibility to off with the mechanism in place now to detect items that have changed now we can go and patch this back to our data source that's when we'll go back to our save button and go to it's on select property and here's where we want to use the for all function because this is going to let us loop through the gallery of items within the for all we're going to use a filter formula because we want to filter out and only show the values where the toggle value is true so we're going to filter gallery to dot all items that gets all the items from the gallery where toggle1 dot value equals true so now that we only have the changed items now we can go in and do a patch a patch is what lets us write back to our data source so we can do a patch point it to our sharepoint list which is training and then we can use the this record function because that gets the current record that we are in in the loop so it knows which item to update and then we just have to map our property so we're going to do an open and a close curly brace and we'll map the title field to our text input to dot text and just continue this on for the individual columns that we're going to write back to again if you have like a number column make sure that you're using that value function so that it's in the correct data type and now some moment of truth let's run this i'm going to make a change to this row only click save let's go back to our data source we'll do a refresh and there you go there's power automate testing update in the record now that we've got the save working let's take a look at some other areas you might want to add to this so if you're using an editable grid like this you might need a mechanism to add a new row into this grid so rather than going off to a new form screen you might want to do this all in line so to handle that we can add in an add icon and on its on select property you can essentially just patch a new empty row to your data source now you can do this either to the data source directly or if you are leveraging like a collection approach to this instead so maybe you on your app on start were getting a collection of all the data from your data source and binding that to the gallery and then patching that all at once that's another way that you could tackle this as well but for this example what i've been showing we're just doing it directly to the data source so we'll do a patch to training we'll use our defaults and then point it to training so it knows it's a new item and if we have any required fields in here we'll have to make sure in this patch that we put something in there so for example i think title is required so i'll just put in some sample value and then when we patch that we'll need to also make sure we refresh the data source so that the gallery sees that new record so let's play this click the plus we see the new row in there with our sample data so now we can fill in the properties for this particular record another thing you might want to do is delete a row in line so to do that we can go into our gallery and let's just add in a trash can icon and we'll kind of position that to the far right and then we'll go to its on select property and this can be as simple as using the remove function so we can point that to our data source and just use the this item function to remove the currently selected item you could expand this and i have a video on how to do a dialog box so you can have a pop-up when they click this show up saying are you sure you want to delete this that's another thing that you can do to kind of safeguard against any accidental deletes and when you do do a remove like that again you'll want to make sure that you are refreshing your data source so that those updates are reflected in your gallery so again to test this one out maybe we didn't really need to add in that new row here so i can click the trash can removes it from our data source and our gallery is updated one more thing i'll show there might be an instance where similar to the example we were looking at with sharepoint how by default it's not an editable grid but you click a button to turn it into that so if we wanted to mimic that exact same functionality in our powerapp we could add that logic in also so we can just insert a button give it a text value say like edit in table and then on the select of this button we can utilize a global variable so we can use set we'll call this edit grid and we'll set that to true if we're setting it to true on button click we'll copy this formula and in our app on start let's just initially set that to false so that when it's first loaded it's not an editable grid but when we click the button it is now that we have this global variable we can key off of it and set the display mode property of our text inputs in our gallery so starting with this one if we select the text input click the drop down in the properties pane there's a display mode property the default is edit meaning that you can edit the information in it but we can control this to either disabled or view so we're going to use a formula in here so we'll say if edit grid equals true then it should be display mode edit otherwise let's make it view only and then we can just use this same formula in the other text inputs now instead of typing this formula over and over again on the other text inputs i'm going to select the text input go to its display mode property and i'm going to just tie that to the initial text input i just set that on display mode property so essentially that's just saying hey whatever the display mode is of this text input make it the same in this one so now i'm going to copy that and set that in the other two text inputs you see when we set that to view the lines go away so it looks just like a normal table of information but then when i click editing table our lines show up and we can edit it so we can't change anything right now click edit and table now i can alright i think i've covered the basics of inline editing your tables with powerapps i'll actually go ahead and upload this into github so if you want to just download this application and see the working sample you can as always let me know if you have any ideas for future videos and if you found this helpful please like subscribe share and i'll catch you in the next video

Channel: April Dunnam

Views: 125,849

Keywords: Power Apps Editable Table, April Dunnam, Powerapps editable table, powerapps repeating tables, powerapps inline editing, powerapps edit table, powerapps editable grid, power apps editable table, powerapps editable gallery, powerapps editable data table, powerapps gallery grid, powerapps editable table, powerapps grid gallery, powerapps excel like table, how create editable excel like table in powerapps, powerapps edit data table, powerapps edit excel table, editable table

Id: mj4mKS1hS7M

Length: 20min 41sec (1241 seconds)

Published: Thu Sep 03 2020