Customise SharePoint List forms – Part 1

I have been asked several times to modify the list forms-  DispForm.aspx, NewForm.aspx and EditForm.aspx. As these forms are associated with list and stored in database, you can’t edit these phase from UI. 

The best way is to create the list in development environment and open the web pages using SharePoint Designer. 

In this tutorial, I would walkthrough to add Headers to the sections.  We are having an employee list whose fields need to be group under Personal and Company Headers

Walkthrough:

1.      Create a custom list called Employee

2.      Add Text Fields for Personal Details – Employee Name, Address, City, Country

3.      Add Text Fields for Company Details – Company Name, Company Country

4.      The list should show like the below figure

 

 5.      Click on New button on the Employee list to create new record

6.      Enter details and press OK

7.      Click on Employee Name to view the details. You would see that there is no grouping and no option to Edit the page 

 

8.      Open SharePoint designer and browse to the list

 

9.      Click on “DispForm.aspx” to view it in the designer

 

10.   Select the Main Content holder and press delete. This will remove the existing ListFormWebpart

11.   Now, insert a custom list form from menu. Go to Insert -> Sharepoint Controls -> Custom List Form

12.   In popup, select Display form and press OK. You should have the page changed to something like below

 

13.   As Custom List form displays the field in a HTML table, you are free to modify the HTML. You could insert your custom or OOB web parts now to the page.

14.   Make appropriate change and save the form. This would save the form into the database and the changes would be reflected in the UI

 

You now have a custom list form with headers :-)