.gif)
Applies to: Windows SharePoint Services 3.0, Microsoft Office SharePoint Server 2007, Microsoft Office SharePoint Designer 2007
Anup Kafle, 3Sharp
February 2008
.gif)
Windows SharePoint Services 3.0 ships with 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 on 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.
.gif)
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-
Start Office SharePoint Designer 2007.
-
Click File, click Open Site, and open the site that contains the task list.
-
Double-click default.aspx to open it for editing.
-
Click within the Web Part zone where you want to add the DFWP.
-
Click Data View, and then click Insert Data View.
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-
In the task pane, expand the SharePoint Lists category.
-
Right-click Tasks, and click Show Data. This action displays the Data Source Details task pane.
-
Select the following fields (by using CTRL+left-click): Title, Priority, Status, % Complete, and Assigned To.
-
Click the Insert Selected Field as list, and click Multiple Item View. (See Figure 1.)
Figure 1. Data Source Details task pane
.gif)
The DFWP displays all rows of data in the task list.
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-
Hover over a data value in the % Complete column.
-
Click the > button, located to the right of the data value, to display the Common Tasks menu.
Figure 2. Common Tasks menu for data field formatting
.gif)
-
Click Number formatting options.
-
In the Format Number dialog box, click Percentage(%), and click OK.
The numeric values in the % Complete column are now formatted as percentage values.
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-
While in design view in Office SharePoint Designer 2007, place the cursor in the top area outside the Web Part zone.
-
Switch to the Data Source Library task pane.
-
Right-click Tasks, and click Insert Data Source Control. This action inserts an SPDataSource object with the default ID spdatasource1.
-
Click Insert, point to ASP.NET Controls, and click Dropdown List.
-
In the Common DropDownList Tasks menu, select the Enable AutoPostBack check box.
-
In the same menu, click Choose Data Source.
-
In the Data Source Configuration Wizard, select the following options:
-
Select a data source: spdatasource1
-
Select a data field to display in the DropDownList: Priority
-
Select a data field for the value of the DropDownList: Priority
-
Click OK.
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-
Click the > button in the top-right corner of the Web Part to display the Common Data View Tasks menu.
-
In the Common Data View Tasks menu, click Filter.
-
In the Filter Criteria dialog box, click Click here to add a new clause.
-
Fill in the values as follows:
-
In the Data View Parameters dialog box, fill in the values as follows:
Figure 3. New data view parameter
.gif)
-
Click OK in the Data View Parameters and Filter Criteria dialog boxes.
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
.gif)
.gif)
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.
|
.gif)
.gif)
Watch the Video
Video Length: 00:07:27
File Size: 13.9 MB WMV
.gif)
|