Click here to Skip to main content
15,860,972 members
Articles / Web Development / ASP.NET

Connecting Custom Web Parts in SharePoint

Rate me:
Please Sign up or sign in to vote.
4.63/5 (19 votes)
10 Jun 2009CPOL4 min read 161K   1.3K   24   33
Describes how to connect two SharePoint custom Web Parts using the Visual Studio Extension for Windows SharePoint Services.

article.gif

Introduction

SharePoint is a rich and powerful platform for both users and developers. We can customize and enrich SharePoint in many ways. One of the common ways is creating custom Web Parts. With a custom Web Part, we can implement our features quick and clean. One of the useful features of MOSS Web Parts is the ability to send and receive parameters. We can easily filter a data view Web Part according to the results of another Web Part. It's good to know that we can connect our custom Web Parts as well.

Requirements

The Web Part created in this article will use Windows SharePoint Services 3.0. It will also work with MOSS 2007. To create the Web Part, we will be using Visual Studio 2005 installed on Windows Server 2003 with Extension for Windows SharePoint Services version 1.1 (you can also use Visual Studio 2008 with the Extension of WSS version 1.2). WSS or MOSS is also installed. You can use Microsoft Virtual PC for setting up such an environment in your development machine.

Creating ProviderWebPart in Visual Studio

  1. Create a Web Part project in Visual Studio and name it ProviderWebPart.
  2. addnewwebpart.gif

  3. Delete the WebPart1 folder in Solution Explorer.
  4. Right click on the project and choose Add New Item and then choose Web Part. Change the name of the Web Part to ProviderWebPart.
  5. Use the following code inside the Web Part class:
  6. C#
    public class ProviderWebPart : System.Web.UI.WebControls.WebParts.WebPart
    {
        TextBox txt;
        Button btn;
    
        public ProviderWebPart()
        {
            this.Title = "Provider WebPart";
            this.ExportMode = WebPartExportMode.All;
        }
    
        protected override void CreateChildControls()
        {
            base.CreateChildControls();
    
            Table tbl;
            TableRow row;
            TableCell cell;
    
            // A table for layout 
            tbl = new Table();
            row = new TableRow();
            cell = new TableCell();
            
            // first row for title
            cell.ColumnSpan = 2;
            cell.VerticalAlign = VerticalAlign.Middle;
            cell.HorizontalAlign = HorizontalAlign.Center;
            Label lblTitle = new Label();
            lblTitle.Text = "This WebPart will send a parameter to a consumer:";
            cell.Controls.Add(lblTitle);
            row.Controls.Add(cell);
            tbl.Controls.Add(row);
    
            // second row of table for textbox and button
            row = new TableRow();
            cell = new TableCell();
            cell.VerticalAlign = VerticalAlign.Middle;
            cell.HorizontalAlign = HorizontalAlign.Center;
            txt = new TextBox();
            txt.Text = "";
            txt.Width = Unit.Pixel(120); ;
            cell.Controls.Add(txt);
            row.Controls.Add(cell);
            cell = new TableCell();
            cell.VerticalAlign = VerticalAlign.Middle;
            cell.HorizontalAlign = HorizontalAlign.Center;
            btn = new Button();
            btn.Text = "Send...";
            btn.Click += new EventHandler(btn_Click);
            cell.Controls.Add(btn);
            row.Controls.Add(cell);
            tbl.Controls.Add(row);
            
            //add table to webpart
            this.Controls.Add(tbl);
        }
    
        void btn_Click(object sender, EventArgs e)
        {
            // will be added later
        }
    }

    Note: The above code will render the interface of the ProviderWebPart.

  7. Now, we declare an interface for communication between two Web Parts. We must create a class library project with a strong name. To do so, go to the File menu and choose Add New Project and then select Class Library. Name it CommunicationInterface.
  8. Rename class1.cs to ICommunicationInterface.cs and replace the following code in that file:
  9. C#
    namespace CommunicationInterface
    {
        public interface ICommunicationInterface
        {
            string Parameter1 { get; }
        }
    }

    As you can see, we declared an interface for communication with one parameter. You can extend it and add your own parameters.

  10. Right click on CommunicationInterface and choose properties; in the Signing tab, check "Sign the Assembly", and then in the dropdown list, select <New...> and name the file key1.snk and uncheck Protect key file with password.
  11. strong.gif

  12. Right click and Build the CommunicationInterface project.
  13. In the ProviderWebPart project, right click and Add reference, and then choose the Projects tab and the CommunicationInterface project.
  14. Double-click on ProviderWebPart.cs. Now, we must implement the interface in our Web Part class, so add this code to the class:
  15. C#
    Use CommunicationInterface;

    and change the class declaration to:

    C#
    public class ProviderWebPart : 
           System.Web.UI.WebControls.WebParts.WebPart, 
           ICommunicationInterface
  16. Implement the Parameter1 property in the Web Part class using the following code:
  17. C#
    // implement the Parameter1 property from interface
    protected string _parameter1 = "";
    public string Parameter1
    {
        get { return _parameter1; }
    }
  18. Create the property that returns the interface and decorate it with the ConnectionProvider attribute. The parameters of ConnectionProvider are the display name and the real name (ID) of the connection. When we declare more than one connection provider and consumer (like SharePoint Web Parts), we must choose a unique name for IDs of connections in a Web Part.
  19. C#
    // create a property that return the interface reference
    // and decorate it with ConnectionProvider
    [ConnectionProvider("Parameter1 Provider", 
                        "Parameter1 Provider")]
    public ICommunicationInterface ConnectionInterface()
    {
        return this;
    }
  20. Add the following code to the btn_click event:
  21. C#
    // set connection provider property with required textbox info.
    this.localParameter1 = txt.Text;

    Now, the whole code of ProviderWebPart must be like this:

    C#
    public class ProviderWebPart : 
           System.Web.UI.WebControls.WebParts.WebPart, 
           ICommunicationInterface
    {
        TextBox txt;
        Button btn;
    
        // implement the Parameter1 property from interface
        protected string _parameter1 = "";
        public string Parameter1
        {
            get { return _parameter1; }
        }
    
        // create a property that return the interface reference
        // and decorate it with ConnectionProvider
        [ConnectionProvider("Parameter1 Provider", 
                            "Parameter1 Provider")]
        public ICommunicationInterface ConnectionInterface()
        {
            return this;
        }
    
        public ProviderWebPart()
        {
            this.Title = "Provider WebPart";
            this.ExportMode = WebPartExportMode.All;
        }
    
        protected override void CreateChildControls()
        {
            base.CreateChildControls();
    
            Table tbl;
            TableRow row;
            TableCell cell;
    
            // A table for layout 
            tbl = new Table();
            row = new TableRow();
            cell = new TableCell();
            
            // first row for title
            cell.ColumnSpan = 2;
            cell.VerticalAlign = VerticalAlign.Middle;
            cell.HorizontalAlign = HorizontalAlign.Center;
            Label lblTitle = new Label();
            lblTitle.Text = "This WebPart will send a parameter to a consumer:";
            cell.Controls.Add(lblTitle);
            row.Controls.Add(cell);
            tbl.Controls.Add(row);
    
            // second row of table for textbox and button
            row = new TableRow();
            cell = new TableCell();
            cell.VerticalAlign = VerticalAlign.Middle;
            cell.HorizontalAlign = HorizontalAlign.Center;
            txt = new TextBox();
            txt.Text = "";
            txt.Width = Unit.Pixel(120); ;
            cell.Controls.Add(txt);
            row.Controls.Add(cell);
            cell = new TableCell();
            cell.VerticalAlign = VerticalAlign.Middle;
            cell.HorizontalAlign = HorizontalAlign.Center;
            btn = new Button();
            btn.Text = "Send...";
            btn.Click += new EventHandler(btn_Click);
            cell.Controls.Add(btn);
            row.Controls.Add(cell);
            tbl.Controls.Add(row);
            
            //add table to webpart
            this.Controls.Add(tbl);
            
        }
    
        void btn_Click(object sender, EventArgs e)
        {
        // set connection provider property with required textbox info.
            this._parameter1 = txt.Text;
        }
    }
  22. In the properties folder, double click on AssemblyInfo.cs and change:
  23. C#
    [assembly: CLSCompliant(true)] 

    to:

    C#
    [assembly: CLSCompliant(false)]

    clscompliant.gif

  24. For successful Web Part deployment, we need to add the CommunicationInterface DLL into the GAC. So, open Windows Explorer and browse: c:\windows\assembly. Then, open another explorer instance and browse: [your solution path]\ProviderWebPart\CommunicationInterface\bin\Debug. Now, drag and drop CommunicationInterface.dll in c:\windows\assembly.
  25. Right click on the Web Part project and choose build and deploy.
  26. Now, ProviderWebPart is ready to use in SharePoint and we must create a consumer Web Part.

Creating ConsumerWebPart in Visual Studio

  1. In the File menu, add a new Web Part project to the solution and name it ConsumerWebPart.
  2. Delete the WebPart1 folder in Solution Explorer.
  3. Right click on the project and choose Add New Item, and then choose Web Part. Change the name of the Web Part to ConsumerWebPart.
  4. In the ConsumerWebPart project, right click and Add reference to the CommunicationInterface project.
  5. In the Properties folder, double click on AssemblyInfo.cs and change:
  6. C#
    [assembly: CLSCompliant(true)]

    to:

    C#
    [assembly: CLSCompliant(false)]
  7. Double click on ConsumerWebPart.cs and add following code above the class:
  8. C#
    using CommunicationInterface;
  9. In the ConsumerWebPart class, add the following code:
  10. C#
    public class ConsumerWebPart : 
           System.Web.UI.WebControls.WebParts.WebPart
    {
        Label lblTitle;
        Label lblResult;
    
        ///// the string info consumer from custom reciever   //
        ICommunicationInterface connectionInterface = null;
        // The consumer webpart  must define a method that
        // would accept the interface as an parameter
        // and must be decorated with ConnectionConsumer attribute      
        [ConnectionConsumer("Parameter1 Consumer", 
                            "Parameter1 Consumer")]
        public void GetConnectionInterface(ICommunicationInterface 
                                           _connectionInterface)
        {
            connectionInterface = _connectionInterface;
        }
        /////////////////////////////////////////////////////////  
    
        public ConsumerWebPart()
        {
            this.Title = "Consumer WebPart";
            this.ExportMode = WebPartExportMode.All;
        }
    
        protected override void CreateChildControls()
        {
            base.CreateChildControls();
    
            Table tbl;
            TableRow row;
            TableCell cell;
    
            // A table for layout 
            tbl = new Table();
            row = new TableRow();
            cell = new TableCell();
    
            // first row for title
            cell.VerticalAlign = VerticalAlign.Middle;
            cell.HorizontalAlign = HorizontalAlign.Center;
            lblTitle = new Label();
            lblTitle.Text = "This WebPart will recieve " + 
                            "a parameter from a provider:";
            cell.Controls.Add(lblTitle);
            row.Controls.Add(cell);
            tbl.Controls.Add(row);
    
            //second row for result
            row = new TableRow();
            cell = new TableCell();
            cell.VerticalAlign = VerticalAlign.Middle;
            cell.HorizontalAlign = HorizontalAlign.Center;
            lblResult = new Label();
            //check the connectionInterface for recieving the parameter1
            if (connectionInterface != null)
            {
                lblResult.Text = connectionInterface.Parameter1+ 
                                 " is recieved!";
            }
            else
            {
                lblResult.Text = "nothing is recieved!";
            }
            cell.Controls.Add(lblResult);
            row.Controls.Add(cell);
            tbl.Controls.Add(row);
    
            //add table to webpart
            this.Controls.Add(tbl);
        }
    }
  11. Build and deploy the ConsumerWebPart project.
  12. solution.gif

Using the Created Web Parts in SharePoint and Connecting Them

After creating and deploying our Web Parts, we can check the functionality in the SharePoint environment.

  1. Broswe your SharePoint site and edit a Web Part page like default.aspx. Use Site Actions and Edit Page.
  2. Click Add Web Part in a Web Part zone; your deployed Web Parts must be in Miscellaneous. Check both ProviderWebPart and ConsumerWebPart, and click Add.
  3. addwebpart.gif

  4. Now, you can connect your Web Parts. Click on Edit in ConsumerWebPart, and in Connections; check Get Paramet1 consumer from ProviderWebPart.
  5. Now, click on Exit edit mode on the top of the page.
  6. Check the functionality of our Web Parts. Type a word and click the "Send..." button and check the ConsumerWebPart.
  7. result.gif

Additional Improvements

The presented sample was simple. You can define your parameters in CommunicationInterface and transfer them between Web Parts. Each Web Part can be a consumer and provider at the same time.

Conclusion

The sample code showed that we can connect our custom Web Parts just like Microsoft SharePoint Server Web Parts. So, we can develop more advanced and generic connected Web Parts.

History

  • 10/06/2009 - Version 1.0.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior) AIRIC
Iran (Islamic Republic of) Iran (Islamic Republic of)
MCP (Microsoft Certified Professional)
Senior Software Developer in AIRIC (Automotive Design and Research Company).
Capabilities and interests:
.NET Framework, ASP.NET, Windows Application, Windows Workflow Foundation, SharePoint Customization and Development,SQL Server, NHibernate, BPMN and UML.
Master of Industrial Engieering from Poly-Technic of Tehran

Comments and Discussions

 
GeneralMy vote of 4 Pin
Abhay Malviya28-May-12 20:55
Abhay Malviya28-May-12 20:55 
QuestionMy Vote Of 5 Pin
Sivakrishna Bhatraju27-Feb-12 23:13
Sivakrishna Bhatraju27-Feb-12 23:13 
QuestionProgramatically connect custom webparts Pin
imran39830-Jan-12 0:09
imran39830-Jan-12 0:09 
GeneralMy vote of 1 Pin
vaibhav201028-Sep-11 0:57
vaibhav201028-Sep-11 0:57 
GeneralMy vote of 4 Pin
rajesh peter16-Jun-11 20:11
rajesh peter16-Jun-11 20:11 
GeneralMy vote of 5 Pin
Member 437824926-May-11 1:39
Member 437824926-May-11 1:39 
QuestionConnecting Custom Web Part and ContentEditor Webpart [modified] Pin
Jyothi Swaroop V10-Feb-11 18:45
Jyothi Swaroop V10-Feb-11 18:45 
QuestionConnect List View Web Part to Custom Web Part [modified] Pin
paschka763-Nov-10 21:57
paschka763-Nov-10 21:57 
GeneralAwesome and Simple Pin
Hungry Mind10-Feb-10 22:29
Hungry Mind10-Feb-10 22:29 
Generalcant deploy Pin
sheand4-Jan-10 3:59
sheand4-Jan-10 3:59 
Generali don't have the Edit Option.... Pin
sleepwalker7895-Dec-09 23:06
sleepwalker7895-Dec-09 23:06 
GeneralRe: i don't have the Edit Option.... Pin
nicetohaveyou7-Mar-11 6:03
nicetohaveyou7-Mar-11 6:03 
GeneralRe: i don't have the Edit Option.... Pin
msardar1-Apr-11 12:24
msardar1-Apr-11 12:24 
Questionconnecting web parts Pin
Member 47323851-Dec-09 0:32
Member 47323851-Dec-09 0:32 
GeneralNot working with a consumer that has TextBox instead of Label Pin
jpragnell30-Sep-09 22:54
jpragnell30-Sep-09 22:54 
QuestionHow does this get deployed? Pin
JJComcast26-Aug-09 6:39
JJComcast26-Aug-09 6:39 
QuestionMultiple Parameters Pin
JJComcast24-Jul-09 7:53
JJComcast24-Jul-09 7:53 
GeneralTwo Webpart load usercontrol dynamically connect together. Pin
smasher920-Jul-09 1:05
smasher920-Jul-09 1:05 
GeneralVSeWSS Service Error Pin
sudha2u30-Jun-09 0:24
sudha2u30-Jun-09 0:24 
GeneralRe: VSeWSS Service Error Pin
Member 8221417-Aug-09 6:04
Member 8221417-Aug-09 6:04 
GeneralRe: VSeWSS Service Error Pin
Padmaraj Sivaraj31-Aug-09 8:34
Padmaraj Sivaraj31-Aug-09 8:34 
GeneralRe: VSeWSS Service Error Pin
ahmz201012-Jun-10 21:21
ahmz201012-Jun-10 21:21 
Generalconnection interface is always null in the Consumer WebPart. Pin
abin jaik22-Jun-09 23:12
abin jaik22-Jun-09 23:12 
GeneralRe: connection interface is always null in the Consumer WebPart. Pin
Nioosha Kashani26-Jun-09 19:18
Nioosha Kashani26-Jun-09 19:18 
AnswerRe: connection interface is always null in the Consumer WebPart. Pin
JJComcast21-Jul-09 7:19
JJComcast21-Jul-09 7:19 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.