How to customize Forms in SharePoint Lists 📃

hi everyone my name is giuliano in today's video i'll show you how you can customize forms in sharepoint lists we will see how you can change and customize the other by adding a logo or change the color and the font of the title you can change even the body by adding or adding sections and lastly you can change the footer by adding a link for example okay let's move forward and i'll show you every step i am in office.com and i am logged in in one of my office 365 tenant my goal here is to change the layout of a form for a specific list that i already created and i will open true microsoft lists in order to do that i will go over the classic icon lists clicking on it this will open a new tab in the browser and i have now microsoft lists with all my lists created i want to open this list asset manager for the global hr team okay let's go this is the list that i created i have just four items here now if i click on one item we can see the classic form available here in order to view every detail related to this list item if i click on edit all i can edit this field and i can scrolling down see all fields available for this list item then below i have save and cancel now i want to change a little bit delay out of this form how i can do that before jumping on every step i want to open a document that i have here in the top okay here we go we have this long url don't worry i will add it to the description of this video okay this document is very important because explain you how you can get started in order to change the layout of a form now i want to focus on a specific content here which is this paragraph and explain that you can change the other the body and the footer of a form now scrolling a little bit down we have a preview image how it looks like this adder we have an icon and then we have this nice title here so all you need to do is just copy this json code snippet don't worry you don't need to be a web developer you have just to change the right content it's very easy to adapt this doesn't could snippet to your needs i will show you in a bit okay then i scrolling a little bit down we have configure custom footer this shows you how you can add for example a link in the footer in this example we have a very nice sample because here we have this url there is a static part and then we have dynamic part so this is pretty cool because for this specific item there is a person as a field in this list item so what you can do here is click on the link and jump directly on the contact details in outlook of the person which is mentioned in the item so this is very very cool now going again at the bottom we have other simple how you can create sections in the body in this case we have details and application and then you can adjust fields in the right section okay now let's go with the demo and i'll copy now this json code snippet and i will apply this sample to my form okay let me click now on the copy button here and let me go back to the previews tab here we go on my list asset manager now how i can change the layout of my form all i need to do is just open one item of this list i will open this first one then on the right i have this icon available let's click on it and i have in this drop down three options edit columns configure layout and customize with power ups now we will use json to change the form so then we have to select this second option configure layout let me click on it header is selected by default but if i click on the drop down i am able to change body or footer for example but let's stay focused on addon now i will pass there in this field the json code snippet that i copied before and here we go now this area is filled out don't worry again you don't need to be a web developer to change the layout of this form i want to just give you a little explanation which is this jasm code snippet so basically sharepoint is able to read this json and to apply your changes by creating html elements in the page if you have a look on every property here we can see that there is a type this is element type and here we have a div so basically we have all divs here in order to have the icon and the title okay all you need to do now to change icon for example is just go through this element in the attributes of this div and here we have group this is the icon name now i want to change this icon i'll show you now an easy way where you can choose an icon i have another tab here opened in the browser let's click on this and this dropped me in the fluent ui website what is fluent ui fluent ui is a front-end framework used by microsoft for the user interface of office 365. now in order to access to the icons catalog i have to click on the menu here styles then i have to expand this menu item iconography here i can get access to the fluent ui icons page now here there are all details if you want to implement this front-end framework in your custom web application but we want to just select an icon here okay let's click in the search icon and just to give you an example here if i type teams we can see all office 365 icon of teams now if i remove this text and if i type device just to stay in tam of my sharepoint list i want to select now this device too let me go back now to my microsoft list and here we go now i will pass here in the icon name this text that i already copied device 2. now if i click on preview we can see that this icon appear so it's pretty cool and the text also in the title is applied we have contact details for surface laptop tree now going specifically in this title i go here and here we have this div element and we have dxd content so here we have contact details for and then we have this variable title so this is the title of my list item now i will remove contact because here i want to type product product details for and the title of my list item perfect now if i click on preview we can see that now the text is changed we have product details for surface laptop 3 and the icon is changed again i'll show you now that if i change the title of the icon name this change accordingly so let's type in devices 3 for example let's click on preview and now the icon is changed as you can see but let me select again the devices too because i like much more if you have css knowledge you can do more for example here i can add another attribute in the style background color orange if i click now on preview we can see that now the color the background color of the other change accordingly okay let me remove this one because i want to stay soft so click on preview and now the change is applied i will click on save to confirm my change it's time to focus on the body now then let me click on the drop down and let me select body it's now empty of course switching now on the next tab that i have here of the documentation i'm able scrolling down to go on the body section and here i will copy now this code snippet then going back to the list i will pass the now the code that i just copied okay here we go it's now available so if i click now on preview we can see that nothing happens so we have to adjust something here first of all i have to remove comments here in fact these comments and this other generate this error please enter valid jasm okay let me let me remove now this comment and i'll do the same for this second one i have other comments here okay i removed now all comments if i click on preview now i have now something that changed here so as you can see here i have fields arranged in columns but i want to assign our display name to every section for a moment i have two sections as you can see here okay let me type in the display name of the first section this will be product and the second one will be details okay let me click on preview just to see that now we have two sections created here product and details now what i want to do is rearrange the field i want to bring on top the device photo and i want to bring also the asset tag this part it's very easy going again on my json i have this property fields i have now to insert the title and the name of my fields as i said i want to add asset tag and then i will insert comma and double quote double quote i will insert device auto here we go all good if i click again on preview now we can see that these two fields are rearranged under the section product so now the other fields are automatically added under details because i have not specified nothing here and this is very easy to handle because the last section doesn't need to specify which fields you want to arrange there this is very very easy moving forward we have the footer to adjust let's click on the drop down and then footer going again on the next and scrolling a little bit over i have now this jasmine code snippet to copy let's click on copy and let me go back to my microsoft list and here i can pass there now this just could snippet i have to adjust something here for example we have a hyperlink here and the text of this hyperlink is this one contact details for and then we have a dynamic value which is the title of the list item now i have to change this one i will add about our products so here we go i have to remove this equal and this single quote okay then i want to change the link to open when the user go over this hyperlink then i will remove this one and i will add my home communication site okay all good theoretically i can click on preview and now we should see this hyperlink available here we go in the footer so now i can save all changes that i made okay let's see in action now this form i can close this panel and now i can click on any other item of this list for example surface pro and here we go i have my header modified i have the icon with the title then i have this this first section in the body product then i have details with all other fields i can change easily any field here and then at bottom i have in the footer this hyperlink if i click on it i will jump darkly in my home communication site ok that was a quick tutorial how you can change and customize forms in sharepoint lists if you enjoyed the video please give a thumbs up and subscribe to my channel to stay tuned with my next videos put a comment down below if you want to see me cover any other topics in the future this is exactly how i build my to-do list for my next videos i hope to see you next time bye

Channel: Giuliano De Luca

Views: 5,640

Rating: 4.9411764 out of 5

Keywords: giuliano de luca, custom sharepoint list form, custom sharepoint form, custom sharepoint list forms, sharepoint list, sharepoint lists, Microsoft lists, how to customize forms in sharepoint lists, sharepoint list tutorial, sharepoint list formatting, sharepoint forms, sharepoint customize forms, sharepoint custom form, sharepoint custom forms, custom forms in sharepoint, sharepoint customized form, teams custom list form, Microsoft teams custom forms, teams customize forms

Id: zk4vxCNOJF0

Length: 13min 6sec (786 seconds)

Published: Mon Feb 01 2021