Customizing SharePoint List Views with SharePoint Designer 2007
Summary: Learn how to use Microsoft Office SharePoint Designer to customize the Data Form Web Part. You can display SharePoint list data and filter the data by using an ASP.NET drop-down list control.
Applies to: Windows SharePoint Services 3.0, Microsoft Office SharePoint Server 2007, Microsoft Office SharePoint Designer 2007
Anup Kafle, 3Sharp
Windows SharePoint Services 3.0 includes a powerful and feature-laden Web Part named the Data Form Web Part (DFWP), which can present data from a wide array of data sources such as external databases, business data catalogs, and SharePoint lists. The DFWP is a new and improved version of the Data View Web Part (DVWP) that was included with Windows SharePoint Services 2.0. Because of this connection, the names "Data Form Web Part" and "Data View Web Part" are still used interchangeably.
The DFWP uses ASP.NET 2.0 data source controls for data access. (See ASP.NET Quickstart Tutorials for more information about data source controls.) When used with ASP.NET controls in Microsoft Office SharePoint Designer 2007, this Web Part can become a highly flexible and customizable tool for presenting data to the user interface. This Visual How To illustrates how you can customize the DFWP in Office SharePoint Designer 2007 to display SharePoint list data and filter the data by using an ASP.NET drop-down list control. Despite being an ASP.NET control itself, using the DFWP in Office SharePoint Designer 2007 is essentially a code-free experience.
This scenario involves a Windows SharePoint Services 3.0 site with a task list that is prepopulated with some sample data. The possible priority values are (1) High, (2) Normal, and (3) Low. The goal is to present the task list data in a DFWP and filter the data by priority.
To insert a DFWP
This procedure inserts a DFWP in the selected Web Part zone in the default.aspx page. Office SharePoint Designer 2007 also displays the Data Source Library task pane to the right.
Now use the Data Source Library task pane to connect the DFWP with the task list.
To display task data in the DFWP
The layout of this data is controlled by XSLT markup behind the Web Part. Although you can manually modify this XSLT markup by switching to the code view in Office SharePoint Designer 2007, you can achieve a number of key formatting operations without any coding. For example, you can apply custom number formatting to the % Complete values by using the Common Tasks menu in Office SharePoint Designer 2007.
To modify the number format of the % Complete field
The DFWP can accept parameters that can be used to filter data. In this example, you pass the filter parameter from a drop-down list control. First, you create the drop-down list control.
To add a drop-down list control filter to the Web Part
You have created a drop-down list control and set it up to display the task priority values. The next step is to configure the data view so that it filters rows based on the selection in the drop-down list control.
To configure the data view to accept filter parameters
At this point, the basic Web Part configuration is complete. Save the page and open it in a browser. You can see the drop-down list control above the DFWP.
Figure 4. DFWP with a drop-down list control filter
In this Visual How To, you saw how you can filter a list that is displayed in a DFWP by using an ASP.NET drop-down list control. The filter value is passed to the Web Part as a parameter. Other ASP.NET controls, such as a text box or an option button, can also be used as filter controls to pass parameters. The Web Part can also accept parameters from other sources, such as a URL (referred to as a Query String in the Data View Parameters dialog box), cookie, custom form field, and server variable. Each type of parameter can accept a default value.
Notice that you place the drop-down list control outside the Web Part zone, although the DFWP itself was inside the zone. This is because Windows SharePoint Services appends the Web Part zone GUID to the ID of any control that is placed within the Web Part zone at run time. Instead of a simple ID, such as DropDownList1, you get something similar to ctl00_m_g_0e4ece69_4898_4dfd_8938_9bc477b43786_DropDownList1.
The WYSIWYG interface of SharePoint Designer enables you to achieve this solution with no coding. The extensive set of wizards, templates, interactive task panes, and context menus in SharePoint Designer provide a rich user interface for customizing Web Parts. Although you can use any editor that is compatible with Windows SharePoint Services or the WebDAV protocol to customize SharePoint pages, you are limited to the code view of the pages. SharePoint Designer allows you to edit in code view as well as design view. Actually, as you customize a page in design view, as in this Visual How To, SharePoint Designer generates the underlying code on the fly, which is viewable in code view. Because the code is a mix of HTML, ASPX, and XSLT markups, you can also edit the code yourself directly while taking advantage of IntelliSense provided by SharePoint Designer. In fact, using the design view in SharePoint Designer to perform basic tasks and then switching to code view to fine-tune the customizations is a common best practice for customization in Windows SharePoint Services.
Video Length: 00:07:27
File Size: 13.9 MB WMV