Customizing SharePoint Forms with Power Apps

so if you've been using modern ui in your sharepoint listed libraries and you find that the forms and the data capture and the data entry isn't quite what you need for your end users maybe you've thought about in the past we used to use infopath but what do i do now today i want to talk about how powerapps can be used to enhance that data capture for your end users [Music] so sharepoint has come a long way in the recent years when it comes to lists and libraries and metadata and managing that metadata allowing users to enter that information it used to be that we were stuck with infopath or customized aspx forms using sharepoint designer now with modern ui in sharepoint online we have a much better ability to make that user experience better for end users using lists and libraries but today we're going to dive into how we can actually use powerapps to make it even better than that so what we're going to get into next is we're going to take a look at an out of the box or slightly customized sharepoint list and what it looks like to actually create a custom form for that list so as we're diving in here i imagine some of you may have noticed i changed my shirt make no bones about it i'm diving into this demo it's real work so i had to put my work clothes on so we're going to dive right in here and in this case we have some demo data we've got a content scheduler list i've done a little bit of customization to it but if we look at this list if we take a look at this list and like the new form for example this is the out of the box or default info panel that you get with sharepoint lister library um and this is nice it lets you enter data and it's certainly much more responsive and mobile friendly and things like that than sharepoint used to be but there as we talked about always scenarios where you could make this better or you need to make it better where you might need to add features like specific validation in the in a scenario where a field is set to a certain value or maybe you want to make it a little bit nicer for data entry for your end users so what i want to do is i want to show you how we're going to do that with powerapps so to do that customization we're going to use our powerapps menu on our list this menu will also be available for document libraries but you can come in here and you can click on customize forms and this is going to load up basically a view or that form if you will in powerapps is kind of a default version of it it'll have very minimal data on it to start with but you can pretty easily modify that to suit your needs but basically this loaded up basically a default version of my form it's got my title on it it's set for a mobile profile so it's kind of got that layout we're using this primarily on a desktop or a tablet so i'm going to change that a little bit and so to do that first things first we're going to jump over to the settings of this particular power app and if we uh go to the screen size and orientation settings we have an option here to set our orientation and our size in this case i'm going to set it to a custom size and i simply want to be a bit wider than it is and we'll keep our same height and we're going to apply these settings one thing to note is that when you apply those settings if you have already laid out content on your form and it's just how you like it every time you come back and you feel like you need to change that screen size or that orientation it's going to rearrange all of that content back to square one so you want to kind of minimize the amount of times that you need to do that if at all possible so we're going to go back to our form now and we'll see that we've got a larger form than we had before we'll expand our form within the screen to fill that full screen and we still just have our title so the next thing that we want to do here is we'll quickly just add a little splash of color to the screen to make it a little bit nicer for the end user i'm going to grab my fill color that i want and we're going to plug that in using advanced because i want to set a bit of opacity on it so we'll look for our fill i'll set that and so now we've got a slightly prettier screen it'll help the field stand out on the form a little bit better for the end user in any event so the next thing we want to do is we want to actually add the other columns or fields that we care about to this form so in this case we're going to select our form so i've got sharepoint form 1 selected if we come over here and edit fields we have the option to add fields to this form so the field some of the fields that i want to add are going to be things like attachments we're going to go ahead and add the description a due date i think there's a status down here somewhere so there's our status and then i think there's also a content type that we care about so we're going to go ahead and add those and it's going to automatically just arrange them in whatever order they're in and so if we want to change that order we can do that relatively easily by simply dragging those things on the form so i want my attachments to be at the end for example i'll put my due date next to my title and we'll move our status and content type up above description and now the next thing that i want to do is focus on kind of the layout of this form and make it maybe a bit nicer for the user so that it flows a little bit better and so to do that we're going to go to the form properties itself so i've still got my form selected and we can choose the number of columns we want to have here and what this basically does is it gives you some kind of flex ability in your form layout so that you can have various fields take up one or more columns so i'm going to flip it all the way to a 12 column layout you'll see right away it shrunk everything to use basically uh three columns um and so now if i want my title to take up this portion of the top and my due date to take up this portion i can simply do that by dragging those those field widths so i can have my status and my content type kind of share space on my second row shrink these up if i want my description to take the full width i can do that and in this case i'm going to make an additional adjustment to our description so this is a scenario where the user is going to enter a lot of content or a lot of text we want to give them more than a single line to enter that text on or to view so i'm going to flip this to a multi-line field for that particular control and we'll drag this and make it a little bit bigger for the end user and then last but not least we'll have our attachments take up our full width of our form and so there we've got our first form laid out um and in a way that hopefully flows better for the user and lets them enter that content now in this particular case i've got an additional piece of content that is the actual article content or the blog post content that i want the user to be able to enter and i want to be able to enter that in a rich text field and i recognize that that might be a lot of content and so i wanted to take up the full full screen if you will um and so to support that i'm going to add an additional screen to this particular uh powerapp form so to do that we're going to go to our formscreen1 over here and we're simply going to say duplicate the screen and so what that's going to do is it's going to create basically a copy of what i just created looks exact exactly the same and we're going to make some adjustments to this the first thing i want to do is i want to rename this form so that it makes a little bit more sense so i'm going to call it our content screen then the next thing that we're going to do here is we're going to change our the name of this form so that it's sharepoint form2 just a little bit better naming than sharepoint form one underscore one all right okay so now that we've got that um you'll notice it automatically just rearranged all the stuff on my form so similar to uh changing that screen size that basically did the same thing for me but no matter in this case we're going to remove all of these elements from the form anyway and so to do that i'm going to select sharepoint form 2 we're going to choose to edit the fields and we're simply going to come over here and remove all of these fields okay so now that we have a blank slate we're ready to add that article content field to this form and so to do that we're going to go find it here there's our article content and we're going to add it and in this case we know that this is going to be a rich text field so we want to pay attention to the control type that's being selected here so you have a variety of options in this particular case i'm looking for my edit rich text and so i'll flip it to that content type and then that should automatically give me a much nicer control for blog post or article content it'll make that a little bit bigger and so now the user has you know almost like looking at a word document right they can enter content make it bold add hyperlinks all of those types of things within the screen so now you might ask well how does the user get to that screen how do we navigate back and forth between those two things so to do that we're going to use something that's pretty simple we're going to add an icon or a button to this particular screen and so we're going to come over here to our insert panel and we're going to look for our icon so in this particular case it wants me to unlock the data card that we're on so we'll go ahead and do that and we're going to add that icon here and so by default it's using the add icon we're going to flip that to use a back button so we want to go back to the main form from this form and then the next thing we need to do is we need to actually wire that button up so to do that it's pretty simple we're simply going to go to uh select that icon and then by default the on select method is selected up here on the left hand side and we can simply come here and tell it to navigate to form screen one like so and so now if we put this into run mode and we actually click on that voila it took us back to our original form so the next thing we want to do is we want to do the same thing for this screen we want to be able to navigate to the content screen from this one so we're going to add another icon in this case so i'll select my form and add an icon and we'll place it at the upper right hand corner so we have some consistency there and then in this case instead of add we're going to look for document with content so that'll be kind of an indicator to the user that if they want to enter the content they can click that icon and now we're simply going to in the on select of this navigate to our content screen just like that okay so now let's try this out go ahead and click on that it takes us to our content screen and back so that works as expected so let's say that's an interesting scenario makes it nicer for the user to enter content in a kind of a long format with some formatting but what if we have a special scenario where in the case that this particular content piece is scheduled and it's been assigned and so if it's been assigned we want to make sure that it has a description and so that's a special validation case where we would say well i want to require this description field to be populated in the scenario that our status is set to assigned or for that matter maybe if it's you know draft needs approval ready to publish or published right we should make sure that we have that description present so to do that we're simply going to focus on our description field and we're going to make this particular field required so right now out of the box this field if we select our required property is set to false we simply want to toggle this based on a value in our status field so first things first we need to unlock this data card so in order to make changes to this for example it's going to it wants us to unlock it and so we'll go ahead and do that here and now we can make that change the next thing i want to do is i want to understand what the name of this particular control is where my status is and so i've selected it and if you look over here this is an easy way to find it it's data card value four so now if we go back to our our description data card and our required property we can do something like this we can say if data card value for selected value equals assigned then it's required else it's not so we can do something simple like that to make it required in that particular scenario and so then right away in this in this mode you can see i've got the little star next to my description because we're set to assigned if we put this into run mode and i flip it back to planned it's no longer required okay so now that we've got our form laid out the way that we want it we've got one last thing to do and that is we need to pay attention to how these forms behave when the user enters certain states so whether they're in the new mode or edit mode or they're saving the form we need to do something in those particular scenarios so to do that we're going to come over here on our left hand side in our tree view and you'll note that you have something here called sharepoint integration this sharepoint integration element or component is the thing that connects the form to our data and so it does things like manage validation for you manages saving the content and things like that and on this particular component you're going to have a number of events that we can manage and these are on cancel on edit on new on save and on view and so in these particular scenarios what we want to do is look at what they're already doing so in this case out of the box by default it's resetting sharepoint form one and so in our scenario i know if the user chooses to cancel i want to reset sharepoint form two as well so we're simply going to come in here and do that right alongside this one all right and then we're going to move our way through the other ones as well so in the scenario that we're on edit we're going to do the same thing we're going to put our sharepoint form 2 into edit mode and also in this particular case we want to pay attention to i guess where the user starts on the particular form so in the case that they're you know clicking on new for example we want to make sure that not only are we setting the form to new but we also want to make sure that they start on the first form rather than the content form so as we move to our new our on new method not only are we going to new up our sharepoint form 2. but we're also going to navigate to our main screen all right so let's work our way to the next one so in the scenario that we're saving we're gonna submit not only sharepoint form one but also sharepoint form two and then in the scenario that we're viewing we're going to set our state to view for sharepoint form 2. and finally in this scenario i also also i also want to start the user on the main form as opposed to the content form so we're going to make sure that the user is navigated there like so okay so now that we've done all of those things we're ready to actually deploy this and see how it works for the end user to do that we're simply going to come over here to our file menu and you'll have an option to save and then once you've saved it you have an option to actually publish it to sharepoint and once you do this it will become available for all of your users who use that list so this is the point at which you want to make sure that it's ready and mostly functional so now that we've done that let's actually jump over to our sharepoint list so i'm going to actually just simply click on that list here and this will open a new tab for me and here's my list just the way it was when we left it but now in this particular scenario if i go ahead and click the existing one that i have here and choose to edit it i can see my new form complete with that new layout i have my button or my icon over here on the right that flips me into that content screen showing me my content if i want to edit this content it's going to put this into edit mode so i can enter more content and now i can choose to save this and so it has saved that content for me the next thing that we'll take a look at is let's say i'm creating a new piece of content that needs to be scheduled we'll come in here and we'll pick a due date let's say i need it on the 24th and in this particular case i don't have a description yet i don't really know what it is other than i know it's going to be a blog post and i want to assign it and so right there my description is now required in this case if i go try to save this it's actually not going to let me save it it's going to say hey the description is required so that's a scenario that can be valuable where you you know want to make sure that fields are filled in maybe once a particular piece of content goes after a draft state so in draft state save it add stuff as you need to but by the time it gets to that middle or final state you need to have certain fields so that can be a pretty valuable modification so that's it for today's video if you've been wrestling with those forums for lists and libraries and sharepoint online and trying to figure out how to enable a custom scenario um hopefully this helps you get past that if you've been stuck with infopath wondering if there's a better way this should help you get past that as well you should be able to kill infopath at this point and move on to a better world if you like this video be sure to like or subscribe because there will be more coming and we'll see you next time [Music] you

Channel: Bulb Digital

Views: 64,908

Keywords: Data entry, Forms, Microsoft 365, Canvas app

Id: Om1pjPeCRTA

Length: 19min 28sec (1168 seconds)

Published: Fri Mar 12 2021