SharePoint 2010 - Creating Custom Editor Parts

Overview
In the previous post we discussed how we can create configurable webpart properties. We also noticed that the web part properties were ENUM and we could only enter static values as parameter like typing a list name or column name etc.What if you type the list name incorrectly? Therefore, you would want to choose a list from a asp.net dropdown containing all the available lists and display the items for the selected list in a Gridview. This is were EditorParts come in handy! So lets get started...

Editor Parts
To customize the Web Parts’ configuration user interface you can create custom classes called Editor Parts which are controls hosted in a specific WebPartZone called EditorZone.
ASP.NET 2.0 contains an abstract class called EditorPart, this class is used with the ASP.NET 2.0 WebPart class to create customized tool panes. By inheriting from this control you can customize the look and functionality of the tool pane and use standard ASP.NET constructs such as auto post backs, validations etc.

IWebEditable Interface
To provide a Web Part with a custom Editor Part, you need to override the implementation of the IWebEditable interface, which is implemented by the Web Part base class.

Steps for creating an Editor Part

1) Open Visual Studio and create a new Visual Web Part named MyVisualWP. In the "MyVisualWpUserControl.ascx" add a GridView control name "gvwProducts".

2) Go to the webpart file "MyVisualWP.cs" and add a property named "ListName".
public string ListName { get; set; }

3) Now add a new class named "WPEditor.cs" which inherits from the "EditorPart" class.
i) Create a DropDownList named "ddlList" and populate the List Names. Add ddlList to the controls collection
ii) Override Apply Changes() : This method is used to save any changes to the currently-edited Web Part.
iii) Override SyncChanges()   : This method is used to load the current configuration from Web Part Properties.

Following is the complete code for WPEditor.cs

Code Snippet

1. using System;
2. using System.Collections.Generic;
3. using System.Linq;
4. using System.Text;
5. using System.Web.UI.WebControls.WebParts;
6. using System.Web.UI.WebControls;
7. using Microsoft.SharePoint;
8. using System.Web.UI;
9.  
10. namespace VisualWebpartDemo.MyVisualWP
11. {
12.     public class WPEditor : EditorPart
13.     {
14.         private DropDownList ddlList;
15.         protected override void OnInit(EventArgs e)
16.         {
17.             base.OnInit(e);
18.             ddlList = new DropDownList();
19.             SPWeb oWeb = SPContext.Current.Web;
20.             foreach (SPList oLists in oWeb.Lists)
21.             {
22.                 ddlList.Items.Add(oLists.Title);
23.             }
24.         }
25.  
26.         protected override void CreateChildControls()
27.         {
28.             base.CreateChildControls();
29.             this.Controls.Add(new LiteralControl("My List Name<br/>"));
30.             this.Controls.Add(ddlList);
31.             this.Controls.Add(new LiteralControl("<br/>"));
32.         }
33.  
34.         protected override void OnPreRender(EventArgs e)
35.         {
36.             base.OnPreRender(e);
37.         }
38.  
39.         public override bool ApplyChanges()  //ApplyChanges is used to save any changes to the currently-edited Web Part.
40.         {
41.             MyVisualWP webPart = this.WebPartToEdit as MyVisualWP;
42.             if (webPart != null)
43.             {
44.                 webPart.ListName = ddlList.SelectedValue;
45.             }
46.             return true;
47.         }
48.  
49.         public override void SyncChanges()  // SyncChanges is used to load the current configuration from Web Part Properties.
50.         {
51.             MyVisualWP webPart = this.WebPartToEdit as MyVisualWP;
52.             if (webPart != null)
53.             {
54.                 ddlList.SelectedValue = webPart.ListName;
55.             }
56.         }
57.     }
58. }

4) Make the following changes in the user controls code behind file "MyVisualWPUserControl.ascx.cs" which nothing but passing the "ListName" property that we created in above steps as parameter to the Gridview.

Code Snippet

9. namespace VisualWebpartDemo.MyVisualWP
10. {
11.     public partial class MyVisualWPUserControl : UserControl
12.     {
13.         public MyVisualWP objMyVisualWP { get; set; }
14.         protected override void OnPreRender(EventArgs e)
15.         {
16.             base.OnPreRender(e);
17.             if (this.objMyVisualWP.ListName != null)
18.             {
19.                 SPWeb oWeb = SPControl.GetContextWeb(HttpContext.Current);
20.                 SPList oList = oWeb.Lists[this.objMyVisualWP.ListName];
21.                 SPListItemCollection oColl = oList.Items;
22.                 gvwProducts.DataSource = oColl.GetDataTable();
23.                 gvwProducts.DataBind();
24.             }
25.         }
26.     }
27. }

5) Now, go back to the webpart file "MyVisualWP.cs" and implement the "IWebEditable" interface.

6) Override the "CreateEditorParts()" method which returns an EditorPartCollection. In this method we will add our custom EditorPart "WPEditor.cs" to the EditorPartCollection.
public override EditorPartCollection CreateEditorParts()
{
  List<EditorPart> editorParts = new List<EditorPart>();
  WPEditor oWPEditor = new WPEditor();
  oWPEditor.ID = this.ID + "_sampleEditorPart";
  oWPEditor.Title = "Personalize";
  editorParts.Add(oWPEditor);
  return new EditorPartCollection(base.CreateEditorParts(), editorParts);
}

Following is the complete code for MyVisualWP.cs

Code Snippet

11. namespace VisualWebpartDemo.MyVisualWP
12. {
13.     [ToolboxItemAttribute(false)]
14.     public class MyVisualWP : WebPart, IWebEditable
15.     {
16.         public string ListName { get; set; }
17.  
18.         // Visual Studio might automatically update this path when you change the Visual Web Part project item.
19.         private const string _ascxPath = @"~/_CONTROLTEMPLATES/VisualWebpartDemo/MyVisualWP/MyVisualWPUserControl.ascx";
20.  
21.         protected override void CreateChildControls()
22.         {
23.             MyVisualWPUserControl control = Page.LoadControl(_ascxPath) as MyVisualWPUserControl;
24.             control.objMyVisualWP = this;
25.             Controls.Add(control);
26.         }
27.  
28.         public override EditorPartCollection CreateEditorParts()
29.         {
30.             List<EditorPart> editorParts = new List<EditorPart>();
31.             WPEditor oWPEditor = new WPEditor();
32.             oWPEditor.ID = this.ID + "_sampleEditorPart";
33.             oWPEditor.Title = "Personalize";
34.             editorParts.Add(oWPEditor);
35.             return new EditorPartCollection(base.CreateEditorParts(), editorParts);
36.         }
37.  
38.         object IWebEditable.WebBrowsableObject
39.         {
40.             get { throw new NotImplementedException(); }
41.         }
42.     }
43. }

7) Deploy the solution and add the webpart to the page in edit mode. You can see that there is a dropdownlist in the webpart properties window with all the lists. Choose any of the list and click 'Apply' or 'Ok' button.

8) The Gridview will be populated with the items in the list that you selected in the dropdownlist.

So that was all about custom EditorParts in webparts! Keep reading!