Sunday, December 22, 2013

SharePoint 2013 - 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 2012.

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

Code for IUser.cs
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 for WPProvider.cs
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 for WPConsumer.cs
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.         protected override void CreateChildControls()
  15.         {
  16.             // Here we utilize the data received from the Provider
  17.             Label lblDisplayText = new Label();
  18.             if (oIUser != null)
  19.             {
  20.                 if (oIUser.UserName != "")
  21.                     lblDisplayText.Text = "Hello " + oIUser.UserName;
  22.                 else
  23.                     lblDisplayText.Text = "Hello Guest";
  24.             }
  25.             else
  26.                 lblDisplayText.Text = "No provider connected";
  27.             this.Controls.Add(lblDisplayText);
  28.         }
  29.     }
  30. }

5) After modifying the webpart as mentioned in the above steps, 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.


1 comment:

  1. I do not see on Microsoft's site where this is a supported technology in SharePoint 2013 and Beyond. Can you give me a reference that this technology is not deprecated in 2013 and only supported in SharePoint 2010?

    ReplyDelete

Note: Only a member of this blog may post a comment.