Connected WebPart

Introduction

Connected Web Parts make it easy to share data across Web Parts that are running on your page or, more formally, allow your interactions with one Web Part to other Web Parts.

We need four things to create connected Web Parts:

. A custom interface for data
. A Custom Web Part treat as provider
. A Custom Web Part treat as consumer
. A connection between the two Web Parts which will be don on sharepoint application page.

In this I will take Employee and Department table relation example which will be using above four steps to implement custom connected Web Parts.

SharePoint List Structure Images:

I have created Emp and Dept List. See below images:-

Emp_listDept_list

 

Solution Structure

I have created usual WSP Builder project to implement this connected web part functionality.

solution_Conn


Creating the Data Interface

We define what data will be served up by our provider Web Part by creating a contract,which is actually an interface that is defined in our code.
This interface is implemented by the provider Web Part so that consumers will know what data will be sent to them by the provider.

1
2
3
4
public interface ISelectedEmpID
{
string EmpId { get;}
}

The EmpId property is the actual data point that will be passed to the consumer Web Part and will be used to detail department for a selected employee.

Provider webpart class (EmpIDProvider.cs)

Provider class must inherit the interface that defines the data that will be provided to any consuming Web Parts. Also any properties and methods that are defined by the interface must be implemented.

In this example, the class must have a EmpId property. We must define a method that will return an instance of the implemented interface. See below code:-

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
using System;
using System.Web.UI;
using System.Web.UI.WebControls.WebParts;
using System.Text;
using Microsoft.SharePoint;
using System.Web.UI.WebControls;
 
namespace Home.Project.Solution.WebParts.ConnectedWebPart
{
    public interface ISelectedEmpID
    {
        string EmpId { get;}
    }
     public class EmpIDProvider : System.Web.UI.WebControls.WebParts.WebPart,ISelectedEmpID
     {
         DropDownList ddlEmp;
         public EmpIDProvider()
         {
             this.ChromeType = PartChromeType.None;
         }
 
	///Notice that the method is decorated with the ConnectionProvider attribute. The parameters
	///that are passed into this attribute (in this example) define the DisplayName and
	///UniqueID of the data that is being provided. Though it isn’t a required parameter, the
	///UniqueID parameter will be used when connecting your provider and consumer Web
	///Parts, so it is a good idea to always specify a Unique ID for your provider’s data.
	 [ConnectionProvider("EmpID", "EmpID")]
         public ISelectedEmpID GetEmpID()
         {
             return this as ISelectedEmpID;
         }
         // Interface member
         public string EmpId
         {
             get { return this.ddlEmp.SelectedValue; }
         }
         protected override void CreateChildControls()
         {
             ddlEmp = new DropDownList();
             ddlEmp.AutoPostBack = true;
             ddlEmp.SelectedIndexChanged += new EventHandler(ddlEmp_SelectedIndexChanged);
             filldropdown();
             this.Controls.Add(new LiteralControl("Employee List"));
             this.Controls.Add(ddlEmp);
             base.CreateChildControls();
         }
 
         private void filldropdown()
         {
             SPListItemCollection itemcoll = GetListItem();
             if (itemcoll.Count > 0)
             {
                 ListItem select = new ListItem("Select", "");
                 this.ddlEmp.Items.Add(select);
                 foreach (SPListItem item in itemcoll)
                 {
                     ListItem i = new ListItem(item["Emp Name"].ToString(), 
                                               item["EmpId"].ToString());
                     this.ddlEmp.Items.Add(i);
                 }
             }
         }
 
         void ddlEmp_SelectedIndexChanged(object sender, EventArgs e)
         {
             //
         }
         protected override void Render(HtmlTextWriter writer)
         {
             base.Render(writer);
         }
		 // Get List item from sharepoint list
        private SPListItemCollection GetListItem()
        {
            SPList list;
            using (SPSite site = new SPSite("http://home:5000"))
            {
                using (SPWeb web = site.OpenWeb())
                {
                    string listName = "/lists/Emp/";
                    list = web.GetList(listName);
                }
            }
            SPQuery query = new SPQuery();
            query.Query = ""; // caml query which can be created using U2U caml builder
            query.RowLimit = 10;// Limit the result to increase performance
            SPListItemCollection itemColl = list.GetItems(query);
            return itemColl;
        }
    }
}

Consumer webpart class (EmpIDConsumer.cs)

Building a Web Part consumer is quite easy, compared to building a provider. Only we are required to to receive the data that is being served up by a provider Web Part. See below code:-

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
using System;
using System.Web.UI;
using System.Web.UI.WebControls.WebParts;
using System.Text;
using Microsoft.SharePoint;
using System.Web.UI.WebControls;
 
namespace Home.Project.Solution.WebParts.ConnectedWebPart
{
     public class EmpIDConsumer : System.Web.UI.WebControls.WebParts.WebPart
     {
         private ISelectedEmpID empId = null;
         public EmpIDConsumer()
         {
             this.ChromeType = PartChromeType.None;
         }
	///look carefully; you’ll notice an instance of
	///ISelectedEmpId called id is defined. This is where the data that you are
	///consuming from the provider will be stored.
	///The SetEmpId method is decorated with the ConnectionConsumer attribute, which
	///defines the data that is being provided to the Web Part. Like the ConnectionProvider
	///attribute that was set up in the provider Web Part, the ConnectionConsumer attribute also
	///specifies a Display Name and Unique ID parameter, which again will be used to identify
	///the data when you connect the two Web Parts.
         [ConnectionConsumer("EmpId","EmpId")]
         public void SetEmpID(ISelectedEmpID id)
         {
             this.empId = id;
         }
         protected override void CreateChildControls()
         {
             if (this.empId == null)
                 return;
             if (String.IsNullOrEmpty(this.empId.EmpId))
             {
                 this.Controls.Add(new LiteralControl("Please provide connection"));
                 return;
             }
             RenderDeptDetail();
             base.CreateChildControls();
         }
         private void RenderDeptDetail()
         {
			 // get department detail based on recieve emp id
             SPListItemCollection itemColl = GetListItem(this.empId.EmpId);
 
             this.Controls.Add(new LiteralControl("Dept Detail"));             
             this.Controls.Add(new LiteralControl("<table>"));
             foreach (SPListItem item in itemColl)
             {
                 this.Controls.Add(new LiteralControl("<tr><td><strong>Dept Name:</strong> "));
                 this.Controls.Add(new LiteralControl(item["Dept Name"].ToString()));
                 this.Controls.Add(new LiteralControl("</td></tr>"));
 
                 SPFieldLookupValue value = new SPFieldLookupValue(item["EmpId"].ToString());
                 this.Controls.Add(new LiteralControl("<tr><td><strong>Emp Id:</strong> "));
                 this.Controls.Add(new LiteralControl(value.LookupValue));
                 this.Controls.Add(new LiteralControl("</td></tr>"));
 
                 this.Controls.Add(new LiteralControl("<tr><td><strong>Role:</strong> "));
                 this.Controls.Add(new LiteralControl(item["Role"].ToString()));
                 this.Controls.Add(new LiteralControl("</td></tr>"));
             }
             this.Controls.Add(new LiteralControl("</table>"));
         }
	 // Get sharepoint list department details
         private SPListItemCollection GetListItem(string Id)
         {
             SPList list;
             using (SPSite site = new SPSite("http://home:5000"))
             {
                 using (SPWeb web = site.OpenWeb())
                 {
                     string listName = "/lists/Dept/";
                     list = web.GetList(listName);
                 }
             }
             SPQuery query = new SPQuery();
             query.Query = @"
 
 
                                 "+Id+@"
 
                           "; // caml query which can be created using U2U caml builder
             SPListItemCollection itemColl = list.GetItems(query);
             return itemColl;
         }
    }
}


Deploy

Deploy both web part using wsp builder. Please see my below article Which will explain that how to deploy webpart using feature and WSP.
Create WebPart in sharepoint


Connecting Web Parts

Go to sharepoint site, create a page and add both webparts. Now modify provider webpart and assign connection to consumer webpart.

Please see below image where I have setup my webparts:-

webpart_Edit

webpart_View

Hope it helps!
Thanks & Regards,
Avinash

calendarMay 6, 2012 · cardInfoyen · commentsNo Comments
tagTags: , , , , , ,  · Posted in: MOSS, SharePoint, WebPart

Leave a Reply

Spam Protection: , required

myworldmaps infoyen