Wednesday, September 18, 2013

How to integrate web parts using querystring methods

How to integrate web parts using query string methods

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.


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.

  • Raymond Mitchell has written an excellent introduction to SharePoint 2007's Data View Web Part (DVWP).

No comments: