SharePoint 2013 - 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 4.0 contains an abstract class called EditorPart, this class is used with the ASP.NET 4.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 to create an Editor Part
Following are the steps:-
1) Create a Visual web part as mentioned in the the post "Creating a Visual Webpart".

2) Go to the webpart file "MyVisualWP.ascx.cs" and implement the "IWebEditable" interface. Also, add a property named "ListName" as shown in the figure below.

3) Now add a new class named "WPEditor.cs" which inherits from the "EditorPart" class. Create a new Dropdownlist and populate the list with all the Lists in the site. Then add the dropdownlist to the controls collection as shown in the figure below.

4) EditorPart class has 2 important methods:
i) Apply Changes() : This method is used to save any changes to the currently-edited Web Part.
ii) SyncChanges()   : This method is used to load the current configuration from Web Part Properties.

5) Following is the complete code "WPEditor.cs" class file.

Code Snippet

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

6) 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 Step 2 as parameter to the Gridview.

7) Now, go back to the webpart file "MyVisualWP.cs" and override the "CreateEditorParts()" method which returns an EditorPartCollection. In this method we will add our custom EditorPart "WPEditor.cs" to the EditorPartCollection.

8) Following is the completed code for "MyVisualWP.ascx.cs" visual webpart class file.

Code Snippet

1. using System;
2. using System.ComponentModel;
3. using System.Web.UI.WebControls.WebParts;
4. using Microsoft.SharePoint;
5. using System.Collections.Generic;
6.  
7. namespace MyVisualWebpart.MyVisualWP
8. {
9.     [ToolboxItemAttribute(false)]
10.     public partial class MyVisualWP : WebPart, IWebEditable
11.     {
12.         public string ListName { get; set; }
13.  
14.         protected void Page_Load(object sender, EventArgs e)
15.         {
16.             if (this.ListName != null && this.ListName.Trim() != "")
17.             {
18.                 SPSite oSite = SPContext.Current.Site;
19.                 using (SPWeb oWeb = oSite.OpenWeb())
20.                 {
21.                     SPList oList = oWeb.Lists[this.ListName];
22.                     SPListItemCollection oColl = oList.GetItems();
23.                     gvwProducts.DataSource = oColl.GetDataTable();
24.                     gvwProducts.DataBind();
25.                 }
26.             }
27.         }
28.  
29.         public override EditorPartCollection CreateEditorParts()
30.         {
31.             List<EditorPart> editorParts = new List<EditorPart>();
32.             WPEditor oWPEditor = new WPEditor();
33.             oWPEditor.ID = this.ID + "_sampleEditorPart";
34.             oWPEditor.Title = "Personalize";
35.             editorParts.Add(oWPEditor);
36.             return new EditorPartCollection(base.CreateEditorParts(), editorParts);
37.         }
38.       
39.         public MyVisualWP()
40.         {
41.         }
42.  
43.         protected override void OnInit(EventArgs e)
44.         {
45.             base.OnInit(e);
46.             InitializeControl();
47.         }        
48.     }
49. }

9) 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.

10) The Gridview will be populated with the items in the list that you selected in the dropdownlist. Similarly, you can choose any other list from the drop down to populate data.

So that was all about custom EditorParts in webparts in SharePoint 2013!