create a custom list form for a share point list

Create a Custom List Form for a SharePoint List

Jennifer Lewis

Create a Custom List Form for a SharePoint List of 18

Jennifer Lewis Date Written: 1/8/2009

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



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.



Page Name What It Is Example AllItems.aspx Displays all

the items on the list

DispForm.aspx Displays the selected item

EditForm.aspx Edit the

selected item



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.



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.



Figure 7: The Form as the New Name

6. Click on the ListFormWebPart to highlight it.



Figure 8: Selecting the Web Part

7. Press the delete key to remove it from the form.



Figure 9: Deleting the Web Part

8. From the menu, select Insert – SharePoint Controls – Custom List Form



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



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.



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.



Figure 14: Selecting the List Properties

15. Select Properties

Figure 15: The List Properties Dialog

16. Select the Supporting Files tab.



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.



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



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



Figure 20: Test 2 - Confirming that it is Now Using the Custom Form



References Create a custom list form. Microsoft. http://office.microsoft.com/en-us/sharepointdesigner/HA101191111033.aspx

create a custom list form for a share point list

Documents