Tuesday, March 5, 2013

SharePoint 2010 - Connectable Web parts


Overview
In SharePoint, a web part can be 'connected' to another web part to provide some information at run-time.  The Provider web part pushes out the contracted information and the Consumer web part is set up to receive and consume the shared information.

Components of Connectable webparts
1) Interface: This custom interface will define the data to be shared from the Provider to the Consumer web part.
2) Provider web part: Implements a data interface - this interface is a definition of the data that will be shared from the Provider web part to the Consumer web part.
Provide a ConnectionProvider method which will expose the interfacing data to the Consumer web part.
3) Consumer web part: ConnectionConsumer method which will receive the interfacing data
Consume the interfacing data and provide enriching details to the user.

Steps for creating connectable web parts

1) Create an Empty SharePoint Project named ConnectedWebparts  in Visual Studio 2010.

2) we add a new C# Interface code class and name it IUser.


Code Snippet
  1. namespace ConnectedWebparts
  2. {
  3.     public interface IUser
  4.     {
  5.         string UserName { get; }
  6.     }
  7. }

3) Add a new web part named WPProvider in the project which will be the provider webpart. Make the changes as highlighted in the figure below.


Code Snippet
  1. namespace ConnectedWebparts.WPProvider
  2. {
  3.     [ToolboxItemAttribute(false)]
  4.     public class WPProvider : WebPart,IUser
  5.     {
  6.         //From the UI, we collect the user selections
  7.         Label lblUsername = null;
  8.         TextBox txtUsername = null;
  9.         Button btn = null;
  10.         protected override void CreateChildControls()
  11.         {
  12.             lblUsername = new Label();
  13.             txtUsername = new TextBox();
  14.             btn = new Button();
  15.             lblUsername.Text = "User name: ";
  16.             btn.Text = "Send User";
  17.             this.Controls.Add(lblUsername);
  18.             this.Controls.Add(txtUsername);
  19.             this.Controls.Add(btn);
  20.         }
  21.         public string UserName
  22.         {
  23.             get { return txtUsername.Text; }
  24.         }
  25.  
  26.         [ConnectionProvider("UserName")]
  27.         public IUser ConnectionProviderMethod()
  28.         {
  29.             // This method will expose the shared data to the Consumer.
  30.             return this;
  31.         }
  32.     }
  33. }

4) Add a new web part named WPConsumer in the project which will be the provider webpart. Make the changes as highlighted in the figure below.


Code Snippet
  1. namespace ConnectedWebparts.WPConsumer
  2. {
  3.     [ToolboxItemAttribute(false)]
  4.     public class WPConsumer : WebPart
  5.     {
  6.         Label lblUser = null;
  7.         IUser oIUser = null;
  8.         //Receive the data from the Provider web part here
  9.         [ConnectionConsumer("UserName")]
  10.         public void ConsumerMethod(IUser user)
  11.         {
  12.             oIUser = user;
  13.         }
  14.  
  15.         protected override void CreateChildControls()
  16.         {
  17.             // Here we utilize the data received from the Provider
  18.             Label lblDisplayText = new Label();
  19.             if (oIUser != null)
  20.             {
  21.                 if (oIUser.UserName != "")
  22.                     lblDisplayText.Text = "Hello " + oIUser.UserName;
  23.                 else
  24.                     lblDisplayText.Text = "Hello Guest";
  25.             }
  26.             else
  27.                 lblDisplayText.Text = "No provider connected";
  28.             this.Controls.Add(lblDisplayText);
  29.         }
  30.     }
  31. }

5) Build and Deploy the solution.

6) Add the Consumer webpart on the webpart page.


7) Add the Provider webpart on the webpart page.


8)  Edit the Provider webpart and connect it to the consumer.

9) Now the 2 webparts have been connected to each other using the interface. In the provider webpart, type a username in the textbox and click "Send User". You can see the name is displayed in the consumer webpart as highlighted in the figure below.

Reference
http://www.c-sharpcorner.com/uploadfile/DipalChoksi/connectable-web-parts-in-sharepoint-2010/
http://www.dotnetcurry.com/ShowArticle.aspx?ID=678

2 comments:

  1. Nice article.
    Is it possible to setup the connection between web parts (Provider/Consumer) via object model?

    ReplyDelete
    Replies
    1. Thanks a lot! Yes its quite possible, though I have not tried yet. The following link might just answer your question.
      http://avinash-moss-expert.blogspot.in/2010/08/connect-webparts-programmatically-using.html

      I shall also try it out and post an example including screen shots!

      Delete