How to Customize SharePoint list forms with Power Apps - Beginners Tutorial

hello everyone this is razer durrani in today's video i will show you how to customize sharepoint list forms using powerapps for the demo we will leverage a microsoft list template to create a sharepoint list customize the list using powerapps add conditional formatting conditional validations conditional show hide change the layout of the form and much more so let's get started with the video but first my introduction [Music] in my modern sharepoint site i will head over to new and create a new list this opens up the option for me to select some of the new microsoft list templates right here for the purpose of this demo i will pick the content scheduler list template and as part of this template i can plan schedule and manage my content i will go ahead and use this template click create and this will now create a list based on the microsoft list template for content scheduling now if i click on new this will open the new item default sharepoint form and this form will showcase all the columns that were a part of the list template and we have a wide variety of column types here from text fields to multi-line text fields to choice columns date fields and more now in order for me to customize this sharepoint list form by leveraging powerapps we have to go to the powerapps menu option for the list form and head over to customize forms now here there are additional options as well if i pick create an app this will create a power app a standalone powerapp that would be connected to this sharepoint list you can access that app from the powerapps mobile app or through the maker experience however by customizing the form using powerapps i will go ahead and create a sharepoint customized list form the only way for me to access this power app will be through the sharepoint experience in the browser only so the advantage here is users can manage the data without leaving sharepoint and the moment i create that customized app powerapps goes ahead and creates a very simple app with one single screen called the form screen now let's understand the different aspects of this app the first important thing to note is that this app has a connection or an integration with sharepoint and this right here is that sharepoint integration object if you see this object that means the app that i'm customizing right now is a sharepoint customized list based app and as part of this object if you head over to the advanced tab on the right hand side properties pane there are multiple functions that are exposed as part of this integration object so when the user clicks on a new item button in sharepoint then on new function gets triggered and as part of this function powerapps is creating a new form experience for the form control that is added to the screen if the user edits a record it will set the mode of the form to edit if the user is viewing the record it will set the mode of the form to view and when the user clicks on the save button to save the data in that case poweramps will go ahead and submit this form data if the user cancels the form in that case powerapps will just reset the form and the data source here is nothing but my sharepoint list which in this case is content scheduler if you observe the main canvas area right here on the top there is a delegation warning now this is because the template that is used to create this sharepoint customized list form uses a function that runs into a delegation error and delegation and powerapps basically is the ability of powerapps to handle large data sets as part of this template if you look at the item property of the form control here is where we are getting that delegation warning to fix this all you have to do is replace the first function with a function called defaults and what is the behavior of this item function this item function is basically the item that is associated with this form control the record and sharepoint if the sharepoint integration object that is selected is blank or it is empty that means the user is trying to create a new record there is no context to an existing record while coming to this form in that case go ahead and use the default behavior of my sharepoint list that means the form will act like a new item form if there is an association to a sharepoint record in the sharepoint integration object in that case go ahead and associate the selected record from that sharepoint integration object now if we look at the form control here and head over to the properties of the form control the data source is my sharepoint list if we look at the fields and head over to edit fields this is listing out all the columns that are associated with that sharepoint list and right here we can start customizing our sharepoint form so for example author is the created by column in sharepoint and that's an inbuilt column maybe i do not want that as part of the form i can just simply go ahead and remove it from this form experience if i would like to add any columns that are a part of my sharepoint list i can just head over to add field and select any column that i would like to add as part of this form i can even reorder my columns right here by just selecting the three ellipses and moving my cards or my columns up or down i can even select and drag and place them if you would like to test this app right here in the maker experience itself on the top right hand corner i can go ahead and click on this play icon so i can preview the app and this now is the experience that the user will get when the user will start interacting with the sharepoint list now you can also create scenarios like conditional formatting conditional validations you can customize this form based on your needs let me show you one simple use case if the user selects the status as published in that case i would like to display the column for published link and that column has to be a mandatory column in that scenario so here's conditional formatting and conditional validation both in one go i will close the preview select the published link column every column that you add as part of your form control gets added as a data card if i would like to change any behavior of this column the first step is head over to advanced properties and unlock the card so that you can start making changes to the card now to show and hide this card depending upon the value that is selected right here in this combo box control of my status column i will first select this column copy the name of my control head over to the data card for published link search for a property called visible and if i just click on this property name it will place the property here and open the formula bar this is where i can plug in my functions known as powerfx so my function here would be as follows i would like to make this column or this data card visible if the status value is published so for that i will give the name of the control that i copied earlier which is the control name for this combo box dot selected so that'll give me the selected record dot value so it will give me the value is equal to published so if this value is equal to published this card will be visible else the card will be hidden if i preview the app again you will note that the published link card is not visible if i change my status to published i will see the published link card now i would also like to make this column a mandatory column if the status is published so once again back to the edit mode of the app there is another property associated with the card and that property is called required so by default the required property is set to false i will go ahead and change this to that same formula as before that is if the combo box control value is published you make this column or card a mandatory field if i preview the app now you will observe that this is a mandatory field and is visible only when the status is published if i select any other status value the visibility of that card would be hidden you can also change the theme of your app so if i head over to the home tab there's an option here for theme and by default it's leveraging the blue office theme you can pick any of the available themes right here so let's say in my case i'll go and pick the purple theme so the controls now in the app have their theme changed to purple so let's say i would like to add a header to my screen i will select my screen head over to the plus icon to insert controls and one of the controls here is called the label control i will select the label control place the label control on the top span it across the width select the form control position the form control right here and this is my label that's sitting right at the top i can go ahead and apply the different formatting options i can give it a background fill color of let's say purple i can center align the text i can change the text color change the font size and i have all the other options here to play with and for the text property of this label control i will set it to content scheduler once i have completed my customizations of my sharepoint form in powerapps i will head over to the file option click on save this will now go ahead and save my changes and next step i need to go ahead and publish this to sharepoint and this now creates the first published version of my app if i click on the see all versions button this will show me all the versions associated with my app so when i first saved my app it created a version i then published it so it created a second version and this is now the live version of the power app so you can see all the versions you can go ahead and restore previous versions as well now once i have published my app if i click on the link it will take me back to my sharepoint site now if i go ahead and click on new you may or may not see that powerapps customized form light up immediately because of browser cache so if you clear your browser cache or if you just open a new tab or a new browser and get back to that same sharepoint list and head back to new you should see the powerapps form light up right here in the context of sharepoint now i clicked on new so it's gone ahead and created a new form experience for me and i can go ahead and start entering my data so i've added a title description i can select a date i can also define the status of the content that i'm adding let's say in this case i'm just going to set my status as planned notice i do not see that option for published link because that will only show up if the user picks published and that would be a mandatory field if i try and save this form it won't allow me to do so because publish link is a mandatory field in my powerapp customized form so i will switch back my status pick a publish date select a content type i can even go ahead and attach files to my list item right here so i've just uploaded a file and i will click on save and just like that the data will be stored in my sharepoint list now if i go ahead and select this item it will open that same form in view mode if i click on edit this will open the form in edit mode now if you would like to go ahead and customize the form again go back to powerapps and click on customize forms and this will now once again launch the powerapps experience for us for customizing the sharepoint form now let's say we want this form to occupy more real estate on my screen right now the form is more like a mobile experience in this right hand panel now in order for me to change the size of this form back to my power app if i head over to file go to settings screen size and orientation right now the orientation is portrait i will change this to landscape and you can even see the image right here that shows you how much real estate it will take on the browser experience now if i go ahead and click on apply this will update all my screens in my app to the new dimensions that have been selected if i head back to my app you will notice here that the center canvas area has more real estate to play with now i will go ahead and select my form reposition my form control because i have more real estate to play with i can go ahead and span the header across the width for the form control there are additional properties that you can configure one option is how many columns should be placed in each row currently we have one column per row i can change this to two because i have more real estate to play with you can even go ahead and change the layout from vertical to horizontal i will change it back to vertical i can create additional customizations i will try and add an image for the header so i'll head over to images go to upload pick an image from my browser drag it and drop it on my screen and i will just go ahead and position my image right here you can even do things like copy and paste so ctrl c ctrl v and it creates a second image for me that i will place right here on the right hand side you can even create conditional formatting wherein you're changing colors based on statuses so for my form control once again i will start the form from a little distance from the left hand side of the screen i will do the same thing for the header control for my phone screen i will search for something known as the rectangle shape i will select this it adds a shape on my screen i will head over to the tree view position the shape on the left hand side and drag it all the way down now i would like to change the color of the shape depending upon the status value i will copy the name of this control head over to the rectangle shape and search for the fill property now by default the fill color right here is purple that's coming from the theme i will change this based upon the status value that is selected so for this i will use a function called switch so i will switch based on the value of that status column which i can get by the name of the control dot selected dot value now if the value is for example planned in that case i will go ahead and apply the color blue i can even type the color name or put in color codes by using the rgba function so for the text plan put the color blue for the status assigned put the color orange and so and so forth so i have just gone ahead and plugged in my function associated different colors for different statuses and if the status value is empty i have selected the color gray now if i go ahead and preview this app observe as i change the value of the status so right now it's planned so it's blue if i change this to assigned the color changes if i change it to published changes to green with powerapps you have complete control over the entire canvas experience you can create any customizations based on your requirements now the changes that i've made are saved because if i go to file and go to account there is a feature here called autosave that is turned on by default so every two minutes powerapps is performing a save operation at the back end without me even realizing however the form is not published if i head back to my app and if i open the form you will note that it is still adhering to the previous version of the form that is because i am yet to publish this form so for that i will head over to file i can save it again i can even enter a version note so i know what changes i made i change the width of my form to more like a tablet experience so i i'm just putting that version note i'll click save so this will go ahead and save and now when i click publish this will create a new version for my app if i go to see all versions this will list out the entire version history with my version note right here if i head back to my browser and click on new you will see the changes that i made in the power app light up for me right here in the sharepoint experience and this is true for every record whether i create a new record whether i view an existing record or i go ahead and modify an existing record so here's the changing of the status to published i see the color green i need to provide the published link right here so i'll just provide a link click save and this data now will be logged in my sharepoint list let's explore some additional features that are important to be aware of how do i get to the versions of my app well for that you will head over to the settings of the list so go to list settings and go to form settings and right here under form settings you will see the option that selected right now is that your form is customized on powerapps and if you would like to see the versions you will just click on see versions and usage this will redirect you directly to the details page for the app where you can see the details of this app you can see the versions you can restore a previous version if required back to my sharepoint list form settings you even have the option of switching back to the default sharepoint form experience all i have to do in that case is just go ahead and select use the default form click ok and this will now switch the form back to the sharepoint experience if i select my list item you will note that the default sharepoint form experience lights up once again now does this mean that i lose the customizations i made with powerapps the answer is no if i head back to the list settings and go to form settings and right here select the powerapps experience again click on modify form and powerapps i would recommend you republish your app once again to your sharepoint list form if you're switching it back because i have observed that sometimes it doesn't link it back so i'm just going back to my form editing experience now in order for me to republish it i have to make some change so let's say i'll just change the font size and go back to the normal font size go to save click on publish and now if i go back to my sharepoint list select my record and i will see my form light up once again and finally if you would like to completely delete the powerapps customize form you can head over once again to list settings go to form settings select the default sharepoint option and right here you will get a new option that opens up which says delete the custom form once you delete it you cannot recover that bear in mind you also have an option to customize an info path i will highly recommend you not to do so because info path is already under extended support and there are no new enhancements or investments that are being made in infopath whatsoever in my next video on sharepoint customized list forms i will show you how to create tabbed forms and i will also show you how to create list relationships in which we will connect two lists together in a one is to many fashion and showcase all that information right here in this same app 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,082

Rating: 4.9642324 out of 5

Keywords: customize sharepoint form with powerapps, powerapps sharepoint list, custom sharepoint form, microsoft powerapps, powerapps forms sharepoint, office 365 powerapps, power apps, powerapps tutorial sharepoint, powerapps sharepoint list form, powerapps tutorial, microsoft sharepoint, how to, powerapps for beginners, tutorial, custom sharepoint list forms with powerapps, customize sharepoint list with powerapps, sharepoint custom list, customize sharepoint list forms with powerapps

Id: aFzd5qwS4-c

Length: 23min 2sec (1382 seconds)

Published: Tue Mar 23 2021