Working with Data View Webparts.pdf

8/12/2019 Working with Data View Webparts.pdf

1/8

Work ing w ith Data View Webparts

Page 1of 8

Int roduct ion

SharePoint Server Data View Web Parts (DVWP) are useful in allowing designers to create custom views of

ata and forms. Data from multiple lists can be pulled into the same DVWP to consolidate relational data

rom these lists into a single view. Designers can turn list data into a folder tree, menu bar, or even a user-

riendly interface for specialized functionality.

Getting Started

Working with SharePoint DVWPsis 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

nclude 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

he 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

kills that may be useful.

Download & Install Microsoft SharePoint Designer

Use thelinkunder Recommended Tools(right) to download SharePoint Designer. After saving the

ownload, install it as the steps allow. Once installed, open SharePoint Designer from the Microsoft

Officemenu via the Windows Start Menu.

Screenshot 1: Start SharePoint Designer via the Wind ows Start Menu

Informat ion SharePoint Designer is a free web editor intended to work directly with SharePointwebsites. (** 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 VieWeb Part for Advanced Functions

SharePoint Data View WPart Extension Functionthe DDWRT Namespace

W3Schools.com

CAML

Recommended Tools

SharePoint Designer 20Download

Useful Tools

Recommended Skills

XSLT

XML

HTML, XHTML

CSS

SharePoint Designer 20

(or 2010)

Useful Skills

JavaScript

XML DOM

HTML DOM

XML-Based CAML Quer
http://www.microsoft.com/downloads/details.aspx?FamilyID=BAA3AD86-BFC1-4BD4-9812-D9E710D44F42&displaylang=enhttp://www.microsoft.com/downloads/details.aspx?FamilyID=BAA3AD86-BFC1-4BD4-9812-D9E710D44F42&displaylang=enhttp://www.microsoft.com/downloads/details.aspx?FamilyID=BAA3AD86-BFC1-4BD4-9812-D9E710D44F42&displaylang=enhttp://www.marclenferna.com/blog/archive/2009/04/25/how-to.-use-the-data-view-web-part-for-advanced.aspxhttp://www.marclenferna.com/blog/archive/2009/04/25/how-to.-use-the-data-view-web-part-for-advanced.aspxhttp://www.marclenferna.com/blog/archive/2009/04/25/how-to.-use-the-data-view-web-part-for-advanced.aspxhttp://msdn.microsoft.com/en-us/library/dd583143(office.11).aspxhttp://msdn.microsoft.com/en-us/library/dd583143(office.11).aspxhttp://msdn.microsoft.com/en-us/library/dd583143(office.11).aspxhttp://msdn.microsoft.com/en-us/library/dd583143(office.11).aspxhttp://www.w3schools.com/http://msdn.microsoft.com/en-us/library/dd588092(office.11).aspxhttp://www.microsoft.com/downloads/details.aspx?FamilyID=BAA3AD86-BFC1-4BD4-9812-D9E710D44F42&displaylang=enhttp://www.microsoft.com/downloads/details.aspx?FamilyID=BAA3AD86-BFC1-4BD4-9812-D9E710D44F42&displaylang=enhttp://www.microsoft.com/downloads/details.aspx?FamilyID=BAA3AD86-BFC1-4BD4-9812-D9E710D44F42&displaylang=enhttp://www.microsoft.com/downloads/details.aspx?FamilyID=BAA3AD86-BFC1-4BD4-9812-D9E710D44F42&displaylang=enhttp://msdn.microsoft.com/en-us/library/dd588092(office.11).aspxhttp://www.w3schools.com/http://msdn.microsoft.com/en-us/library/dd583143(office.11).aspxhttp://msdn.microsoft.com/en-us/library/dd583143(office.11).aspxhttp://msdn.microsoft.com/en-us/library/dd583143(office.11).aspxhttp://www.marclenferna.com/blog/archive/2009/04/25/how-to.-use-the-data-view-web-part-for-advanced.aspxhttp://www.marclenferna.com/blog/archive/2009/04/25/how-to.-use-the-data-view-web-part-for-advanced.aspxhttp://www.marclenferna.com/blog/archive/2009/04/25/how-to.-use-the-data-view-web-part-for-advanced.aspxhttp://www.microsoft.com/downloads/details.aspx?FamilyID=BAA3AD86-BFC1-4BD4-9812-D9E710D44F42&displaylang=en


2/8


Page 2of 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-basedemail address of the user as the username.

o Username: enter the login name of a valid user. (i.e. [email protected])

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 (Websitetab) and choose SharePoint Contentfrom the Newsubmenu that pops up. The new web page will host the data view

web part that will be used in this project.


3/8


Page 3of 8

Create a New Web Page

Step 1. Locate the Websitetab 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 Newsubmenu and click on SharePointContent.

Step 3. From the Pagetab of the Newdialog box, choose CreatefromMasterPage.Step 4. Click OK.

Screenshot 3: Create a new SharePoint web page from an existin g mast er page.

Step 5. Select the DefaultMasterPageoption and click OK.

a. SP Designer will spend a few seconds to load thereference script in the HTML to the master page.


4/8


Page 4of 8

Screenshot 4: Wait for SPD to bui ld the web page and l ink it to th e chosen m aster page.

Add the Content Placeholder Control and a Webpart Zone

Background

Informat ion

HTML web pages require a and a 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 consideredthe common pieces for all pages referencing the master page.

Step 6. Locate and click the Codetab near the bottom of the new web page editor window.

Step 7. Type in the asp:Contentcontrol element code into the web page as shown in Screenshot 5. A valid

ContentPlaceHolderIDmust be assigned to the asp-Content control. The IDvalue can be anything, but should be unique

any other control ID that may be contained in the final web page.

Screenshot 5: Add an asp:Con tent 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

Screenshot 5shows how to link the content that will be displayed within the body of the final web page.

Step 8. Switch the editor window from Codeview to Designview.

Once in Designview, the new asp-Contentcontrol should be selected. The design of the master page selected in Step5is also display

o help visualize this web pages design, as it would look in the SharePoint website.


5/8


Page 5of 8

Step 9. Add a new Web Part Zone: From the Insert>> SharePoint Controlsmenu, 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 Insertmenu, move

the mouse over the

SharePointControls

submenu and click on Web

PartZone.

Screenshot 6: Ad d 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 o

XML and follow a specific schema designed to communicate with SharePoint.CAMLstatements are similar to SQL queries in meaning, bu

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

Select By Two Field Names

Approved

My Title

Select By Field Name

My Title

Select By Three or More Field Names

Approved

My Title

Document
http://msdn.microsoft.com/en-us/library/dd588092(office.11).aspxhttp://msdn.microsoft.com/en-us/library/dd588092(office.11).aspxhttp://msdn.microsoft.com/en-us/library/dd588092(office.11).aspxhttp://msdn.microsoft.com/en-us/library/dd588092(office.11).aspx


6/8


Page 6of 8

Add the Data View Webpart to the Web Part Zone

Be sure the new webpart zone is

selected.

From the Insertmenu, move the

mouse over the SharePoint

Controlssubmenu 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 add ing the new Data View Webp art

Select the DVWP Data Source

Step 10. Click on the link provided by the Data View Webpartthat was added to the webpart zone. The Data Source Librarypanel w

display on the right.

Screenshot 8: Select the data sour ce for the new data view webpart

Click the link in the newDVWP to select thedata source.


7/8


Page 7of 8

Step 1. Choose one of the lists or libraries available in the Data Source Librarypanel.

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 Asmenu (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: Cl ick the smal l white tag (arrow) on the top-r igh t 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 EditColumns, Filter, Paging, and Parameters.

Screenshot 9: Choose Show

Data from th e selected data

source.

Screenshot 10: Select the

f ie lds to sho w and cl ick

Mult iple Item View from the

Insert Selected Fields As...

menu.


8/8

Working with Data View Webparts.pdf

Documents

Transcript of Working with Data View Webparts.pdf