Using Web Part Connections to build a Master/Detail View

One of the great new features part of SharePoint v2 is this thing called "Web Part Connections", which allows you to easily have Web Parts communicate with each other, thus adding a level of interactivity to your web applications. In a way, you can think of connections is as a data-driven hyperlink, i.e. clicking the hyperlink will push some data to the second part, which can then consume that data. The most common Connection scenario is to use one part to filter another other one, e.g. imagine having a "master" view, where you can drill from each item to a detail view.

Quick Example: Let's look at what's involved building a master/detail view of a products table. In this example, I'll use Data Views for both my master and detail view, but it should be noted that you can connect different types of parts together too!

Step 1: The first step is to build a simple "master" view showing all the records in my products list

Step 2: Next, on the same page, let's build a "detail" view that shows a single item from the Products list, but with more detail.

Step 3: Once you have your views setup, you can quickly create a connection so that clicking an item in the master will cause the detail view to be filtered to the same item. To do this, right-click the field you want the connection hyperlink on, and choose the "Web Part Connections..." context menu item. This will bring up the Connections wizard.

When setting up a connection, it's easiest to think of the two parts as source and target. The first step is to choose what you want from the source part. 99.9999% of the time, you simply want to grab some values from the source part and pass them along - this is the default option, so you can just click next.

On the next page of the wizard, you get to choose which part to connect to. In the case of this master/detail scenario, I have the "detail" part on the same page, so I can click next again.

Here, we choose the specific part and what we want to do to that part. The default behavior is to filter the target part, which for our scenario is the desired behavior.

The last piece of information required is to choose what field the target part should be filtered to from the source part. Since both parts in this case are on the same list, we can use the ID field, since that is guaranteed to be unique.

That's it! You can now click through and complete the wizard. After you hit "Finish", you'll notice that there is a hyperlink on the original field you selected. 

If you browse the page, you'll notice that clicking the hyperlink in the "master" view will cause the "detail" view to filter to the correct item. Sweet :)

Comments

• Anonymous
  June 02, 2006
  In my previous post, I talked about how Web Part Connections can be used to pass data between Web Parts....