P. 1
Create a Custom List Form for a Share Point List

Create a Custom List Form for a Share Point List

4.43

|Views: 5,649|Likes:
Published by Jennifer
This document explains how to create custom list forms for a SharePoint list using SharePoint Designer 2007.
This document explains how to create custom list forms for a SharePoint list using SharePoint Designer 2007.

More info:

Published by: Jennifer on Jan 09, 2009
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF or read online from Scribd
See more
See less

05/25/2012

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
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 1.

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

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

2.

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

Example

DispForm.aspx

Displays the selected item

EditForm.aspx

Edit the selected item

Jennifer Lewis Date Written: 1/8/2009

Create a Custom List Form for a SharePoint List Page 5 of 18

NewForm.aspx

Add a new item to the list

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

3.

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

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

9.

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

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->