Working with Data View Webparts

Page 1 of 8

Introduction
SharePoint Server Data View Web Parts (DVWP) are useful in allowing designers to create custom views of
data and forms. Data from multiple lists can be pulled into the same DVWP to consolidate relational data
from these lists into a single view. Designers can turn list data into a folder tree, menu bar, or even a user-
friendly interface for specialized functionality.
Getting Started
Working with SharePoint DVWPs is considered more advanced than modifying simple content in a Content
Editor Web Part or moving web parts around on a web part page. The skills necessary to work with DVWPs
include knowledge of XSLT, HTML, and SharePoint Designer (SPD). Begin learning how to work with
DVWPs by adding them to web pages in design mode of SharePoint Designer and modifying them through
the property boxes. More efficient and advanced methods of using DVWPs are done entirely through code.
See the Useful DVWP Skills and Recommended DVWP Skills sections to the right for a quick overview of
skills that may be useful.
Download & Install Microsoft SharePoint Designer
Use the link under Recommended Tools (right) to download SharePoint Designer. After saving the
download, install it as the steps allow. Once installed, open SharePoint Designer from the Microsoft
Office menu via the Windows Start Menu.

Screenshot 1: Start SharePoint Designer via the Windows Start Menu

Information
SharePoint Designer is a free web editor intended to work directly with SharePoint
websites. (** Do not use Microsoft Front Page.) SPD interfaces with SharePoint
web services to apply configuration settings and upload code files during the save
process. SPD also provides a set of COM objects that provide power users an
effective means of data management in SharePoint websites. One example of this
is an ActiveX control that is necessary for editing SharePoint lists in datasheet view
(Edit in Datasheet). Microsoft Office 2003 standard edition does not provide
these tools, so SPD can be a useful component for regular SharePoint users even if
they do not use SPD directly.



Related Links
How to Use the Data View
Web Part for Advanced List
Functions
SharePoint Data View Web
Part Extension Functions in
the DDWRT Namespace
W3Schools.com
CAML
Recommended Tools
SharePoint Designer 2007
Download
Useful Tools
Recommended Skills
XSLT
XML
HTML, XHTML
CSS
SharePoint Designer 2007
(or 2010)
Useful Skills
JavaScript
XML DOM
HTML DOM
XML-Based CAML Query











Working with Data View Webparts


Page 2 of 8

Connect to the SharePoint Server Website
After opening SharePoint Designer (SPD), go to the File menu and click Open Site. When prompted, type in the URL to website to edit. Be
aware that including the path to any individual web page will not allow SPD to open the site.

Screenshot 2: Connect to the SharePoint Website
Useful Tip
Most times logging into the website is required. Usually, this works best when entering the server-based
email address of the user as the username.

o Username: enter the login name of a valid user. (i.e. me@myspsite.com)

o Password: enter the password of the same user.



Project 1: Working with DVWPs in SP Designer, Design View (simple)
Once the website has opened in SharePoint Designer, begin by creating a new SharePoint web page (ASPX). First, right click in the main
window (Website tab) and choose SharePoint Content from the New submenu that pops up. The new web page will host the data view
web part that will be used in this project.

Working with Data View Webparts


Page 3 of 8

Create a New Web Page
Step 1. Locate the Website tab near the top of SharePoint Designer. Inside this tabbed window, right-click to open the shortcut menu.
Step 2. From the shortcut menu, open the New submenu and click on SharePoint Content.
Step 3. From the Page tab of the New dialog box, choose Create from Master Page.
Step 4. Click OK.

Screenshot 3: Create a new SharePoint web page from an existing master page.

Step 5. Select the Default Master Page option and click OK.
a. SP Designer will spend a few seconds to load the
reference script in the HTML to the master page.




Working with Data View Webparts


Page 4 of 8


Screenshot 4: Wait for SPD to build the web page and link it to the chosen master page.
Add the Content Placeholder Control and a Webpart Zone
Background
Information
HTML web pages require a <HTML> and a <BODY> element to display properly. ASPX web pages that
reference a master page do not require these elements because they are built into the master page. Before the
web page loads in the browser, these pages are pieced together into a single page.

Place holders are built into the master page so individual ASPX pages can reference them and only worry about
what goes into these place holders. Any other components would be built into the master page and considered
the common pieces for all pages referencing the master page.



Step 6. Locate and click the Code tab near the bottom of the new web page editor window.
Step 7. Type in the asp:Content control element code into the web page as shown in Screenshot 5. A valid
ContentPlaceHolderID must be assigned to the asp-Content control. The ID value can be anything, but should be unique to
any other control ID that may be contained in the final web page.


Screenshot 5: Add an asp:Content element to the web page.

The asp-Content control links the HTML and other web controls loaded within it to the placeholder control in the master page. The example in
Screenshot 5 shows how to link the content that will be displayed within the body of the final web page.
Step 8. Switch the editor window from Code view to Design view.
Once in Design view, the new asp-Content control should be selected. The design of the master page selected in Step 5 is also displayed
to help visualize this web pages design, as it would look in the SharePoint website.

Working with Data View Webparts


Page 5 of 8

Step 9. Add a new Web Part Zone: From the Insert >> SharePoint Controls menu, select Web Part Zone.
The web page is now ready for a data
view webpart (DVWP). The next steps
will focus entirely on the data view
webpart for displaying read-only data.
Later discussions will provide details on
defining custom list forms and designing
interactive views.
From the Insert menu, move
the mouse over the
SharePoint Controls
submenu and click on Web
Part Zone.


Screenshot 6: Add a new Web Part Zone
Data view webparts use a combination of an ASP.Net data source control and XSLT to query and display the data. The queries are based on
XML and follow a specific schema designed to communicate with SharePoint. CAML statements are similar to SQL queries in meaning, but
are written in a structured XML format. For the sake of Project 1, the query will be defined in design mode.
Examples of CAML Query Statements
Select All Records
<Query> <Where>
<IsNotNull>
<FieldRef Name=ID />
</IsNotNull>
</Where></Query>
Select By Two Field Names
<Query>
<Where>
<And>
<Eq>
<FieldRef Name=_ModerationStatus />
<Value Type=Text >Approved</Value>
</Eq>
<Eq>
<FieldRef Name=Title />
<Value Type=Text >My Title</Value>
</Eq>
</And>
</Where>
</Query>
Select By Field Name
<Query><Where>
<Eq>
<FieldRef Name=Title />
<Value Type=Text >My Title</Value>
</Eq>
</Where></Query>
Select By Three or More Field Names
<Query>
<Where>
<Or>
<And><Eq>
<FieldRef Name=_ModerationStatus />
<Value Type=Text >Approved</Value>
</Eq> <Eq>
<FieldRef Name=Title />
<Value Type=Text >My Title</Value>
</Eq></And>
<Eq>
<FieldRef Name=ContentType />
<Value Type=Text >Document</Value>
</Eq>
</Or>
</Where>
</Query>
Working with Data View Webparts


Page 6 of 8

Add the Data View Webpart to the Web Part Zone
Be sure the new webpart zone is
selected.
From the Insert menu, move the
mouse over the SharePoint
Controls submenu and click Data
View.
o This will open the Data
Source Library panel on
the right displaying a list of
SharePoint data sources
currently in the website.
o The data sources are
organized by type: Lists,
Libraries, Custom, etc.

Screenshot 7: Begin adding the new Data View Webpart
Select the DVWP Data Source
Step 10. Click on the link provided by the Data View Webpart that was added to the webpart zone. The Data Source Library panel will
display on the right.

Screenshot 8: Select the data source for the new data view webpart


Click the link in the new
DVWP to select the
data source.
Working with Data View Webparts


Page 7 of 8


Step 1. Choose one of the lists or libraries available in the Data Source Library panel.
Move the mouse over the list name and click on the down arrow.
Step 2. Select Show Data.
Step 3. A list of available list columns will show in a new panel (Data Source Details). Use
Ctrl+Click to select the columns to display in the webpart.
Step 4. From the Insert Selected Fields As menu (above) select Multiple Item View. A table
of fields and any existing data will be displayed in the webpart zone selected
previously.
Step 5. Begin configuring the new data view webpart by clicking the small, white tag (right
arrow) near the top-right corner of the webpart.


Screenshot 11: Click the small white tag (arrow) on the top-right of the new data view
webpart.

Further configuration of the data view is optional. The rest of this tutorial will cover some of these
options. The most useful are Edit Columns, Filter, Paging, and Parameters.


Screenshot 9: Choose Show
Data from the selected data
source.

Screenshot 10: Select the
fields to show and click
Multiple Item View from the
Insert Selected Fields As...
menu.



Working with Data View Webparts


Page 8 of 8

Configuring the DVWP: Edit Columns (Screenshot 12)
From data view webparts shortcut menu, choose Edit Columns.
Use the Add or Remove buttons to select the fields to display in the webpart.
Use the Move Up or Move Down buttons to set the order of how the columns are displayed
from the left to the right of the web page.
Configuring the DVWP: Filter (Screenshot 13)
The Filter command applies a CAML query statement to the data view webpart through the design
interface. Use the Filter Criteria dialog to input the query statement. The output result that is
written into the code of the web page will be similar to the CAML examples presented earlier in this
document.
Configuring the DVWP: Paging (Screenshot 14)
Item paging provides the ability to display a certain number of qualifying records on the web page
at any given time. Choose how the webpart will display these records:
Display all items: Show all records on the first page. This choice can decrease the
response time of the web page if there are more than 1000 records.
Display items in sets of this size: Enter the maximum number of records to display
on the web page. A set of links will be displayed on the web page to navigate forward or
backward in the set of records.
Limit the total number of items displayed to: Set the maximum number of
records to display on the first web page. Only this number of records will be available by
the data source.
Configuring the DVWP: Parameters (Screenshot 15)
Data view webpart parameters are bound directly to the XSL parameters in the style sheet that
converts the XML data provided by the data source. Working with these parameters are a little
more advanced than the configurations discussed above, but are very useful when defining
custom designs.

Screenshot 12: Edit Columns to
display in the DVWP

Screenshot 13: Apply any filters
to select key records

Screenshot 14: Choose the
number of items to show per
page

Screenshot 15: Define or look
up parameters that are passed
into the XSL style sheet


Copyright 2010, MyCodeJournal.com