I measure my SharePoint progress by the exciting moments when I finally figure out how to make something work. And I felt like a SharePoint superhero when I discovered how cool (and easy) it was to connect web parts on a web part page.

This blog posts explains how to connect list view web parts. But it goes a step farther, showing how you can build a list view selector that works just like the reading pane in Outlook. So when you select a list item, the corresponding item details will display in a detail pane. If no item is selected, the detail pane remains blank.

Business scenario:

We use a SharePoint list to store help desk support requests. All SharePoint users have the ability to go to this list and add their support request as a new item. Once they submit their request, the support reps take over ownership of the list item. Support reps, help desk customers and their managers need to be able to look at existing help desk tickets, however. There are a variety of ways to search on help desk tickets (by ticket number, by requestor, etc.), but one of our teams wanted an easy selector screen to see help desk ticket details. To support this request, we built a web part page with connected list view web parts. Here’s what the basic solution looks like:

When you click on the radio button next to a help desk ticket in Web Part 1, the corresponding help desk ticket details display in Web Part 2. Here’s what the page looks like when issue ID #1 is selected:

Neat! Now I want to take this one step farther…I want Web Part 2 to appear blank (without any issue details displaying) until a help desk ticket is selected in Web Part 1. Sound useful? If so, keep reading for details on how to build this out.

Solution:

While this solution can be built out in MOSS 2007 and in SharePoint 2010, the MOSS version does require a bit more leg work. Here are the MOSS 2007 components you’ll need:

• SharePoint list (can be virtually any type of list, but this example was built with an Issue Tracking list)
• Out-of-the-box list view web parts
• MOSS 2007 web part page
• SharePoint Designer 2007 (required to set up/configure parameters for passing data)

Ready? Let’s start building!

Part 1: Set up your web part page with connected list view web parts

1. Create the list that will hold the data you want to connect/display.
2. Create your web part page by going to Site Actions > Create> Web Part Page.
3. Select the formatting/style of web part page you want to use. (If you’re unsure which format to use, try the “Header, Footer, 3 Columns” web part page. This is the format I used for this example.)
4. When your new web part page appears, click on Add a Web Part button in the Left Column.
   
5. Select the list you created in step 1 above and click Add. You’ve now added Web Part 1 to your page.
6. Now click the Add a Web Part button in the Right Column.
7. Select the list you created in step 1 again and click Add. You’ve now added Web Part 2 to your page.
8. Now it’s time to go into each list view web part and select the columns/fields you want to display in that web part. Click on the edit menu for Web Part 1 and select Modify Shared Web Part.
   
9. When the web part config panel displays, click Edit the current view.
10. Select the field(s) you want to display in Web Part 1. As you can see in my example, I opted to display my ID and Title fields in Web Part 1 and Title, Priority, Category, Assigned To, Due Date, Created and Created By fields in Web Part 2. Note that you must have at least one column that displays in BOTH web parts. This will be your “syncing” column.
11. When you’ve finished making all your changes, click OK.
12. For best visibility, also change the Toolbar Type setting. Go to Modify Shared Web Part and set the Toolbar Type dropdown field to “No Toolbar.”
13. Repeat steps 8-12 for Web Part 2.
14. Click on the edit menu for Web Part 1 and select Connections > Provide row to > Name of Web Part 2.
    
15. If you have pop-ups enabled, a connection dialog box will display. If you don’t have pop-ups enabled, enable them and repeat this last step.
16. A connection configuration pop-up box will display. Click on the Column dropdown field and select the field you want to use to sync your web parts. Note that the field you choose MUST display on both of your web parts. In my example, I am using the Title field.
    
17. Click Next.
18. Click Next again.
19. Click Exit Edit Mode to stop editing your page. (If you can’t find the Exit Edit Mode link, look right under your Site Actions button.)

Congratulations! You have just synced your web parts. Now when you select an item from Web Part 1, the corresponding record will display in Web Part 2.

Here’s what my web part page looks like after finishing these steps:

Part 2: Make Web Part 2 display as “blank” until an item in Web Part 1 is selected

To make this happen, we need to pass data between the two web parts via parameters (instead of the “get filter from” connection option). In other words, we’ll force Web Part 1 to send its selected row of data to a data view parameter we’ll create for Web Part 2. We’ll also add a filter to Web Part 2 so it only shows data when Web Part 1  has a selected value. When your page loads, SharePoint will automatically filter out all the records in Web Part 2 since no record will have been selected in Web Part 1 yet. Sound complicated? It is. But don’t worry, the steps are all outlined below. Please pay close attention to the sequence of steps, however. All steps must be followed in the order outlined or the parameters and filter will not work correctly.

1. Open your web part page in SharePoint Designer 2007.
2. Highlight the web part that you want to display with zero results on initial page load. (In this case, that’s Web Part 2.)
3. Right-click the highlighted web part and select Convert to XSLT Data view. You’ll be prompted to convert that you want to make this change. Say OK.
4. Give your page a minute to refresh. You’ll notice a subtle change in the formatting of Web Part 2. It has now been converted into a data view web part.
5. Click in the upper right-hand corner of your new data view web part and find the  > smart tag for the web part. (shown below)
   
6. Click the > smart tag (aka chevron) and select the Parameters… option.
7. Click on the New Parameter button.
8. Specify a name for your new parameter. You can use whatever name you like; just make sure the name is something you’ll remember (for at least the next few minutes) and make sure the name doesn’t contain spaces.
9. Keep all parameter defaults and click OK. The parameters screen should look roughly as follows:
   
10. You’ll be returned to your data view web part. Click on the > chevron and select Filter.
11. You want to set up a new filter rule that says Field = New parameter, where “Field” is the column you used to sync your connected web parts in Part 1 above and “New parameter” is the parameter you named in step 6. You will pick your field name and your parameter from the dropdowns provided. (Note that your new parameter will appear near the bottom of the Value selection list.) The screen shot below shows my completed filter. As you can see, I used the field Title to sync my web parts and I named my new parameter Param1.)
    
12. Click OK to save your new filter.
13. You’ll be returned to your data view web part. Click on the > chevron and select Web Part Connections…
14. When the Web Part Connection Wizard dialogue box opens, reset the action dropdown field to “Get Parameters From” as shown below:
    
15. Click the Next button repeatedly until you get to the screen shown below. When you get to this dialog, select the following options:
    • In the middle row of the left column, select the column you used to sync your web parts. (In my case, this was the Title field.)
    • In the middle row of the right-hand column, select the new parameter you created in step 6. (In my case, this was the Param1 parameter.)
      
16. Click on the Next button.
17. Click Finish to close out the web part connections dialog box.
18. You’ll be returned to your data view web part. Click on the > chevron and select Data View Properties…
19. Go to the General tab and click on the checkbox that says Display text if no matching items are found. In the provided text box, specify the default text you want to display when Web Part 2 is empty. Here’s what my text looks like:
    
20. Click OK to save your changes.
21. Save your web part page in SharePoint Designer. If you are prompted to confirm your changes, say yes.
22. Preview your changes in the browser.

My final solution looks like this:

We’re off to a great start, but there is so much more that you can do. At this point you have Web Part 2 set up as a data view web part (DVWP). Bling out that DVWP to display conditional formatting or to build editable fields right on your web part page. Let your imagination run wild–this is only the beginning!

Epilogue on having a “customized” or “unghosted” page

As you complete the steps outlined above and turn Web Part 2 into a data view web part, you are effectively customizing (or unghosting) your web part page. There is some debate in the community about unghosting pages, with some calling it a bad practice while others say it is called for on some occasions. I’m going to leave that debate up to the experts, but do want to call out that in some situations unghosted web part pages can lead to upgrade difficulties. To avoid this issue, you can export Web Part 2 from its current web part page and import it onto a clean, new web part page. Once you add Web Part 1 to your new web part page you can connect your web parts again. (This time, however, you will have the option of sending your data via parameters.)  Exporting/importing your DVWP won’t affect the functionality of your connected web parts–it will merely ensure that your new (final) web part page won’t be customized or unghosted. Once  you’ve completed this export/import process, you can then go back and delete your initial web part page.

There are some excellent blog posts that outline the steps for exporting/importing data view web parts. Check out http://www.wictorwilen.se/Post/How-to-export-and-reuse-the-Data-View-Web-Part.aspx for step-by-steps.