Getting to know the Data Form Web Part (1 of 4)

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:

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.