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.
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. 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.
This solution took quite a bit of work to build in MOSS 2007. (See Connecting web parts with a selector and a detail pane: MOSS 2007 version for details.) The whole things is much easier to construct in SharePoint 2010, with only a few required components:
- 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
- SharePoint 2010 web part page
Ready? Let’s start building!
Part 1: Create your SharePoint list
You can’t build a SharePoint mashup without some data. Make sure you have one or more lists created and seeded with test data.
In my case, I built an Issue Tracking list and populated it with some example help desk tickets.
Part 2: Create your web part page
- Click Site Actions > More Options.
- In the left-hand nav bar, click on the Page link to filter by types of pages.
- Select Web Part Page and click the Create button.
- Specify a name for your new page. I named my new page Dashboard.
- Select the formatting/style of web part page you want to use. (This example was built using the “Header, Footer, 3 Columns” web part page.)
- Choose which document library you want the new web part page to be stored in and click Create.
Part 3: Add web parts to your new web part page
- Go to your web part page.
- Click on the Page tab and select Edit Page.
- Find the Left Column of your web part page and click its Add a Web Part link.
- To find your list view web part, click Lists and Libraries from the Categories list on the left-hand side of your screen. Then find/select your web part from the list provided in the center of your screen and click on the Add button.
- Find the Middle Column of your web part page and click its Add a Web Part link. Repeat step 4 above and add a second list view web part to your web part page.
Now you have 2 identical list view web parts displaying on your web part page. Note that from this point on we’ll call the left-hand web part Web Part 1 and the right-hand web part Web Part 2.
Part 4: Configure your web parts
- Click on the black dropdown arrow for Web Part 1 (as shown below). When the web part menu displays, click Edit Web Part.
- When the web part editor configuration box appears, click Edit the current view.
- Configure your web part, selecting the field(s) you want to display, the sort order, the filters to apply, etc. Press OK to save your changes.
- Go back into the web part edit screen and make any other desired changes (e.g. change the web part title, the chrome state, the toolbar type, etc.).
- Repeat steps 1-4 for Web Part 2.
Part 5: Connect your web parts
- Click on the black dropdown arrow for Web Part 1 (as shown below). When the web part menu displays, click Connections > Send Row of Data to > Name of your second web part.
- 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 step.)
- When the “choose connection” dialog box appears, set the Connection Type to Get Filter Values From and click on the Configure button.
- When the “configure connection” dialog box appears, select the fields you are using to sync your two web parts. (In my case, I’m using the Title column to sync my web parts so I selected Title in both the provider & consumer field name drop downs.)
- Click Finish to save your connection settings.
- You will be prompted to confirm that you want to sync on that column in both lists. Click Next again to confirm.
Congratulations! You have just synced your web parts. If you stop editing your page and 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 6: Make Web Part 2 display as “blank” until an item in Web Part 1 is selected
In MOSS 2007, this step was a doozy–complete with required setup of a data view web part, parameters, web part properties, etc. Fortunately, Microsoft has made this step quite easy for us in SharePoint 2010. Check it out:
- Click on the black dropdown arrow for Web Part 1 (as shown below). When the web part menu displays, select Edit Web Part.
- Open the Miscellaneous tab and de-select the “Send first row to connected Web Parts when page loads” option.
- Click OK to save your changes.
That’s it! We now have a web part page with 2 connected web parts. When a selection is made in the left-hand web part, the corresponding list item details will display in the right-hand web part. If nothing is selected, the right-hand web part will remain blank.
Here’s what my final web part page looks like:
But remember, this is only the beginning! Think of how else you can bling out your web part page using data view web parts, conditional formatting, etc.