Create a Custom List Form for a SharePoint List
Jennifer Lewis
Create a Custom List Form for a SharePoint List Page 2 of 18
Overview A number of companies are using SharePoint lists to store simple information such as: • Issue tracking • Employee information • Catalogs • Surveys SharePoint lists have built-in forms that are used to add, modify and display items in the list. However, sometimes you or your business user may want to customize the form or forms. For example, there may be fields that you want to mark as “read only” once a value has been initially entered, or there may be fields that you don’t want to display on the form at all. You may want to add custom functionality, but you may not want to either do anything too labor intensive because of time, or your and/or your team don’t have the skill set to use other tools such as InfoPath but you and/or your team may have the ASP.NET skill set. Using SharePoint designer, you can create a custom list form for a SharePoint list for a particular action (adding, modifying and displaying items).
Required Tools You will need the following items to perform this exercise: • Access to a Microsoft SharePoint site • Microsoft SharePoint Designer 2007
Directions 1.
Open your site in SharePoint Designer by selecting File – Open Site from the menu. In this example, I will be working on a site called http://spdev2/site1. Figure 1: Opening the Site
Jennifer Lewis Date Written: 1/8/2009
Create a Custom List Form for a SharePoint List Page 3 of 18
Figure 2: Selecting the Site
2.
Open the Lists folder and select your list. In this example, I have selected the Getting to Know You list. Figure 3: Selecting Your List
Note that there are four aspx pages that are the actual forms. Below is an explanation of each page. Jennifer Lewis Date Written: 1/8/2009
Create a Custom List Form for a SharePoint List Page 4 of 18
Page Name AllItems.aspx
What It Is Displays all the items on the list
DispForm.aspx
Displays the selected item
EditForm.aspx
Edit the selected item
Jennifer Lewis Date Written: 1/8/2009
Example
Create a Custom List Form for a SharePoint List Page 5 of 18
NewForm.aspx
Add a new item to the list
3.
Open the form that you would like to customize. In this example, we are going to customize the “edit item form” (EditForm.aspx). Figure 4: Selecting the Form to Customize
4.
Save the file as another name by selecting File – Save As. In this example, I am going to save the file as EditForm2.aspx. IMPORTANT Do not delete the original page, and do not edit the original page. You will get unexpected errors from SharePoint when you try to work with your list that can only be recovered by deleting your list and recreating it.
Jennifer Lewis Date Written: 1/8/2009
Create a Custom List Form for a SharePoint List Page 6 of 18
Figure 5: Saving the File as Another Name
Figure 6: Entering the New Name
5. After entering the new file name, click the Save button. Before you begin editing, make sure that SharePoint Designer is finished with the save and it is displaying your file as your new file name.
Jennifer Lewis Date Written: 1/8/2009
Create a Custom List Form for a SharePoint List Page 7 of 18
Figure 7: The Form as the New Name
6.
Click on the ListFormWebPart to highlight it.
Jennifer Lewis Date Written: 1/8/2009
Create a Custom List Form for a SharePoint List Page 8 of 18
Figure 8: Selecting the Web Part
7.
Press the delete key to remove it from the form.
Jennifer Lewis Date Written: 1/8/2009
Create a Custom List Form for a SharePoint List Page 9 of 18
Figure 9: Deleting the Web Part
8.
From the menu, select Insert – SharePoint Controls – Custom List Form
Jennifer Lewis Date Written: 1/8/2009
Create a Custom List Form for a SharePoint List Page 10 of 18
Figure 10: Inserting the Custom List Form
9.
Do the following: a. From the List or document library to use for form drop-down box, select the list for which you are creating the custom list form. In this example, I am creating a custom list form for the list Getting to Know You, so I will select Getting to Know You. b. From the Content type to use for form drop-down box, select Item. c. From the Type of form to create choice, select the form that you are customizing. In this example, I am customizing the Edit form, so I will select Edit item form d. Leave the Show standard toolbar checkbox checked unless you do not want to display the toolbar. Figure 11: Entering the Custom List Form Information
Jennifer Lewis Date Written: 1/8/2009
Create a Custom List Form for a SharePoint List Page 11 of 18
10. Click OK. Wait a few moments until SharePoint Designer loads the web part. Figure 12: Results from Entering the Custom List Form
11. Now you should be able to edit the form to your specifications. You can: • Delete Rows • Make fields “read only” • Rearrange the display • Change wording • Add graphics In my example, I made the name, address, and badge number read only, and I added a few pictures.
Jennifer Lewis Date Written: 1/8/2009
Create a Custom List Form for a SharePoint List Page 12 of 18
Figure 13: Example of Customized Changes
12. When you are done with editing your form, save your form by clicking on the save icon on your toolbar. 13. Close the file. 14. In the Folder List, right click on the list that will be using the custom form. In my example, the list is called Getting to Know You.
Jennifer Lewis Date Written: 1/8/2009
Create a Custom List Form for a SharePoint List Page 13 of 18
Figure 14: Selecting the List Properties
15. Select Properties Figure 15: The List Properties Dialog
16. Select the Supporting Files tab.
Jennifer Lewis Date Written: 1/8/2009
Create a Custom List Form for a SharePoint List Page 14 of 18
Figure 16: The Supporting Files Tab
This is the tab where you would change the page to use for a particular action (All Items, Display, New Item, Edit Item). For example, if you customized the Display form (DispForm.aspx), you would change the Display item form field. In this example, I customized the Edit item form, so I would change the Edit item form field. 17. In the Content type specific forms drop-down box, select Item 18. Click the Browse button beside the form that you are customizing. In my example, I am customizing the Edit item form. 19. In the Current Web Site dialog, select the form that you just created. In my example, I created EditForm2.aspx.
Jennifer Lewis Date Written: 1/8/2009
Create a Custom List Form for a SharePoint List Page 15 of 18
Figure 17: The Current Web Site Dialog - Used to Select the File
20. Click the OK button 21. When you are finished with setting up the list to use the custom pages, click the Apply button. 22. Click the OK button to close the window. 23. Close your site by selecting File – Close Site Figure 18: Closing the Site
Jennifer Lewis Date Written: 1/8/2009
Create a Custom List Form for a SharePoint List Page 16 of 18
To test your changes, go to the list on the SharePoint site and attempt to perform the action that you customized. In my example, I am going to test the Edit item action. Figure 19: Test 1: Editing an Item
Jennifer Lewis Date Written: 1/8/2009
Create a Custom List Form for a SharePoint List Page 17 of 18
Figure 20: Test 2 - Confirming that it is Now Using the Custom Form
Jennifer Lewis Date Written: 1/8/2009
Create a Custom List Form for a SharePoint List Page 18 of 18
References Create a custom list form. Microsoft. http://office.microsoft.com/enus/sharepointdesigner/HA101191111033.aspx
Jennifer Lewis Date Written: 1/8/2009