What is the Data Form Web Part?
This article is the first in a four part series on the Data Form Web Part. First things first - what is the Data Form Web Part (DFWP)? The easiest place to start is that the DFWP is a Web Part that can be added to any SharePoint site. Unlike most Web Parts, however, the DFWP cannot be (easily) added through the web browser - it must be created using SharePoint Designer.
Components of a Data Form Web Part
Before we jump into creating a DFWP, it is helpful to understand the components that make up a DFWP. There are three main components of any Data Form Web Part:
|
Data Source
|
The DFWP supports many different data sources including:
· SharePoint Lists and Libraries
· An XML File
· ODBC/SQL Database
· Web Service
Or a combination of sources using a Linked Source
|
|
Parameters
|
Parameters can be used to make your DFWP more dynamic. The DFWP can read parameters from several sources including the Query String, Form fields, and cookies.
|
|
XSL
|
Simply put, this is what defines how your DFWP displays. The DFWP uses an XSLT stylesheet to transform data into HTML (for more information on XSL see the XSL page at the W3C: http://www.w3.org/Style/XSL/)
|
Table 1 - Components of a Data Form Web Part
Creating a Data Form Web Part
To create a Data Form Web Part, you will need to open a page on a SharePoint site using SharePoint Designer:
Figure 1 - An .aspx page in SharePoint Designer
To insert a Data Form Web Part, first select a Web Part Zone and choose Insert Data View from the Data View menu:
Figure 2 – Data View Menu
A Data Source Library Task Pane will appear displaying the available data sources for the current site:
Figure 3 - Data Source Library
In this example we’ll select an existing SharePoint List called “Stuff” and choose the Show Data option:
Figure 4 - Previewing the data in a Data Source
The Data Source Details will appear in the Task Pane displaying the fields from our list:
Figure 5 - Data Source Details for a SharePoint List
We can now select the fields we would like to display in our Data Form Web Part. By clicking on fields while holding Control, we can select multiple fields and then choose to insert those fields as a multiple item view:
Figure 6 - Inserting fields into a Data Form Web Part
We now have a Data Form Web Part:
Figure 7 - Data Form Web Part in SharePoint Designer
Next you will want to save your page. When you save, you will receive a prompt:
Figure 8 - Site Definition Page Warning
This prompt does not indicate an error; it simply warns you that saving will customize the page. If you are not familiar with customizing pages (formerly referred to as “unghosting”) in SharePoint I highly recommend clicking the “About SharePoint site definitions” link.
Once saved, your Data Form Web Part will look very similar to an out of the box List View Web Part:
Figure 9 - Data Form Web part in Internet Explorer
Behind the scenes
If we modify our new Data Form Web Part in Internet Explorer, we can see some of what is happening behind the scenes. Click on the Web Part Menu and select Modify Shared Web Part:
Figure 10 - Modifying our DFWP in Internet Explorer
In the Web Part Task Pane you will see two properties you can edit:
Figure 11 - DFWP properties
These two properties (XSL Editor and Parameters Editor) map to the components we discussed earlier in Table 1. Note that you cannot change the Data Source outside of SharePoint Designer. If you click on the XSL Editor, you will see the XSL that was generated for you by SharePoint Designer:
Figure 12 - Viewing the XSL of a DFWP in Internet Explorer
While the XML can be pretty tough to look at, the good news is that even if you are not an expert at XSL, if you have some HTML background you will be somewhat familiar with what you are seeing. For example, in the section I’ve captured in figure 13 you can see that we have a few table cells. Inside of those cells we are using some XSL markup to output the Title and Color fields. For the Quantity field, we are first running a format-number function, and then displaying the output.
Figure 13 - XSL from a Data Form Web Part
While it is possible to make changes to the DFWP from Internet Explorer, in practice you will make most of your changes in SharePoint Designer.
Configuring the Data Form Web Part
If we want to configure our Data Form Web Part in SharePoint Designer, the easiest way is to open the Common Data View Tasks menu by clicking on the caret in the top-right corner of our DFWP:
Figure 14 - Common Data View Tasks
From the Common Data View Tasks menu we can add, remove, or reorder columns in our DFWP. We can also apply filters and add sorting along with many other options. For now, let’s explore how you could use Parameters in a Data Form Web Part. If you click on the Parameters… link, you will open the Data View Parameters dialog:
Figure 15 – Data View Parameters dialog
In this example we’ll add a Color parameter that reads from the Query String:
Figure 16 - New Color Parameter
Now that we have created the parameter, we can now configure a filter for our DFWP. Back on the Common Data View Tasks menu; select Filter to open the Filter Criteria dialog:
Figure 17 - Filter Criteria dialog
Now we’ll configure our DFWP to filter using our new parameter:
Figure 18 - Filter by color
Once our filter is applied SharePoint designer applies the filter to our live preview. Because we did not set a default value for our Color parameter, we are presented with the “No Matching Items” template:
Figure 19 - DFWP “No Matching Items” template
To allow you to once again view what your DFWP would look like, select the “Show with sample data” option in the Common Data View Tasks Menu:
Figure 20 - DFWP option: Show with sample data
Now if we view our page in the browser and pass in a parameter we can see that our filter has been applied:
Figure 21 - DFWP with filter applied in the browser
Conclusion
As you can see, the Data Form Web Part is a highly configurable Web Part that allows you to quickly create highly customized views of your data. In my next article we will explore some of the more advanced views you can create using the Data Form Web Part.