Creating and Modifying Web Pages in Microsoft SharePoint Designer 2010

Creating and Modifying a List Form Page

When lists and libraries are created, they provide a number of built-in view pages. They also provide pages you can use to create new list items, edit and display existing list items, upload documents, create a new document, and edit and display metadata associated with documents. These pages are known as form pages. Like view pages, form pages consist of one Web Part zone named Main and one Web Part. These pages are displayed as dialog boxes transposed over view pages. However, if you enter the URL of a form page in the browser, you can modify it by using the browser.

View pages use an XLV Web Part, whereas most of the default form pages use a Web Part named the List Form Web Part (LFWP). In SharePoint Designer or the browser, the LFWP customization options are very limited. Unlike the XLV Web Part on view pages, the LFWP does not provide tabs similar to the List View tabs on the ribbon, so you cannot control the order in which fields are displayed or whether a field should appear.

To create a tailored data entry form that provides more customization options, you must use SharePoint Designer and create a new list form page. The list form page contains a Data Form Web Part (DFWP), which you can use to create solutions for viewing and managing data that resides internally or externally to SharePoint sites.

When you create a list form, the form does not prevent users from entering list or library data by using Datasheet view or keep users from altering metadata properties by using Microsoft Office applications. To make any additional business logic you incorporate into the list form available for other data entry methods, you need to customize those data entry methods; otherwise, you need to educate your users concerning the differences.

In this exercise, you explore the LFWP and create a new list form page.

1. In the Navigation pane, click Lists and Libraries, and then under Lists, click Tasks.

   The tasks list settings page is displayed in the workspace. The Forms area contains three forms: DispForm.aspx, EditForm.aspx, and NewForm.aspx. The Type column indicates the type of form (Display, Edit, or New) and whether the forms are the default forms for their type.

   NOTE

   The default New form is displayed when you click links in the browser (such as Add New Item) or on the ribbon (New Event in the New group). The default Edit form is displayed when you click Edit Item on the Item menu or on the ribbon, and the default Display form is used when View Item is clicked on the Item menu or on the ribbon.

2. In the Forms area, click NewForm.aspx to open the page in edit mode, and then click [Preview of List Form Web Part].

   A blue border with the label Main appears, within which is the label <webpartpages:ListFormWebPart>. This indicates that an LFWP is contained within the Web Part zone Main. A purple-bordered surrounds the Web Part zones, labeled PlaceHolderMain (Custom). The ribbon contains the Web Part Format tab.

3. On the breadcrumb, click Tasks to display the settings page in the workspace. Then, on the List Settings tab, click List Form.

   The Create New List Form dialog box opens, in which you can change the purpose of the form from inserting a new list item to viewing or modifying list item metadata. You can also change the list or library that this page is associated with and create a link on the List Item menu and ribbon. The Task content type is automatically selected in the Select The Content Type To Use list.

4. In the File Name box, type NewTask.

   

5. Click OK.

   Troubleshooting

   If a Microsoft SharePoint Designer dialog box opens stating that the list changes to the server could not be saved because the file exists, choose a different name for the list form file name and repeat steps 4 and 5.

   The Create New List Form dialog box closes. On the list settings page, in the Forms area, NewTask.aspx is listed as a New form that is not set as the default.

6. In the Forms area, click NewTask.aspx to open the page in edit mode.

   A blue border with the label Main appears, and a purple-bordered rectangle surrounds the Main Web Part zones, labeled PlaceHolderMain (Custom).

7. In the Priority row, click the Priority label above the drop-down list. In the Quick Tag Selector, click the td.ms-formbody tag.

   The table cell that contains the Priority list is selected.

   

8. On the Table tab, click Split Cells in the Merge group.

   The Split Cells dialog box opens.

9. In the Number of columns text box, type 3, and then click OK.

   Two new cells appear to the right of the Priority list.

10. On the View tab, click the down arrow on the Visual Aids command, and then click ASP.NET Non-visual Controls if it is not already selected.

    Below each data entry control the text [Field Description] is displayed. If this text is not visible, you might need to turn visual aids off and then on.

11. In the status row, in the first column, click the text Status, and then right-click H3.ms-standardhe, which appears above the text Status. Click Cut, and then right-click the cell to the right of the Priority list and click Paste.

    The text Status is displayed in the third cell on the priority row.

    

12. Click the Status label above the drop-down list. In the Quick Tag Selector, click the td.ms-formbody tag. On the Home tab, click Cut, and then right-click the cell to the right of the text Status and click Paste.

    The Priority row should now contain the Priority and the Status lists, plus two text labels and two field descriptions. The row that formerly contained the Status text label and the list is now empty.

    

13. Right-click the empty row, point to Delete, and then click Delete Rows.

    

14. On the Quick Access Toolbar, click Save, and close the NewTask.aspx tab to display the site settings page.