Connected Web Parts in SharePoint 2010 - an Architectural Framework

Posted by: Mark Kendall , on 3/31/2011, in Category SharePoint
Views: 84342
Abstract: Creating an Enterprise Portal in SharePoint 2010 can be daunting task when you are using custom Web parts in just about all cases and you want to be able to communicate with the other web parts via some sort of custom navigation system. In this article, we will rely on our experience as a team, who has actually implemented a successful connected Webparts Enterprise Portal, and hope that it will help you implement your own version.

This article has been co-authored by Lavanya Kammari (Main Author), Nataraj Yadavalli (Main Author) and Mark Kendall.

Creating an Enterprise Portal can be a daunting task when you are using custom Webparts in just about all cases and you want to be able to communicate with the other web parts, via some sort of custom navigation system. Microsoft has done a good job creating the framework, but not so good of a job explaining how to use the connected Webpart Framework. See this article for a brief overview. http://msdn.microsoft.com/en-us/library/ms469765.aspx.

In this article, we will rely on our experience as a team, who has actually implemented a successful connected Webparts Enterprise Portal, and hope that it will help you implement your own version.

The main advantage of connected Webparts is to exchange data between web parts at run time. For this, we should have at least two web parts one for provider and the other for consumer. Provider web part will pass data to the consumer web part. Here we will explain the required steps to create connectable web parts in Visual Studio 2010 using Visual Webpart template.

Basic Steps

Creating the web part connection interface.

  1. Creating a Web Part by using the Visual Studio Visual Web Part item template.
  2. Creating a provider Web Part that defines a string.
  3. Creating a consumer Web Part that uses and displays the string.
  4. Creating a Web Part page and connecting the provider and consumer Web Parts.
  5. Adding code-behind in Visual Web Parts to handle post back properly

Before we begin with our steps, let’s start by creating an empty solution which will be used later in our steps.

empty-sharepoint-solution

sharepoint-wizard

Step 1: Creating the web part connection interface:

SharePoint uses an interface to communicate/ exchange data between the web parts. Now we will create an interface called ‘iConnectableNavigation’, which has a method to get the selected Category.

Right click on your solution and Click ‘Add new item’ and select ‘Interface’ to create an interface.

sharepoint-new-interface

Once you have created ‘iConnectableNavigation’ interface, add the following code.

iconnectable-interface

Step 2: Creating a Web Part by using the Visual Studio Visual Web Part item template -

In Visual Studio 2010, you can create two types of Web Parts. The first type, Visual web part, creates a user control and deploys this in content Template. Here all controls can be created using the design mode. The other one is a default web part, which inherits from ‘System.Web.UI.WebControls.WebParts’ namespace. Here you have to define all the controls in code behind.

In this article, we are creating ‘Visual Web Parts’ for both provider and consumer.

Step 3: Creating a provider Web Part that defines a string:

Now we create a provider visual web part, which has a drop down of Categories. When user selects an item from the drop down, that value will be provided as string for other webparts which are consumers.

To create a provider web part, right click on the solution and select add a new item. Select “Visual Web Part” template and Name it as “CategoryNavigationWP”. Once you click “Add”, all the required files are created for you.

visual-web-part

connected-web-parts

 

Now open CategoryNavigationWPUserControl.ascx file and add the dropdown and all necessary code.

Add a public method called GetCategoryType which returns the selected drop down item text.

get-category-type

 

Now Open CategoryNavigationWP.cs file and update code as shown below.

category-navigationwp

Note the Attribute on the GetProvider Method. This Attribute must be placed on all webparts that implement the interface. It’s name can be anything you want- in this example Category Provider.

Step 4: Creating a consumer Web Part that uses and displays the string.

Follow the same steps as in Provider web part and create a Visual Web part called ‘CategoryResultsWP’ as a consumer web part and update code as shown below.

visual-web-part1

category-results-wp

category-results-wp1

Step 5: Creating a Web Part page and connecting the provider and consumer Web Parts.

Once you add all your code, compile and deploy your solution to SharePoint site.

Now go to your site page and edit to add the web parts. Once you add your web parts and connected your web parts as shown below, it is time for testing. (Or you can add a new Webparts page)

Two new Webparts will appear in your custom section when you click Add Webpart: Place them on the page as shown below: When you have both of the Webparts on the Webparts page, click on the dropdown on the CategoryResultsWP and select connection. Get category results from, CategoryNavigationWP and the connection will be established. Now you can select from the dropdown and get the results that you would expect. (See screenshots below)

CategoryNavigationWP

add-navigation-webpart

CategoryResultsWP

add-results-webpart

webpart-saveclose

When you are done, you will end up with 2 webparts on a webparts page that will communicate with each other as you make click on the dropdowns. You can have as many webparts as you want on a webparts page that communicate with each other, as long as you implement the correct interfaces- as this article explains.

webpart-communication

multiple-webpart-communication

Step 6: Adding code-behind in Visual Web Parts to handle post back properly.

There are a couple of points to note when you are trying to use connected web parts with Post back.

  • It is always better to call “EnsureChildControls” in Web part OnInit overload method. OnInit method will make sure your view state is loaded at time of control initialization.
  • Call your user control method during the OnPreRender method overload. When you have complex controls or multiple controls to load, it is always better to call during the Pre Render instead of Render Contents method.

Summary:

Congratulation, you’re on your way to creating a framework for your next Enterprise SharePoint rollout which will enable you to connect to all of your web parts on a typical web parts page.

The entire source code of this article can be downloaded over here

Note: After downloading the source code, when you open the VS 2010 project, you must set the SharePoint URL as shown below- right mouse click on ConnectedWebParts and select properties:

set-sharepoint-url

Give a +1 to this article if you think it was well written. Thanks!
Recommended Articles
Mark Kendall is a Software Engineer working in the Oil Industry in Dallas,Texas. He has been a programmer/developer for past 15 years specializing in .NET/C# development. Currently, he is a Sharepoint/Silverlight developer specializing in BCS Services. He has published a book on Dotnetnuke, and written several articles on many .net subjects. Apart from his passion for making money writing software to improve business, Mark enjoys ranting-and-raving about current events and taking long runs on the beach. He blogs at kendallsoft and can be reached at Kendallsoft[attherate]hotmail[dot]com


Page copy protected against web site content infringement by Copyscape


User Feedback
Comment posted by Venkat on Thursday, March 31, 2011 8:07 AM
Nice article, i am new to Sharepoint 2010. I am looking for the same article in the net. Finally got it.
All the best.
Comment posted by pragnell on Saturday, April 2, 2011 8:59 PM
Great article overall! Will this work for MOSS too?
Comment posted by Anoob on Wednesday, July 27, 2011 6:40 AM
i have implemented a connection web part and deployed it in my web but it is not have that connection menu item,as well as i downloaded your code and deployed and is also not showing the connections in the edit web part context menu

  
Comment posted by Sachin on Thursday, August 18, 2011 12:58 AM
I did download your code and deployed as indicated by the connections option is now showing on the webpart properties/edit webpart context menu in sharepoint 2010
Comment posted by Sachin on Thursday, August 18, 2011 1:24 AM
I did download your code and deployed as indicated by the connections option is now showing on the webpart properties/edit webpart context menu in sharepoint 2010
Comment posted by MichaelN on Wednesday, September 14, 2011 1:19 PM
Works great, huge help!  This the only walkthrough I've found that covers every aspect of connecting Visual Web Parts.  For those trying to wrap your head around Visual Web Parts, this article is another must-read: http://www.geektrainer.com/Blog/post/Adding-Properties-to-Visual-Web-Parts.aspx
Comment posted by Karim on Friday, December 16, 2011 7:39 AM
Hi
I'm trying to add a Button to the consumer webpart. When this button is clicked I want to use data from the provider. But for some reason when I click the button in the myButton_Click method the object DataRow is allways null. It seems to me as if the webpart is loaded again but the provider is not called this time. Do you have an Idea how this can be done?

I Posted my entire Code here http://stackoverflow.com/questions/8527002/how-to-use-data-from-a-iwebpartrow-connection-when-button-is-clicked-provider-i
Comment posted by Karim on Friday, December 16, 2011 7:55 AM
Hi
I'm trying to add a Button to the consumer webpart. When this button is clicked I want to use data from the provider. But for some reason when I click the button in the myButton_Click method the object DataRow is allways null. It seems to me as if the webpart is loaded again but the provider is not called this time. Do you have an Idea how this can be done?

I Posted my entire Code here http://stackoverflow.com/questions/8527002/how-to-use-data-from-a-iwebpartrow-connection-when-button-is-clicked-provider-i
Comment posted by Pat on Thursday, December 29, 2011 3:23 PM
Great article! I've been trying to find a tutorial and sample code for literally days that would show me how to do exactly what you've done. Thanks so very much!
Comment posted by Paul on Wednesday, June 13, 2012 4:10 AM
Looking at your code, I seem to be stuck like Karim is. Karim if you worked it out, please let me know.

Any postbacks on the consumer visual webpart will not have access to the provider, as it is fired later in the stack. So how do I get around this problem? If I wanted to make your grid sortable or filterable, it would post back, but because the provider hasn't given a value at that point, the grid would display empty.
Comment posted by Rameshbabu.C on Thursday, June 21, 2012 9:46 AM
Nice Article
Comment posted by Ajay on Tuesday, July 10, 2012 4:09 AM
nice article
Comment posted by Abhishek on Thursday, September 13, 2012 4:31 AM
Nice Article man...... Great job...
Comment posted by Sathya.S on Tuesday, January 15, 2013 2:30 AM
very useful article to the begineers.Thank you
Comment posted by Michael on Thursday, March 21, 2013 9:04 AM
Hi i am using sharepoint 2013, When i added a webpart CategoryNavigationWP but i cannot find CategoryNavigationWP.cs and i cannot find _ascxpath . Could you please update as sharepoint 2013 solution ?
Sorry I am a beginner.
Comment posted by Anju on Thursday, March 28, 2013 12:41 AM
Very good article for beginers
Comment posted by Daniyal on Friday, May 3, 2013 1:04 AM
I think you forget to write about adding grid and it datasource in the above article.
Comment posted by JowMama on Thursday, June 20, 2013 2:26 PM
Scum bags
Comment posted by samiNet on Monday, July 22, 2013 7:59 AM
think you for your post,
but my question is: should i create the two web part in the same web page?
if yes, how can i do if i have the web part in different web page?
thinks
Comment posted by Navneet Singh on Saturday, August 17, 2013 3:21 AM
I want to link one page to another page using visual web part,it is possible..? if possible than how...plz help me i need your help
Comment posted by Navneet Singh on Saturday, August 17, 2013 7:28 AM
I want to link one page to another page using visual web part,it is possible..? if possible than how...plz help me i need your help
Comment posted by Garima on Thursday, March 20, 2014 12:34 AM
some code are missing please update missing code
Comment posted by kungmidas on Wednesday, May 7, 2014 4:02 AM
Very good article, thank you! (There is no code missing.)
Comment posted by Manoj B. Kalla on Friday, June 13, 2014 3:37 AM
Dear Mark Kendall,

You had written this article very good, My suggestion is, in some where you to describe little more likewise between two images.
In CategoryResultsWP webparts you forget to show to use SYSTEM.COLLECTION namespace.
Comment posted by Dear Mark Kendall, on Friday, June 13, 2014 3:40 AM
Another I got,
you forget to shown MAKINGGRIDEMPTY method in images.

Please, do the needful.

Thank You.

Post your comment
Name:  
E-mail: (Will not be displayed)
Comment:
Insert Cancel