SharePoint Form Customization with Modern Power Apps Controls | Step-by-Step Tutorial

hello everyone razza here this video is a stepbystep tutorial on customizing SharePoint custom forms with power apps we will leverage the new modern power apps form control to design our SharePoint form experience add validations conditional logic see how we can use it in SharePoint Pages Microsoft teams and a lot more so let's get started with this [Music] video you can easily customize the form experience for a modern SharePoint list or Library experience by leveraging power apps we can simply design our form in canvas Studio experience and once published the form is embedded Within the list for use by all of its users customize a form if you want your users to manage data without leaving the SharePoint experience if I go and create an app that's a stand alone power app wherein I can access that app on a web browser plus I can access it using the power apps mobile app I have a simple issue tracking SharePoint list so let's go ahead and customize the SharePoint form experience by using power apps now the moment I click on custom forms this will launch the power apps canvas Studio experience and allow me to customize the form the first thing to observe is that this specific type of Power app known as custom for firm gets a magic object called SharePoint integration and this object if you explore its Advanced properties has specific actions on new meaning the user is creating a new item in that SharePoint list at that moment it uses a formula called new form the name of the form control that is added in this power app on similar lines there is on edit and on view allowing the user to edit the item or view the item that the user has selected in the SharePoint list you are editing or viewing an existing item so the form control must have context of the SharePoint list item the data source for the form control is issue tracking this is the same SharePoint list for which I started customizing the form and the form control also has an item property and here it uses this object called SharePoint integration dot selected continuing with the properties of the SharePoint integration object we have on save it uses the formula submit form to submit the data in this form control if the user cancels then it will simply reset the form and once the save button is clicked the submit function is called for the form the form control has a property called on success whenever the data is successfully submitted it will reset the form and then call a function called request hide what this does is it simply hides the power app panel now the standard form that loads here is the classic power app edit form control however now we have a modernized version of the power apps form control that uses the new modern controls that are fast performant designed keeping modern theming in mind that uses fluent design to enable modern controls I will go to settings upcoming features search for modern and turn on Modern controls and themes now if I head to insert I have the modern controls and one of them is that modern form control experience now first thing is I am replacing the classic form with the modern form so Step One is I will go ahead and delete this of course when I delete the form there are going to be errors in the app because the SharePoint integration object was performing actions where the mode of the form was changing that form no longer exists so I'll select my screen now and insert my modern form control for this form control the data source property I will set to my issue tracking SharePoint list this will create the form based on the columns in my SharePoint list Fields is where I can control which Fields I would like to showcase on the form if I would like to reorder columns in this form I can simply select drag and drop and it will automatically reposition that column in the form control for each of these fields we can explore the different control types that are available so issue description is a multi-line text column in my SharePoint list let me change this to edit multi lines of text and you can see how it made the issue description text input control size larger I even have the option to select any of these cards in in my form control each card relates to a column and if I would like to remove it from the form experience in the power app I can simply rightclick that card and say delete now the form control is called form one the SharePoint integration object has errors since it's looking for a control called SharePoint form one so I will simply go and rename name my modern form control to SharePoint form one so with that my errors have gone away the form control I also need to give it the context of the item so for that I can simply use SharePoint integration do selected and when the form is successfully saved I will go ahead and use the formula reset form to reset my form control and then I will use the formula request hide to hide the power app panel in the SharePoint list and this is a power app so I'm free to add any other customization of my choice for example if I would like to insert let's say a header experience we have the modern header control so I can position this right here the header control has an option for a logo I can add an image file here I've just uploaded an image it has a property called title I'll call this issue tracker form modern controls respects modern theming we will have the ability to even create our own custom themes very soon now at this point let's go ahead and publish the form so I'll click on publish which goes ahead and saves my form and then I can click on publish to SharePoint once that is done I can click back to SharePoint but before doing that how do I share this power app custom form with my users if you if you notice this app has an option here called share if I select it it will lead me to the sharing dialogue experience but it states no permission to this app to share and the reason is because there is no sharing experience for SharePoint custom form based power apps you don't need to share the form the form inherits permissions from the SharePoint list itself so all I had to do was publish and go back to SharePoint and I will leave this app I am back to my SharePoint list experience so if the user clicks new this basically calls the on new function on that SharePoint object in the power app which will set the mode of my form to a new form experience and this is that power app form that opens up in this panel like experience the user has the option to cancel which basically closes the panel if I go back to New if I try and click save it will call the onsubmit function on my form and at this point if any of my columns in my SharePoint list are marked as required it will force that validation right here and modern controls has this nice new property called validation state where it puts this nice red border effect to highlight that these are the controls that need attention I'll close the panel if I select an existing item at this point it calls the view form function so the user can view the details if the user would like to edit they'll select edit so the mode of the form now changes to edit which allows the user to make changes so let's say I changed the priority of this item to high it was critical if I click save this will go and make that change in my SharePoint list item and if I select a specific item and simply click edit this will directly take me to the edit form experience for that selected item now each time you click custom forms it will take us back to that studio experience but is power apps versioning that custom form so if I go to settings and head over to list settings we have form settings and at this point we can see that the current form option that is selected for my SharePoint list is a custom form that has been created in power apps but if I click C versions and usage this will take me to The Details page for that specific custom form type app and if I go to versions I can see the version history for my power app and if I select modify form in power apps once again it will light up the studio experience wherein I can continue customizing my SharePoint form experience I now one challenge that is frequently observed with SharePoint customized power apps forms is the challenge of caching so one important thing that I would recommend doing here is for the SharePoint integration object the actions on New on edit and on view whenever these are called let's go ahead and first set a variable so for on new I will first set a variable I'll call it ver form type and I will set its value to new for on edit I will set that same variable to edit and for on view I will set that variable to view and for my SharePoint forms item property I will update it to if that variable which is where form type if it is new meaning the user is creating a new form at that time the item context has no value so I will set this to blank else I will use SharePoint integration do selected this will ensure that every time the user clicks new or edit or view they do not experience that caching issue next let's explore the data cards for our modern form control so title is single line of text it shows a text input control where the user can enter the data issue description is again leveraging a text input control date reported is the modern date picker priority is a choice column so here it uses the modern drop down control status is again choice so modern drop down assign to now assign to is a person type column in my SharePoint list currently modern controls does not handle that well it tries to put out a modern drop- down control in the form experience so what we can do here is we can change the assigned two card experience where we will replace this drop- down control with a classic combo box control now instead of going and designing one what we can simply do is go to new screen just create a blank screen go and insert the classic form connect this to our connected SharePoint list this will put out all the columns here is assigned to which has the classic combo box control select the specific control control C to copy it go back to the main screen select the modern form select the assigned to data card control V it's trying to add that control here by default all of these cards are locked for changes I'll go ahead and unlock and add so it adds the classic combo box the modern drop- down control I will delete I will position the classic control right here I can rename this can copy its name the data card will result in a few errors one of the errors is related to the Y property of the error message text control it's erroring because we deleted that dropdown it's pointing to that control's name here I simply replace it with my combo box controls name and the other error is related to the update property of the data card here it would simply be the combo box controls name do selected so this now will allow me to search for users in my active directory next is the tags data card tags is a multi- select Choice column in my data source this is using the classic combo box I can replace this to use the modern combo box First Step I'll select this card go and insert the modern combo box control so unlock and add here is the new modern control I'll just position it here for now from the classic control the items property I will copy go to the modern control and set that value in the items property the classic control has a property called default selected items it's set to parent. default I will do exactly the same for the default selected items property of the modern control the classic control I will select and delete the modern control I will position it here I'll copy the name of my modern combo box control and those same errors as before where I need to update the reference of the previous control with the new control that I just added so this now is a modern combo box control now tags is multi select by default a modern combo box is single select all I have to do is change its property to allow multiple selections so just like that now the user can select multiple items we can also make any of these cards as required even though they are not required in our data source for example date reported it's not a required field but for this data card if I search for its required property I can't make any changes I can go to Advanced unlock the card and after unlocking the card I can change its required property to true so now this is also a required field in the form status is a choice column the default value for for this column is set to new in my SharePoint list and power apps will respect that so this card called status when the user is creating a new item I want to hide this I'll unlock it it has a property called visible this I will set to ver form type is not equal to new status has different values one of the value is completed now if the user says that they've completed it then completion date is required I'll unlock my completion card I will first go and grab the name of the status drop down control and then for the required property of the completion date data card I will say my drop- down control do selected dot value if that value is equal to completed you can see it's a required field now if I change it to any other value that goes away each of these modern controls has a property called validation State this checks to see that if there is any error in in that case it will highlight that control by putting a red border around it now this validation State formula I will copy it and the reason I'm doing that is because if you remember the tags data card which had the classic combo box control I changed it with the modern combo box control now let's make tags data card required as well so the user has to enter tags Plus since I added this control manually in this data card if we explore its validation State Property it says None So let's just paste that formula that I copied from the other modern card we've made plenty of changes so let's go ahead and publish once again so I'm back to my SharePoint list I'll click new let's just hit save you can see all my fields that are required now are being highlighted so I'll create a new issue these are all the modern controls here is our people picker experience that uses the classic control and this is our modern combo box multi select made my selections I'll click save that new record is added right here if I click new it's a completely new form experience if I select an item select edit I can make changes to that item remember when I click new the status column did not show up the item that I just created the default value for status is new now if I view the item status column does show up on the form if I click edit I can make a change to the status column and remember when status is completed a new required field validation will come alive so completion date at this point is required we have an option to change its size so once again I will head over to power apps and click customize forms so back to my power app Studio experience you can go to settings go to display here we have a couple of options by default the orientation is Portrait if I change this to landscape and I click apply I will get a larger space when the form experience opens in SharePoint and notice the moment I change the orientation my screen dimensions here and the studio experience itself has changed my mod and form control now gets more real state so I'll increase its width the form control has an option called column so I can decide how many columns I would like to place in a single row now that I have more real estate let's go ahead and paste two columns in a single Row one of the options that would be handy is a reset option where the user can reset the data in that form control so for that I'll insert the modern button control and I'll just place it right here I'll add a couple of buttons one to reset and one to save for the first button the text I'll call it reset on select of this button I will first check to see if the type of the form is new then go ahead and reset the form and set its mode to new form else simply go ahead and reset the f the other button I will call it save on select and submit the data in my form control by calling the submit form function both of these buttons the type I will set to subtle and both of these buttons should be visible when the type of the form is not View here I've added another button called version history now for SharePoint lists if I head over to list settings and go to versioning settings we have the ability to turn on versioning for the list and also decide how many versions We want SharePoint to keep so every time a list item is modified a new version is created for example the item that I had added called security issue if I go to version history it will show me the entire history of that item I also have the option here to restore a previous version if needed this button is visible when the type of the form is not new and on select of this all I do is launch the following URL the first part of the URL is simply the URL of my SharePoint site it needs the ID of the list that we can simply get by going to list settings right here in the URL between percentage 7B percentage 7D we have the list ID that's what I've plugged in right here and then I'm passing another property which is ID here I'm using the SharePoint integration object do selected do ID back to my SharePoint list I click new here is my new form experience observe how the panel is a lot wider if I click save this is my save button the same experience as hitting the save button the validations will trigger if I click reset the form goes back to its original state if I enter some data click reset will all go back to its original state now let's pick an existing item and click edit let's make a few changes I change the priority I change the category I change the status maybe I want to reset back to its original state and start editing again simply click reset all the values go back to their original state and when I select an item remember version history if I click this this will directly launch the version history for that specific item the SharePoint list can also be shared with guest users all we need to do is give them access to the SharePoint list assuming your SharePoint site is enabled for guest access so here I'll go ahead and click share and share this list with a user who is external to my organization can they only view can they edit or can they edit the entire list in this case I'll just give them edit access I'll click Send so at this point it's gone ahead and shared this list with that external user now that external user receives an email if if they click open this will open that SharePoint list for that external user if I click new they can also go and add data there is the item that gets created these SharePoint custom forms I can also use it on SharePoint Pages I'll add a web part I'll use the list web part connect to my issue tracking list publish the page here if I click new item take me to a new screen experience here's my form if I select an existing item it will take me to the view form experience for that item and I also have the option to edit the item let's say I changed the priority here to medium save it will close and take me back to that SharePoint page experience we can also take that same experience to Microsoft teams in teams I can go and add a tab select SharePoint I'll pick any SharePoint site and here I can point to a SharePoint page list or document Library the link to my SharePoint list put it right here here click save and that entire list experience will light up directly within Microsoft teams if I click new that same power app customized SharePoint form experience lights up here as well 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: 35,943

Keywords: sharepoint custom form powerapps, customize forms, sharepoint, power apps, powerapps, tutorial, sharepoint list powerapps, sharepoint list powerapps form, how to, learn, reza dorrani, powerapps tutorial, power apps tutorial, custom sharepoint forms, powerapps form sharepoint list, list, microsoft, power platform, modern, power apps beginner, build power apps, introduction, modern controls, custom forms, build, powerapps forms, sharepoint integration powerapps, reza dorrani powerapps

Id: uNSOqgxwZds

Length: 30min 52sec (1852 seconds)

Published: Mon Nov 06 2023