Customize Form Of SharePoint Online List

 Hello Friends,

Welcome back with another post on SharePoint Online. Today we will see how to customize SharePoint List Forms. As we know, there is no much scope to customize List forms. However, Microsoft has given some feature to do so using JSON. Every SharePoint list form (New / Edit / View) has 3 sections - Header, Body, Footer. Microsoft has provided feature to give a customization any or all of these sections as per our requirement. Here, we will try to customize all these 3 sections. So, what are we waiting for. Let's start- 

1. Suppose we have a SharePoint list - FGasolineMaster.
2. 
   
   
   
   
3. In order to add a record, it has New Item Form.
4. 
   
   
   
   
5. Now, let's the requirement from client is to change the title from "New Item" to "Gasoline Rates" with some background color and some CSS also. So, how we can do it?
6. To achieve this, click on the "Edit Form" icon provided at top right corner of the page (if you are having sufficient credentials. In case, if you are not getting the icon, please assign yourself as Site Collection Admin)
7. It will look like as below-
8. 
   
   
   
   
9. Now click on "Configure Layout" option. It will load a section on right side as below-
10. 
    
    
    
    
11. This is the magical section. Here will be place our CSS and all the things in the form of JSON. Choose the "Header" in "Apply formatting to" drop down. Place the below code in the space provided for JSON-
12.  {

        "debugMode": true,
        "elmType": "div",
        "attributes": {
            "class": "ReactClientFormDefaultHeader"
        },
        "style": {
            "height": "10px",
            "color": "#fff",
            "font-size": "14px",
            "border-top": "5px solid #eee",
            "background-color": "#BA55D3",
            "padding": "10px",
    	"font-weight": "bold"
        },
        "children": [
            {
                "elmType": "div",
                "txtContent": "Gasoline Rates"
            }
        ]
    }
    

13. The class "ReactClientFormDefaultHeader" (normally it's a standard class applied by Microsoft) can be found as below-
14. 
    
    
    
    
15. You can write your own text in place of "Gasoline Rates".
16. If you don't wish to apply any additional CSS, you may skip the piece of code highlighted in lime color.
17. Click on "Preview" button. It will change the Header of page as below-
18. 
    
    
    
    
19. Click on Save button to save the changes.
20. The similar process is for Footer. To achieve this, follow steps from 6 - 11 by choosing Footer instead of Header this time. The piece of code to be added as JSON is as below-
21.  {

        "debugMode": true,
        "elmType": "div",
        "txtContent": "A Small Initiative By Sachin Jain",
        "style": {
            "height": "10px",
            "color": "#fff",
            "font-size": "15px",
            "border-top": "5px solid #eee",
            "background-color": "#BA55D3",
            "padding": "10px",
    	"font-weight":"bold",
    	"font-style":"italics"
        }
    }
    

22. Click on "Preview" button. It will change the Footer of page as below-
23. 
    
    
24. Click on Save button to save the changes.
25. The process for managing the body is also somehow similar. Steps are common but the JSON is different. Here we can divide the fields into sections. Here, I am dividing the fields into 3 sections-
1. Categorization
2. Type
3. Data
26. The JSON will be as below-
27.  {

        "sections": [
            {
                "displayname": "Categorization",
                "fields": [
                    "GasolineYear",
                    "GasolineMonth"
                ]
            },
            {
                "displayname": "Type",
                "fields": [
                    "VehicleType",
                    "GasolineType"
                ]
            },
            {
                "displayname": "Data",
                "fields": [
                    "ReimbursementRate",
    		"WorkingDaysInMonth",
                    "Attachments"
                ]
            }
        ]
    }
    

28. You may create sections as per your requirement. The field names are the internal names. This can be find from the URL, when you click on any field in List settings. as, by clicking on any field opens it in edit mode, here, you can find the field internal name from the last portion of the URL formed.
29. 
    
    
    
    
30. So, the final outcome of editing the body section will be as below-
31. 
    
    
    
    
32. The Preview button was not giving me any preview here in my case. I tried on couple of lists but no luck. Then I finally went to Save the changes.
33. Now, finally, I reloaded the site and clicked on New Item form.
34. Wow! It's was looking as below-
35. 
    
    
    
    
36. This way, you can customize the list forms upto an extent. The only cons is that the changes you had made, is applicable to all 3 forms (New / Edit / View). You cannot customize all 3 forms separately. This can be a PROS or can be a CONS. 😉
37. Edit Form-
38. 
    
    
    
    
39. View Form-
40. 
    
    

With this, I am concluding this post.

Happy Coding !!!

Will see you again with some new topics.

Stay Safe !

Stay Healthy !