PowerApps Repeating Tables Like InfoPath Part 3 - Inline editing

in today's show we're going to finish up our apps repeating tables this is a third in our series in the last one and this video we're gonna work on things like the inline editing the deleting talk about how to make the save buttons kind of come and go as you please so lots of little variables lots of little pieces they're really what makes your app polished and avoid your users from losing data should be fun but first here's our intro hi my name is Shane young with power epsilon11 those guys and today we're going to finish up our expense report alright so over the course of teaching you guys how to do power apps repeating tables just like we used to have an info path we've been doing this expense report app and so in the first video we talked about how the data in how to build that repeating table right that real crown jewel we were all excited for the second video we talked about how to display the data so how to use cascading galleries and make an experience where we could edit a single entry kind of after the fact so in this video what we're going to do is we're going to dive in and we're going to show you how while you're doing the data entry you can actually let the users edit and delete the records and kind of work with the data a little more the way they'd want to and the reason we pull this off to the end is there's a lot of little complicated things right this may be the most complicated powerups video I've made some a little nervous about it but we're going there we're hopefully break it down so you guys can follow along because what happens is we're setting on my school temp variables and things like that that can get real confusing if you're not not careful but we'll try and do a good job of it so I think it's enough of an intro let's switch over to my desktop and let's just take a look at what we're gonna do over here what we're gonna do is we're gonna walk through this first app that I made right this is the example app that's got all the fancy customizations and so guys look at that to see what we're going to build in this example so we're gonna quit go and create new expense and we'll say expense name is trip to moon I don't know and then we'll pick a date oh and well do do all the time right pick a date and then click OK we're gonna say Hardware total experience is currently 0 ok so we sort of type in car and then we'll stay expense amount for that is 1/1 now notice we have the Save button just looking around their app that's cool we also have a remove so if we hover over or if we click on this icon that will just delete this row out of our collection altogether and notice that while we have made changes up here but we haven't hit save we have unsaved changes so we can't save the important reason for that is because this collection doesn't get updated until a user quick says Save button so if I was to save my form right now and submit it none of these changes will get pushed out there so that's why we have to kind of account for that now when I hit save look at that we reset things so that now the Save button is available because this line doesn't have any edits but as soon as we start to type in this line so we do boat and click out of it we get the save locked out again right so on change for this one we're going to set it so that we're not allowing the save again so that's an important piece of the dynamic but we could be like oh I don't actually need boat no big deal let's get rid of that so we'll do that alright so save is back as an option good good and we have the Edit pencil up here so if we hit the Edit pencil it's gonna write because right now I can't edit these items they're uneditable they're just displayed we hate edit it makes them editable again save is still an option because we haven't changed the collection but if we say car becomes cars and then click over here boom you have unsaved changes so we'll say save those now I do want to show you one thing because I guess I did a bad job of this if I say edit and we were like oh no it was a supposed to be car now you're like wait a minute Shane you could still hit save if I go down here and try to click on save I have unsaved changes so what happens is this is called on change but the on change doesn't take effect in twily the box but as soon as I leave the box and click on this the value of this changes and so it disables that as I'm pressing the button so that's the reason you can't save those changes so just in case that comes up to your a quate a minute that's a little weird now one thing I didn't do that I probably should have done is right now if I click this this is going to delete this whole line instead of canceling my changes if you needed to do that we'll just take a whole bunch of you capturing stuff in variables kind of sounds a little like a pain in the backside to me but you could do that if you really needed to so but we're not gonna cover that in the video okay I'm also notice up here like I formatted this as currency I think you already know how to do that but we'll talk about that for a second and that's what I want to do in this video just walk you through the mechanics of all of these different icons cuz it turns out that the pencil versus the save and the delete it causes a lot of grief so okay let's jump over there and take a look so we'll go over here what we want to do is we'll go over and play there create no expense I suppose hold down the Alt key press create no expense so that jumps us over to the screen and so now we want to kind of dive in and update some of this and I think the first thing we'll do is we'll add the remove button so let's grab our gallery and let's just make a little bit wider loop and then we'll say insert an icon and we'll do the cancel probably should have done the trashcan but since I showed you the other one a minute ago we're going to stick with that so it looks like the Heather screen now remember this has got a you don't want mess up our tab so we'll make sure it's a little bit lower down here there we go it feels good we'll make it up here what kind of rain it up could be the same size alright so you can play with the formatting the sizing making it all good but don't mess up your tabs by putting this X too high right that's the important thing okay so then that would give us the X and so what we're going to do is we're gonna say when you select that what do we want to do we want to remove from our expense collection this item right plain simple no problem should be straightforward we've done this before this is just working with collections I guess I'll tell you there's a link below to the collections video also if you like whoa collections again hard but hopefully if you followed video one in video two you pretty much know what's going on now okay so that I remove the item that'll save the item now what we want to do is we want to make it so that after you save the item though these icons go away and then we can show that Edit pencil which what to put in place but what we're going to do that is we're gonna come in here and we're going to add another column to our collection to track whether or not that should be shown so so what we'll do is we'll go back over to screen one we'll say all right screen one we create the collection we set expense collection line item line cost and we're going to add another one and we'll do a comma there though and we'll say yeah show save make it real easy say show save buttons just like that and we'll set it to true all right that looks good so then now I'll hold down the Alt key again I'll press this so that's going to create the collection bring us over to this screen and so then now what we want to do is we want to set the say or the visible property these two to be derived from that show save so I'm gonna click on this guy I wanna say I should just take these unless named these real quick because what I found is that especially as we start making these disappear it's almost impossible to work with these if you don't have them so you know what they are okay so I can't say good so say I can't save visible for you is now not true but it's going to be show save buttons boom and then the visible for the X right we can do the same thing you can either say show save buttons that would work or remember our vans trick is we could say I I just want you to be icon save dot visible so then if I con save as visible this guy's visible if icon saves not visible this guy this one's not visible so that's one of the stool things it helps you if you have lots of complex formulas for visible instead of pasting that formula over and over again just set it once then tie it right so there you go so then now when you enter an item we want to make all this go we also need to change these expense fields so whether or not you can edit them so if we click on input item and we say I what is your display mode currently your display mode at it that seems right but what we really want to do is we want to say if our are say show save buttons so if show save buttons is true then display mode is edit if show save buttons is false then display mode is view and that's how we're going to determine whether or not the these fields are editable in a given point same type of logic right these buttons are being shown it's because I want them to be making it it's over here if I don't want them to be making that it's over here these buttons aren't shown so everything's kind of tied together so over here will then say alright your display mode all right we can make it that same formula again or why not just do our same crazy idea of input item dot display mode now they're tied together yeah look at that we set one variable and four things are going to change your visibility or not without a lot of work on our part so then what we need to do and now let's go back to the Save button and say I when you're selected so on select we need to update two things here one is we need to say all right well when we select that we need to change our Allah our show save buttons not allow save buttons show save buttons and we're going to change that to false right because we want to make the for this line in the gallery we want to make it false but we'll copy that real quick so don't have to type it all again for the next line right so remember because this is what takes care of writing back all of the changes this next line is what makes the next line in our gallery or aka our repeating table so we're going to say hey you we need to show those buttons so we'll say true for that okay maybe a little bit lost maybe that's okay we're let's go click the buttons and show you and that's the thing I'll warn you about this video I if you get lost for a minute don't give up give yourself a couple of seconds to come back when you kind of wrap up the story so let's go back to screen1 and see if we can make it make sense where I stood so create new expense alright so tests give it a date I will remember this click ok ok I always forget to do it's travels from go down here when type in cars or cares apparently we're going to do 150 we're gonna press save now watch what happens so the buttons are gone here these fields are not editable anymore that second line on the on select though made these available right so out of the second row draw repeating table so these are editable and there's the buttons uh-huh kind of cool I think it's kind of cool ok so then now that we understand that hopefully right yay yay okay now that we understand that what I want you to do is let's go back over here and say all right well I need to add a button right because we want to have a button that shows out remember the Edit pencil so I'm gonna click on my gallery get me back up here let's insert another icon soul icons edit I'm gonna drag him over here we're gonna make her gallery a little bigger real quick too why just because I don't want the buttons to overlap right you always got to be kind of careful you can make stuff overlap but just you gotta do in a very specific order so I just try to avoid having overlapping items because what happens if one's on top of the other and the other one takes it on select before it does then you can't click the button underneath it it can just be weird so I'm gonna be calling you that and put it over here now because these aren't visible they wouldn't have that issue so technically I could put this right on top let's be brave what that will put the pencil right on top of those two and you can see it was really bad down here and so first off was handled the visible so the visible for this guy what is it it's just the opposite of the previous one so what that was show save buttons right remember and so our exclamation point just says not and so the not the opposite of a true/false variable is just the opposite right so true or false so when the it's currently Falls for this one which is what's hiding the Save icon in the Delete icon the opposite of that is true which is showing the pencil so that's how we get this idea of the two toggling back and forth but they'll never show at the same time because they're you know they're set on an opposite parameter yeah all right so what do we want to do when they click on that oh that is a great question so let's go up here to the on select and let's think about how to handle when they click on that button so we'll get rid of that well the first thing I think we want to do is we probably want to change our our view back right because we need to set it so that the pencil goes away and we see the save and whatever so I'm going to say we'll do a patch we're gonna patch expense collection we're gonna patch this item and we're we're gonna patch it with we're gonna say hey show save buttons but we got put our X 1 inch or our curly braces in first though your show Save button say oh so many mistakes see I hate when power apps does that I started type it and then it finished whatever all right say show save buttons and so then now we want to set those back to true curly braces and boom and what's gonna happen when we do that well what's just what's hit play and show you so if I click this button right we're right back into this case where we can say all right we can edit these again yay and we hit save again we get this back mmm now notice why I hit save it created an extra row down here want to account for that minute we're not ready to do that yet so X out of there okay so when you click the Edit pencil it just sets that stuff in there that seems reasonable to mean but what we want to do here also though is I'm going to add another item so I'm gonna do a semicolon and I'm gonna say update context right those can create a contextual variable and what is that variable going to be it's going to be I'll call it don't put the curly brace then we'll call it edit pressed and I'm gonna say true for that okay why because remember just a second ago I created this extra line by saving I don't want to do that so we're gonna go now that we understand that that's done I'm gonna go back to the icon save this is why named I'm gonna make my life easier and we're gonna say okay when you save right we only want to create that next row if we weren't and editing so we're gonna say if I was it was edit pressed yep so if edit pressed myself edit pressed is true and we don't want to do this right so we would do a whole bunch of nothing and if it's not true we're going to do oh we're gonna put the mouse right here when do this so this is how we know whether or not to write that next record so alright can we have the contextual variable called edit pressed and so when we pressed on this icon we set edit press to true so then the saves like hey edit press was true so false that means this don't do anything but if it was impressed like when I was creating a new item then we would collect and do this and so then after we get done with that what do we need to do we need to say we need to update our context again and we need to say edit pressed is back to false just like that is that help does that make a little bit of sense of how that works let's let's try it and see so we hit play okay so member mango we hit edit and then we hit save it made this extra line down here let's hit save this time we can make it change we can not make a change it doesn't matter we say save so this got updated but we didn't create another blank row so that was what the importance of setting that variable when we click this to change the behavior because we know if I hit save on these guys alright so if I you know if I go in here and say well here let's delete this once we used to remove yes that works let's call this plane 22 if I hit save now right same Save button but what happens is my new row gets created now my new row did not get created that's not cool why didn't my new row get created let's go back to the beginning let's go over here let's say screen 1 I say play sometimes my stuff just gets out of whack I say create a new expense alright that all looks fine so we'll do tractor I don't know why I'm doing tractor 33 will say save sure I just got my variables out of whack so that looks good right and we go in here or like dog it's 33 also apparently so then now we'll go edit tractor will say tractors it was actually posed to be 330 will say save no new item gets created that's perfect we're going to unhear will say expense item cat that will say save shoe ok so right we want to say to remember about previuos sometimes it makes you think things are messed up and it's actually not ok so I think we'll keep soldiering on here so we'll X out of this so that's made it so that we can work with our data we can edit and we can do our saves so the only other thing I think we need to talk about is how to make sure we don't lose changes cuz right now let's go actually back to preview boo if I start typing in no it's not what I would type in there I would type in boat I type in boat remember and then I leave if I was to hit this save right now boat is not going to get written to the data source because the collection has still got that empty record we have not hit the Save button which takes the value here and writes it to the collection and the Save button just pushes whatever is in the collection so what we need to do is we need to make it so that when people change this the Save button is disabled oh all right so let's take care of that so it's next down here and so what we're going to do is we're going to take advantage of the on change property of these fields so we're going to say I on change for you what do I want to do I'm going to set a variable yeah with that we can update contacts we can do any we'll set it will say set allow save to be Ornelas he needs save time of that I'll make more sense needs saved to be true it's not like that though it's just like that okay so anytime you change this field it's going to set a variable it says need saved to be true so if we go over here we're going to do the same thing with say we'll just copy this ctrl C so quick on this one I'll say you're on change is set need save to be true all right so that'll work and so then we'll go down here to the Save button and I'm gonna say alright save button your you're not visible we wanted always to be visible we're gonna set your display mode we're gonna say your display mode if I'll say if o it helped by a type-1 in if need saved right so remember if needs saved is true false so if needs save is true then the display mode is going to be a view only if display mode is not set to that and then it's gonna be to edit so boom just like that and that will give us the functionality we need there to make the save button only be clickable we need it now what we need to do though is so we've made the on change but once they get done making the changes and they do hit the Save button so let's click on our Save button icon save once again we've got another line up here sets needs save we're gonna set it back to false because will now have saved all the data so last but not least we need to go back over here to create a new expense we're gonna say hey make your new form come collect all of that actually you should be fine yeah what the heck let's try it so we hit play we'll say creamy new expense alright so the Save button works right now right because there is no nothing's been changed if we go in here and we type in car and we hit tab and then go to our change now you can see here that the buttons here but I can't click it or so that's actually kind of just annoying to your users so instead of where I used the display mode of view let's back that up let's use the display mode of disabled so that way the buttons actually a different color see now it's there but it's grayed out the other thing that I'm going to do is I'm going to throw a little label on the screen I can try not to make my user sad someone grab a label I'm gonna throw it down here and I'm gonna set the text to be you need to save your line item first right and you probably have a nicer message than that I'm gonna set my color to be red because warning text is always in red let me get a little bigger so they can actually read it and then we're gonna set the visible form unable to be oh not to set them to save but it's gonna be based off of needs saved so if needs saved is there then that is up alright I feel a little better now let's see I think this will demo better so play create a new expense so you need to save your item right because it knows that we came in it's always false and basically it's not letting them ever save it without having an item up here but fun like car twelve we say save so now my Save button is back if we go down here expense I have my type in boat and I hit tab then it's like hey you've got changes of their you need to save okay so then the other thing though we'll need to do so let's get rid of this line Oh so we need to make sure that we get rid of a line then it gets rid of those changes so let's do that so we'll say when they click on icon delete on select here what do we want to do we want to set need save to be false all right we don't need any saves at that point good good good and the other thing we're going to need to do is think about our pencil here so when they click on the pencil do we need to change anything about need save no right because just because I clicked on the pencil doesn't necessarily mean we need to click it it's not until they actually make an edit so let's go over here and click on create this again oh I'll say play create new expense alright so if we're going here to expense item and we're like taco oh yep tacos need say we'll say $4 taco hmmm I'll say save ok we're good we got burger a three dollar burger man that's pretty cheap burger it's safe alright so that seems right we can get rid of this line that's fine oh but tacos were actually 450 so we'll go up here 4.5 and then we click away you need to save your line item first I'll say save boom I feel real good guys how about you other thing we had that we didn't cover is the whole idea that you might want to put a text function around this to make it look a little nicer so boom we'll do that real quick too when we talked about this in the previous video but this is the format that I would use for the text function a 750 looks good to me other things you'd probably put it's a label up here maybe some instructions on how to fill these out those type of things would help but I think this shows you the inline editing as I warned you there ahead of time right it's complicated it's weird you'll probably come up with scenarios I haven't figured out but now you've kind of seen the mechanics of how you do that right we use variables and line item properties to make it so all the different scenarios that you want to have work you know and it could be oh we talked about maybe you want to go in and enhance the app and make it something click the X when they're in edit mode they do a cancel right and so you just have to store the values you want to write back and then change the buttons behavior say if in edit mode we just reset the stuff back if it's not an edit mode we delete the line right you can kind of start to build that logic or maybe just have three buttons and edit an edit button a Save button a cancel button and weep on four buttons I can't count there's a lot of different options available to you it's just about working it out but once again I tried to help you the mechanics so as always if you need help with any of this you know where to reach me and leave me comments below you can tweet me you hit me up through power apps 9-1-1 this is the same type of stuff I do for a lots of my customers so I'd love to work with you directly you don't get on screen sharing session and build your expense app or your other app together there's your type of things I do so thanks and have a great day hey it's me again if you got a second click the subscribe button that always keeps me making more videos or if you want to work together need some help getting your power apps going hit me up with power apps nine-one-one always happy to work together or finally if you're always looking for more videos that's probably what it is check out the power apps playlist over here and you know enjoy that alright thanks and have a great day

Channel: Shane Young

Views: 33,634

Rating: 4.9483871 out of 5

Keywords: PowerApps911, shane young powerapps, powerapps tutorial, learn powerapps, powerapps vs infopath, microsoft powerapps, power apps, powerapps repeating tables, powerapps expense report, powerapps infopath replacement, powerapps inline editing, powerapps edit collection, powerapps edit form collection, powerapps edit table, powerapps save button, powerapps save form, powerapps in office 365, powerapps tutorial for beginners, powerapps demo

Id: HUX_0AA4-Hs

Length: 27min 52sec (1672 seconds)

Published: Mon Jun 25 2018