Connectable web parts in MOSS / SharePoint 2010

Well I thought for a while and saw that we have still not covered a basic topic that is how to connect two different custom web parts with custom properties.

So here we are explaining you how to connect two web parts.

In web part connection we have two types of web part. One is the provider web part and the other is consumer web part.

Provider web part sends a property which is received by the consumer web part and then processed in a code.

Create new empty project give it a name connectabewebpart.

Add as a farm solution and then click on add item. Point to an Interface.

We need to add interface as this interface will be implemented by provider web part. We have to define all the properties in this interface which we want provider web part to be able to send to consumer web part.

I am going to have one single property called OrderNumber just for demonstration purpose.

Define an interface like this. We are declaring one property called OrderNumber.

Now we are going to add new item to the project and select type web part and call it OrderNumberProviderWebPart.

Now this web part class must implement interface that we defined. So let’s implement this interface in provider class.

Now because we implemented interface, we need to define property which is declared in the interface.

So we have defined local variable and public property with the same name. Plus we have decorated that property with several attribute so that we can set the property with editor pane when we edit the web part. The property is set to have shared behavior.

Then we have defined one very important method which returns the interface and able to pass on this property which we defined as connection provider attribute of the method.

So here is a complete code for connection provider web part.

Now we are going to add consumer web part. So add new item, add web part. Call it OrderNumberConsumerWebPart. Now this web part will not implement interface. We need to declare a local variable which will receive the order number from provider.

So we’ve added a local variable called providedordernumber.

We need to define a method which has connectionconsumer attribute with property name that is defined in an interface. Parameter will be an interface which has that property that can be set to a local variable.

And then in create child control method we are showing the provided order number. Here is a code.

We are done with creating both web parts. It’s time to deploy them and check how they work.

I have deployed both web parts and I am on a page where I want to add them. Click to add web part. 

Go to custom tab and you’ll find both web parts there. Add them wherever you want on a page.

Now we have something like this.

Edit the provider web part and set order number in editor part.

Now we need to send this order number to consumer web part. Either you can send from provider to consumer or you can receive from provider in consumer. Both way works.

Once you set that you are done with connecting two web parts.