| DashboardSeries |
| How to integrate web parts using query string methods |
Introduction
This series of postings explores building dashboards for SharePoint Server 2010 using SharePoint Designer 2010. Over the course of these postings, we'll explore:
- Some common web parts for displaying data
- Using Query string and other methods for integrating and filtering data
- Editing XML in order to customize web part data displays
- Using PowerShell-based methods to analyze data
- Cross-site data integration using web services
To engage these explorations, we'll be using
SharePointBits' Northwind Trader sample database installed to a two-tier SharePoint Server 2010 Enterprise development environment on VMware Workstation. The database schema for the Northwind Trader database is shown below.
In this posting, we'll explore how to integrate web parts using query string methods. In this posting, we'll create two pages, a master page and a detail page, and then develop and configure these so that a user clicking on a hyperlink in the master page will be navigated to a detail page displaying additional data pertaining to the item clicked. We'll be exploring two approaches to accomplishing this objective: one using the XSLT List View web part and the other using the Data View web part.
Step 1: Add pages
Connect to the site. From the browser, create two new pages. For this posting, these will be named
ProductMaster and
ProductDetail. These can be wiki pages or web part pages.
Step 2: Build Product Detail Page
Launch SharePoint Designer 2010. Connect to the site, and then checkout and open the
ProductDetail.aspx page for editing. Select the
Insert ribbon, point to the
Display Item Form button, click it, and then select the
Products list.
A display form connected to the Products list will appear. Select the
Options ribbon, and then point to the
Add/Remove Columns button.
Click this button. The
Add/Remove Columns dialog appears. Using this dialog, add, remove and arrange columns as desired. For this posting, the columns and arrangement selected are shown below:
Some of these new fields will appear in their raw form. This can be fixed by reformatting. To do this, right-click anywhere on one of these fields, point to
Format Item as, and then point to
Label.
Click this option. Repeat this process for any other fields that display in their raw format. Once completed, the Data Display Form will appear more readable.
Select the
Options ribbon, and then point to the
Parameters button.
Click it. Then configure the parameters as shown below. Note that the query sting variable can have any name and that any default value can be used.
The data displayed in the Data Form will immediately update to show the default. Now click the
Filter button on the
Options tab. The
Filter Criteria dialog appears. On this dialog, configure it as needed to associate the list item ID with the query string variable created previously.
Open a browser and navigate to the ProductDetail.aspx page. The default list item data is shown.
As a test, manually add the query string variable to the URL and set it to any value. The display form should update to the appropriate data.
In SharePoint Designer 2010, close the
ProductDetail.aspx page, and check it back in.
Step 3: Build and Configure the Product Master page using the XSLT web part
The product listing can be developed in two ways: either using the
XSLT List View web part or the
Data View web part. The first approach will be explored next. Now, in SharePoint Designer 2010, checkout and then open
ProductMaster.aspx.
Select the
Insert ribbon, click on
Data View, and then point to
Products.
Click this item. This inserts an XSLT List View web part. To verify this is so, view the tab just above the web part. Thus, straightforwardly selecting and inserting a list from the
Data View button in fact inserts and XSLT web part.
On the
Options ribbon, click the
Add/Remove Columns button. The Displayed Fields dialog appears. Configure this dialog as shown below.
The list view web part is immediately updated as shown below.
The approach here will be to format the Product Name as a query string hyperlink pointing to the ProductDetail.aspx page. At present, if you attempted to edit the XSL directly to format a column value as a query string hyperlink, you would not be able to find a convenient reference to the Product name field. To expose this field, select a value in the Product Name column, right-click it, point to
Format Item as, then point to
Hyperlink to, and then point to
New Item Form, like so:
Click this selection. Choose the
Split view to see both the WYSIWIG and code views simultaneously. The hyperlink and a field reference can now be seen:
Edit the highlighted XSLT as shown.
Save the file (but don't check it back in just yet). Then open a browser and point it to the ProductMaster.aspx page. Hover the cursor over any item in the Product Name column, while viewing the browser status bar. Note the URL query string value.
This concludes the XSLT list view approach. Next, we'll explore the Data View approach.
Step 4: Build and Configure the Product Master page using the Data View web part
In SharePoint Designer 2010, with the ProductMaster.aspx page still being edit, delete the XSLT web part. Then, from the
Insert ribbon, click on the
Data View button, and then point to
Empty Data View.
Click this selection. And empty Data View web part is displayed on the page.
Click on the Data View where it states,
Click here to select a data source. The Data Sources Picker appears.
Select the
Products item, and then click
OK. The
Data Source Details task pane appears at right. Select the four fields as used previously, when inserting and configuring the XSLT list view web part: ID, Product Name, Supplier and Category.
Either drag and drop these fields onto the Data View or click the button above,
Insert Selected Fields as... . As previously, some of the fields will not display user-readable text and you will need to reformat these as done previously.
Once completed, the list will appear similar to what was obtained previously using the XSLT approach.
Now, select the value displayed in the Product Name column. Then, on the
Insert ribbon, click the
Hyperlink button. The
Insert Hyperlink dialog appears. In this dialog, navigate to the ProductDetail.aspx page, and then add the query string parameter as shown below:
Click
OK, and then save the file (but don't check it back in just yet). Open a browser and navigate to the ProductMaster.aspx page. Be sure to login under the same account used to connect to the site through SharePoint Designer 2010 (or otherwise you will not be able to see the page modifications until after they are checked in). The list will be displayed. Hover the cursor over any hyperlink in the Product name column to see its URL.
Note the subtle differences between the XSLT List View web part display and the Data View web part display of the same list. Additional discussion on these differences is provided by Laura Rogers in
SharePoint 2010 Data View and XSLT List View.
Summary
In this posting, we have explored how to integrate web parts using query string methods. We created a master page displaying a list of hyperlinks that connected to a details page displaying additional information associated with the item clicked. The three web parts explored were: XSLT List View, Data View and Data Form. We also explored how to modify the underlying XSL in order to create the query string hyperlinks. For additional information on the topics covered in this posting, see the references below.
In the next posting of this series, we'll explore adding another web part to the Product Detail page that also obtains its filter value from the same query string value.
References
Notes
- Raymond Mitchell has written an excellent introduction to SharePoint 2007's Data View Web Part (DVWP).
No comments:
Post a Comment