Friday, September 23, 2011

Connected web part in SharePoint 2010 using Visual WebPart in SharePoint 2010

When two web parts taking to each other, then you can say are connected web parts. They are like master/detail relationship. In a connected pair of web parts one web part is the provider and the other one is the consumer. There are two types of connections that web parts can use: static and dynamic. Static connections are only used for web parts pairs in which one web part does not reside in a web part zone. This would require writing a non-ASP.NET web part that derives from the Microsoft.SharePoint.Web-PartPages.WebPart class. Dynamic connections can be created using ASP.NET web parts.

To work with a dynamic web part we need a common interface that will talk through. Lets create a web part and we will see how it is working.

For this first create an empty sharepoint project by going start -> Program Files -> Microsoft Visual Studio 2010. Then File ->New -> Project and From the New Project dialog box Select Empty SharePoint Template and give a Name and click on OK as shown in the figure.

In the next SharePoint Customization Wizard select the local site you want to debug and then
choose Deploy as farm solution, because SharePoint does not allow web part connections to be used in sandboxed solutions.

In the next step we need to implement the interface by Select the project, right click and then click Add New Item, From the main area select an interface and give a name and click on OK as shown in the figure below.

And in the interface we will create one property as below:
 public interface Interface1
    {
        string siteName
        {
            get;          
        }
    }
Now in the next step we will create a provider web part and a consumer web part. First we will create a provider web part. For this Select the project Right click ->Add new Item -> Select web part from the list of SharePoint templates and then give a name and click on Add. Then in the implement the interface that we have created before in the web part class and In the create child method we will create the dropdownlist and then add the control as shown below.


 public class ProviderWebPartTest : WebPart,ConnectedWebPartTest.Interface1
    {
        DropDownList ddlSiteName = null;
        protected override void CreateChildControls()
        {
            ddlSiteName = new DropDownList();
            ddlSiteName.Items.Add(new ListItem("Fewlines4Biju"));
            ddlSiteName.Items.Add(new ListItem("OnlySharePoint2010"));
            ddlSiteName.AutoPostBack = true;
            this.Controls.Add(ddlSiteName);
        }
   }
Then we will implement the interface as below:
  public string SiteName
        {
            get
            {
                return ddlSiteName.SelectedValue;
            }
        }
Now We have to add the ConnectionProvider  property after the CreateChildControls (). This is used to tell SharePoint this is a connection point, we add the ConnectionProvider Attribute to the public method.

The first parameter sets the display name of the connection and is exposed in the connection UI in the web part menu. The code is
[ConnectionProvider("Connection Provider")]
        public Interface1 GetSiteName()
        {
            return this;
       }
This is all that we need to do with the provider webpart. So your whole code should look like the below figure.

Now we will go ahead and create our consumer webpart. For this right click on the project Add New Item -> Select webpart template and give a name and click on Add as shown in the figure.

Now in the code we have to write as below.
 public class ConsumerWebPartTest : WebPart
    {
        string siteName = string.Empty;
        ConnectedWebPartTest.Interface1 SiteNameProvider = null;
        Label lblSiteName = null;
        protected override void CreateChildControls()
        {
            lblSiteName = new Label();
            if (SiteNameProvider != null)
            {
                lblSiteName.Text = SiteNameProvider.siteName;
            }
            else
            {
                lblSiteName.Text = "No Site Is Selected";
            }
            this.Controls.Add(lblSiteName);
        }
    }

 Now we have to write the ConnectionConsumer property after the CreateChildControls method.
[ConnectionConsumer("Consumer")]
        public void GetConsumerID(Interface1 projectInterface)
        {
            SiteNameProvider = projectInterface;
        }
So the code is as shown in the below figure.
And now we can deploy web part. To deploy right click on the project and click Deploy. And to test the feature you can add a web part page from Site Actions menu and the add both these web parts to the web part. And in the web part edit mode click on the provider web part  Connections ->Send Connections Provider To -> Consumer Webpart as shown in the figure below.

Now you can stop the editing and select one from the provider web part and you will be able to see the selected value in the 2nd web part in the label as shown in the figure below.

You can download the project from here
Hope you have enjoyed the post.

2 comments:

  1. Thanks Arun !!! I have started a new website for SharePoint. Can you join thr also?? http://www.enjoysharepoint.com/Profile/registration.aspx

    ReplyDelete