Custom SharePoint List Form with PowerApps

and today's show we're going to build a custom SharePoint list form using power apps so we're gonna go ahead we're going to learn the basics how do you get started with it where does that SharePoint integration experience thing over there on the Left mean talk about how the different buttons work give you a couple tips and tricks to get started and hopefully laying really nice foundation so in future videos we can make some crazy stuff with our SharePoint custom list forms it sound like fun I thought so but first here's our intro hi my name is Shane young with power apps nine-one-one those guys in today's show we're gonna dive into SharePoint custom list forms right turns out that that's a pretty popular request that people have had for about the last 15 years or so right be able to go in customize your SharePoint list form so you can make a better experience for your users editing it or interacting with that data so what we're going to do is we're going to use power apps today and we're going to talk about how that works and really the idea is we're going to make sure you understand all the pieces a couple tips and tricks to get you started but really just lay a foundational video so that in future videos we can do crazy things like you know tab interfaces or multiple dropdowns from different data sources or you know a bunch of that crazy stuff people want do maybe multiple screens even but this one is really just that core let's get started let's do it the right way the first time so we can build upon that and use all of our power app skills to build a better experience as we go sound like fun I thought so let's just switch over my desktop and get started so every time we desktop we're actually going to start with a SharePoint list right this is a SharePoint Online list and it's using the modern experience so if your list is not using the modern experience you're not gonna have these options and really the way you'll know his power apps is right here right it's telling us hey power apps is here and so if I click on one of my items you'll see the default SharePoint list experience opens right I can edit and so this is a default SharePoint experience but up here at the top I had this option for customize so if we click on customize what it's going to do is it's going to launch us over to power apps okay so after like 30 seconds maybe 25 I don't know I wasn't counting we're brought in here and you can see that power apps and SharePoint work together to make us a list I said create a screen they put a form on here they gave us all the fields you see some fields are editable some fields are not now this new ship what integration thing that we'll talk about in a minute but boom just like that a fully functional form we did almost no work now what you need to do real quick though go up here click on one of these cards going to you know whatever property shows up and just strike I'm gonna hit the spacebar and I'm just gonna delete it right so made a change undid it because once I do that waring do nails are over here I'm gonna say file and save and so if you second that saved my app and then so we're gonna say here publish to SharePoint yep I want you to publish it okay so after a few seconds that's done so here's the first trick of mine teach yet if you go back to SharePoint using the link they give you you have to wait on power apps to load and unload all the time right now take advantage of this link right here just right click on this guy and say open link in new tab so then that way we've got right where to sit back here we've got one environment here where we're working on the power apps and then one with SharePoint it just cuts down on the back and forth where it's real it gets annoying when you build these apps a lot the back and forth the loading the unloading all that stuff so it's just easier to have this in two tabs but so now that we've done that now if we click on CEO we're gonna see that look at this this is a different list I can tell right away because the higher date formats different that's how I know that my change took so if we say edit although you can see this is just our power apps app over here right so the fields that were editable and or editable and then we have this stuff down here at the bottom which is not editable we can say if we can cancel copy link that type of stuff so save this eros cancellous doesn't matter I didn't change anything so there you go so that's all you have to do now we have a custom form but being a power apps guru that you are now you want to go put your tools that you know how to use in the place over there right if you're brand new to power apps you're here and you're like I've never done power apps I don't know all these crazy you know power apps things you're about to do no problem look below there is a video on getting started with SharePoint in power apps that's probably the best place for you to start go watch that video then come back over here once you understand power apps so I'm assuming you guys have some power raps knowledge as we kind of dive into this a little bit alright so over here we switch back to our power apps tab and so what you're going to see is that from a power a point of view the automatic process created us a screen and then I'll have a screen they just put one sharepoint form so a little bit different than the default SharePoint apps that normally have three screens right one for viewing one for editing and new and one for finding the item in the list they've went with it all in one screen so that's gonna be a little bit difference we just have the kind of thing about that but what they've done is they've made this just a form and so then just based on how you got here is going to determine what form mode this form is in which is going to control a lot of what happens and so the way you can figure out that out is view up here and click on SharePoint integration it took me a long time you realize this actually spent Microsoft had to be like hey if you click on that SharePoint integration look that's the list I'm using that's one thing but this is where you control the buttons right with power outs we're used to seeing you know the new and the save and all those buttons up here and if we go over to SharePoint and we click on wise guys we get you know an edit button or you know if we hit new or whatever over here we get all these experiences but in reality of power apps we don't see those but we can control them via this drop-down so you'll see if someone clicks on a view what does it do it opens up the form and it does puts the form mode in view if you do save it's going to submit your form right you're pretty smart pipe for this out edit puts it in edit form so this is very important to understand for two reasons one is this is how its figuring out what mode to be in so it's showing you and give me the proper experience you want but two as you get in there those really crazy custom solutions and you want to have multiple things happen when someone hits the Save button for example then you know you figure out then go over here on save and then semicolon and then your crazy thing happening after this right so we're not gonna get into that today but I wanted to expose you to this because this was a biggest screwup that I had that took me a really long time to figure out until I finally got drugged over the line about what it needs to be okay so the first thing that I typically like to do with these forms is it really annoys me right when we were over here and we're in this edit experience that we have a bunch of fields down here at the bottom right and we have to even scroll down and see them all they're wasting screen real estate that I can't edit so I'm gonna get rid of those okay and so the way I'm gonna do that let me go over here right because we have one form so you have to always be kind of thinking and we end up using a lot of its but if you go to the modified card right so we want the card property so you see it highlighted over here we're gonna go to the visible property for it and right now it's set to true well that's great but we don't want to be true we're going to say instead if and what we want to do is share point form one right so that is the form see this highlighted green force dot mode so if the sharepoint form mode is equal to form mode dot view then i want this to show up right but if it's not so if it's in edit mode or it's a new mode i don't want to see these properties i can't change so we're just gonna say false okay so that simple little formula cleans up some real estate for us so next trick is there's a whole bunch of fields here I don't want to maintain what if this formula changes with my logic wants to I don't wanna have to deal with this formula all the time but I know that these guys always work as a group now you can't group data cards unfortunately but what you can do so that was the modified one right let's go to the editor we've go to this guy and we're gonna say all right you're visible property it's not true it's not if you're visible visible properties just going to be the modified data card one visible property so whatever that guy is that's what we want to use for you because these guys are gonna always be hidden together no problem so I'll go down here we don't want Department now in a favorite color nope nope see when I set this up really these are all tied together so much nicer so ID is one that I want to hide right so we'll say visible there paste that in boom ID's hidden author yep it so who's created by oh don't change the height though click on visible here and so then that one goes away and the last one is created there he is right house you cheated and clicked on him made it easier to find him boom so then now in my forms in new or edit mode we're not gonna have to worry about this so what I can do right we'll say file we'll say save and then we'll say publish to SharePoint yep publish that puppy now we'll switch over here here's another little trick to add your book if you hit refresh all right it reloaded we click on CEO there you going to see my little power uploading it takes it a second and so if we say edits all of these properties are still down here at the bottom what did I do wrong how did I get my logic wrong we didn't we didn't make any mistake other than you need to load this one time come over here hit refresh again and it's like the cache of the cache type of scenario so we have to go and we reload the SharePoint page you read that cache and we open the power app and then we have to reload that page again to get rid of power apps cache all right so now how do we go back in here CEO alright so here's all these properties if we say edit all now they're all gone same thing if we say new they're not here whew so I just don't like that frustrate you when you're working with these guys cash and cache of cash is that even a thing and I feel like I should be taking dollar bills and doing this right now I've got one node if I one dollar whew cache of cash is going to cause you some grief here so just make sure that you aren't afraid to refresh the other thing that I will do in some apps where I'm making only minor tweaks oh it's really hard to tell if it's happen or not is I'll just throw a label on the screen and put this as you know v1 v2 v3 and just manually increment it so that way when I do the refresh is I need to see a driver v4 I do boom and then once I get through my building and testing then I'll delete that off the screen because my users don't need to see it but it just helps with the sanity for me so another friendly trick okay so now that we understand how that works let's go back over to our power apps alright well just get out over here and so let's do a couple other cool things so the next cool thing I want to talk to you about is before we go any further right so one of the downsides of what we just did here hiding these fields is that it can get you into trouble right you'll probably forget if you don't do this again for two years the next guy right if you win the lottery you know and you're on the beach drinking mai tais they're not gonna know so help future you out or help future her out who's going to be supporting you help someone else out and do a little documentation so go over here to a new screen real quick blank I'm gonna call this documentation probably misspelled documentation I'm nine man look I don't know and we'll say insert a label make it bigger and we're just gonna put some text in here and we're just gonna say the non editable properties properties are hidden geez well Pete's I type really good bye boom all right and so you put better notes an app but you get the idea we now have created documentation right here within our app and the great thing is is there's no way for users to get to it right only someone here in the editor experience has any access to it because I didn't put a link to it and they can't forcibly navigate to it so documentation screen that's gonna save your but later if you have any problems this okay so that was the thing I wanted to show you there so next up is just taking customize this app just a little bit so one of the things that I will warn you about is that this sharepoint form it's a little funky sometimes it does some things differently might not always work so if you want to add some functionalities like a button to your app what you want to do is just grab the form right so won't grab it way down here at the bottom I'm gonna pull it up right so now my screen has the form up here yay but now I have all this blank real estate to do something else so for example let's make a button that emails a rink - you know - this item for people right maybe that was the functionality they wanted probably could do that out of the box of SharePoint but we're just you know baby steps right mechanics how this stuff works so what I'm gonna do is I'm gonna throw a text input on here I'm gonna drag it down here alright so make sure see text input is outside my SharePoint form over here on the Left it's outside the form that's very important for you get inside the form you have weird behaviors we don't want weird behaviors right we have enough problems our lives I'm gonna really default texts I'm gonna put a little hint text in here and say enter an email address like so we'll rename this guy to email - very complicated name there were throw a button on here same deal right so there's my button I'm going to make sure that my button is outside of my form and what happens if you put things in the form if the forms and view mode then everything's locked down to view mode even if you tell it not to be locked down it just it just becomes weird so don't put things inside the form that you don't want actually in the form okay so we enter an email address and so then for this button we're going to send an email and so the first thing we need to do to do that is add a data source so I'm say data source add one I'm gonna choose the outlook one there's a link on sending email so if like this is goes too fast it's all down below documented in a separate video so now we've added that what we're going to do is we go this but I'm gonna say unselect we're going to do office 365 dot send email right if you're not seeing this what's happened you didn't do your data connection and we're gonna make the to be email to dot txt right so whatever they type in this box we're going to send that to subject is gonna be check out this item like so and then for the link another trick here one of the things you can do is right up here we have SharePoint integration right we can take advantage of our SharePoint integration so we're gonna say SharePoint integration dot selected dot look there's all the properties for the current item were messing with so I want the link property but this comes up for a lot of people right put the print sealian because they're like how do i figure out the ID or how do I get this cell that I try and do complicated weird stuff SharePoint integration dot selected and it's different properties are all there so you don't have to overthink it you know what item they're looking at right now you have this available to you so don't overdo it don't try and reference weird things use this SharePoint integration capability all right so it's like that we'll make this button say email a link because that would be the polite thing to do probably make it bigger - but we won't mess with that you know visually make it better so we're gonna do now we're gonna say file save we're going to publish it SharePoint publish to SharePoint alright then we'll switch back over here and we won't fall for the gag this time right we're gonna do the Refresh we'll click on this guy right because we need to load the power app all right so it all loaded we're gonna hit refresh again just to give ourselves some pain and suffering because we know what happens if we don't so we will click on the CEO which is my wife and so then now we have our cute little stuff and so then now we can send me an email Shane at power apps 9-1-1 calm email me a link crossing our fingers i will switch over to my outlook over here and just like that I've got an email right so check out this item it was to me and there is a link that will open the item in my browser so obviously you would do much nicer fancier things but hopefully that shows you get set those wheel-spinning a kind of things you can do all right so we go back over here like so I think that kind of ties up what we wanted to do from SharePoint point of view a couple things to consider the user that your users that are using this SharePoint list they need to have a power Apps license to use your power apps form so make sure you cross that off the list which you know if you're using pretty much all the office 365 licenses come with it you might just have to go into your users licensing and check it to make that work the other thing to keep in mind is let me open up another browser here real quick all right so this is browser I have an incognito mode and so I logged in as chewy the dog and so when chewy opened this app for the first time notice a couple things chewy has to allow right you need the permissions to open power apps and then the first time he uses this he has to allow those data connections so just something to keep in mind also kind of with your users the first time they use it they're gonna have to do it and because we added that email link and this one has to agree two different things so it is what it is it's not a huge deal but it's something to make sure you're thinking about that will happen the first time cheer users oh yeah I just remembered one more thing we needed to cover what happens if you don't like the forum what if you want to get rid of it altogether I didn't tell you how to undo this right because maybe you want to play with it a little bit you're gonna try some stuff you're gonna really mess it up man I just want to start over or maybe you deploy your bosses like that's terrible I won't sure point out of the box forms well bad boss on him but let's talk about what this would look like so go back over here to your list and we'll get off of that if you go to list settings right there so down here at the bottom under list settings you have forum settings and so here you can see that is currently using the modified app that we just created and so there's a link to modify it you can see some usage info you could still customize with InfoPath boo and footpath but if you want to get rid of it altogether what you can do is you can say use it a fault form so that would switch it back to using share points out of the box form and then here is the link for deleted custom form pops up so when I do these type of things I end up having to do this over and over and over again I end up deleting the custom form and as soon as you click on that it'll take you back and be gone so I'm not gonna do that because as soon as I do that I will need this for something you'd have to recreate it so I'm not gonna do it but that's what you do is click on delete custom form and then it's like you never had any of this happened so just wanted to throw that in there I think that kind of puts us in a good spot alright so hopefully this at least get you guys started is good foundational of how these pieces work what you can do and starts opening up you know your minds to some of the creative solutions in the next video on this topic right I'm going to do things like we're going to add multiple screens we're going to probably do some tabs at the top so you can kind of jump from screen to screen using some tabs I think that's kind of fun the other thing we'll do is we'll wire up departments to pull from a different list because I get that requests all the time and people don't always understand how that works so we'll do that again and we'll make this form a little fancier but we'll save all that for next time 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 9-1-1 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 ops playlist over here and you know enjoy that alright thanks and have a great day

Channel: Shane Young

Views: 214,667

Keywords: Custom SharePoint List Form, customize sharepoint form with powerapps, custom shareoint list forms, powerapps sharepoint list, custom sharepoint form, shane young powerapps, powerapps911, office 365, microsoft powerapps, microsoft powerapps forms, powerapps forms sharepoint, sharepoint integrations, office 365 powerapps, power apps, powerapps tutorial sharepoint, custom sharepoint forms with powerapps, powerapps sharepoint list form, sharepoint custom forms designer

Id: Badj3_T8zAw

Length: 20min 9sec (1209 seconds)

Published: Tue May 15 2018