SharePoint 2010 – Connected WebParts

In this article we can explore Connected Web Parts which is an advance SharePoint Web Part feature. The connected web parts denote communication between 2 web parts.

clip_image002

The connected web part resolves the following requirements:

· Master Web Part and Slave web part data exchange

· Data Selection and Data Display web part communication

Summary of the application is:

· There are 2 web parts

· Web Part 1 has a drop down list for selecting Car

· Web Part 2 displays the car picture based on selection

Steps Involved

Following are the steps involved in creating connected web parts:

1. Create Project

2. Create Communication Interface

3. Create Web Part 1 (Provider) implementing Interface

4. Create Web Part 2 (Consumer)

5. Build and Deploy

Create Project

We can experiment with a Car showcase application where there are 2 web parts.

· The first web part allows selecting a Car from the drop down list.

· The second web part displays the image of the car.

For starting with create a new Web Part project inside Visual Studio.

clip_image004

Remove the default VisualWebPart1 web part. We will be adding our own web parts.

Create Interface

For communication between the 2 web parts we need to create an interface. Please create the following interface, which returns the selected Car name:

public interface ICar

{

string Car { get; }

}

Create Provider Web Part implementing Interface

Now you can create a new web part named CarSelectionWebPart. Expand the webpart item and Inside the User Control (CarSelectionWebPartUserControl.ascx) class file:

1. Add a drop down list control

2. Place the following code

public partial class CarSelectionWebPartUserControl : UserControl

{

protected void Page_Load(object sender, EventArgs e)

{

if (!this.IsPostBack)

{

DropDownList1.Items.Clear();

DropDownList1.Items.Add("Camry");

DropDownList1.Items.Add("Figo");

DropDownList1.Items.Add("Diablo");

}

}

// Property to expose selected car outside

public string Car

{

get;

set;

}

// Set the Car property

protected void Button1_Click(object sender, EventArgs e)

{

if (DropDownList1.SelectedItem != null)

Car = DropDownList1.SelectedItem.Text;

}

}

Inside the CarSelectionWebPart.cs (web part class file) add the following code:

// Property to return the selected Car

public string Car

{

get

{

return (_control as CarSelectionWebPartUserControl).Car;

}

}

// Special Purpose Attribute to denote ICar interface is provided

[ConnectionProvider("Car")]

public ICar GetCar()

{

return this;

}

The ConnectionProvider attribute and the interface of the method denotes that this web part provides data for ICar interface. The Connection Provider also says that the name is Car (in string).

Create Consumer Web Part

Now we can create the consumer web part which will get the selected Car to display the car picture. Add a new web part and name it as CarDisplayWebPart. Place an image control on the user control of the web part. Inside the class view of user control add the following method.

// Set the image to url

public void SetImage(string car)

{

if (car == "Camry")

Image1.ImageUrl = "/_layouts/images/ConnectedWebParts/Camry.png";

else if (car == "Figo")

Image1.ImageUrl = "/_layouts/images/ConnectedWebParts/Figo.png";

else if (car == "Diablo")

Image1.ImageUrl = "/_layouts/images/ConnectedWebParts/Diablo.png";

}

Now add Images Mapped Folder and place 3 image files (Camry.png, Figo.png, Diablo.png) inside the folder as shown below:

clip_image006

Build and Deploy

Now build the project and use the Deploy command. Open the SharePoint site in edit mode and add the above 2 web parts into it. You are now ready with the following 2 web parts.

clip_image008

Set Connection

Use the context menu of CarDisplayWebPart to set the connection to provider web part.

clip_image010

Testing the Web Parts

Now stop editing the web page and refresh the site. Select a car from the first web part and the car picture is displayed on the second web part.

clip_image012

This concludes our article on Connected Web Parts creation.

Debugging the Web Parts

You can debug the application, by executing the project in Debug mode. Any break points set will get executed.

clip_image014

References

http://msdn.microsoft.com/en-us/library/ms469765.aspx

http://rtmgroupq8.com/en/add-image-to-sharepoint-visual-web-part

Summary

In this article we have explored the Connected Web Parts feature of SharePoint Web Parts. In real world scenarios there could be multiple web parts communicating with each other through connected web parts. SharePoint also supports AJAX enabled web parts which provide a better communication between web parts. The attachment contains the source code of the web parts we discussed.

4 thoughts on “SharePoint 2010 – Connected WebParts

  1. Hey there! This is kind of off topic but I need some help from an established blog.

    Is it difficult to set up your own blog? I’m not very techincal but I can figure things out pretty quick. I’m thinking about creating my own but I’m not sure where to begin. Do you have any points or suggestions? Thanks

    1. Jean Paul says:

      Hello My Dear Friend..
      I believe creating a blog is not that easy (plus it varies with people).
      I would recommend you starting a blog in wordpress.com

      Open the site and Sign Up for a new account.
      The wizards should guide you through creating blogs.

      You can refer this video as well: http://www.youtube.com/watch?v=k5kZgbMRIzs

      Regards,
      Jean Paul

  2. aravind says:

    could you plz mail me the example for connected webparts for moss2007
    the above one is for moss2010 a visualwebpart but i need code for simple webparts
    plzzzzzzzzz.

    1. jeanpaulva says:

      Hello Aravind,

      I do not have MOSS 2007 code & installation..
      You can try the steps in MOSS too, it should be the same.

      Regards,
      Jean Paul

Leave a Reply

Your email address will not be published. Required fields are marked *