Up until this point, I’ve been building on webpart development by adding features to the helloWorld webpart. I started by showing you how to create a web part step-by-step in one of my first posts HelloWorld WebPart (From Start to Finish). I followed that with Creating WebPart Verbs. Next, I showed you how to add properties to your webpart in WebPart Properties and WebPart Properties Part 2: EditorPart. Now, I’m going to show you how to connect two webparts for the purpose of sharing data.
I’m going to modify our good old helloWorld webpart again. Last time, I showed you how to create a dropdown list, in the webpart’s editorPart, that contained text that was assigned to the webpart’s label. This time, we’re going to create a second webpart that will contain a dropdown with a list of messages. The helloWorld webpart will connect to the new webpart and display the selected text.
Here’s a list of everything that we’ll need to do to make two webparts talk to eachother:
- Create an interface
- Create a webpart that implements the interface
- Add a public function that returns your interface
- Add a method to your helloWorld webpart that will get your connection
Sounds simple. Let’s get started.
First, we’re going to create our interface. To do this, just add a new class item to your project, and replace “class” with interface. Below is an image of my interface. You’ll also need to add an empty property.
Ok, step one is done. Step two, create a webpart that will provide data. As you can see in the next image, I created a new class called MessageProvider that inherits WebPart and implements IMessages (I should’ve made this IMessage instead of IMessages, oops). You’ll also see that a dropdown is going to be created. The dropdown will contain the same values as the dropdown found in the editorPart created in a previous post.
Override the CreateChildControls method and create your dropdown. I cheated this time and hardcoded all of my values.
Now we need to setup the required property. I say required because we’re implementing an interface and the property in the interface is mandatory. If you attempt to compile your code without adding the Message property, Visual Studio will get mad. So, here’s my Message property in the MessageProvider class. This code will just check that something other than “-Select-” is chosen and assigns it to Message.
The last thing we need to do to this class is step 3: Add a public function that returns your interface. Take a look at the first line. You’ll see that we’re making this a ConnectionProvider. The string parameter is a display name. When you attempt to connect to this provider, it will be identified as “Messages Provider”.
Now we’re at the final step. We need to modify helloWorld to accept a connection. First, we’re going to add an instance variable. Add the following to your webpart’s list of instance variables: private IMessages provider = null;
Now we’ll add our method. In the following image, you’ll see the new method. GetConnectionProviderInterface accepts 1 parameter of type IMessages. We’re going to assign the value of that parameter to our provider instance variable. This will give us a way to access the public property that we created in the MessageProvider webpart. Again, notice that I have a little extra above the method. This time, you’ll see ConnectionConsumer and the string is again a display name.
Now that we have an object that can give us the value of the MessageProvider’s properties, we’ll need to modify the helloWorld webpart’s CreateChildControls method to use the value. You’ll see the following code checks that the provider object isn’t null then assigns the value to the label control.
Now, deploy the webparts and you’ll be ready to connect them. As you can see in the images below, the menu contains a new item called “Connections”. This option is only available when the page is in edit mode. So, click on Site Actions > Edit Page. View the menu for either webpart. They’ll both have a Connection item but the Provider webpart will have a “Send” followed by the display name that we gave the ConnectionProvider and the Consumer webpart (helloWorld) will have a “Get” followed by the display name that was givent to the ConnectionConsumer. Select the appropriate item in either menu. You only have to set the connection on one webpart.
Now that the webparts are connected, you can select an item from the dropdown and the selected item’s text will appear as the text in the helloWorld label control.