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.

They are nearly the same as a standard Web Part, except that they inherit from the base class EditorPart instead of inheriting from the WebPart class. 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.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" 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.

Code
public class WPEditor: EditorPart
{
private DropDownList ddlList;
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
ddlList = new DropDownList();
SPWeb oWeb = SPContext.Current.Web;
foreach (SPList oLists in oWeb.Lists)
{
ddlList.Items.Add(oLists.Title);
}
}

protected override void CreateChildControls()
{
base.CreateChildControls();
this.Controls.Add(new LiteralControl("My List Name<br/>"));
this.Controls.Add(ddlList);
this.Controls.Add(new LiteralControl("<br/>"));
}
protected override void OnPreRender(EventArgs e)
{
base.OnPreRender(e);
}


4) EditorPart class has 2 main 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.

Code
public override bool ApplyChanges() //ApplyChanges is used to save any changes to the currently-edited Web Part.
        {
            VisualWebPart1 webPart = this.WebPartToEdit as VisualWebPart1;
            if (webPart != null)
            {
                webPart.ListName = ddlList.SelectedValue;
            }
            return true;
        }

public override void SyncChanges() // SyncChanges is used to load the current configuration from Web Part Properties.
        {
            VisualWebPart1 webPart = this.WebPartToEdit as VisualWebPart1;
            if (webPart != null)
            {
                ddlList.SelectedValue = webPart.ListName;
            }
        }
    }
}


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

Code
public partial class VisualWebPart1UserControl : UserControl
    {
        public VisualWebPart1 oMyVisualWP { get; set; }
        protected override void OnPreRender(EventArgs e)
        {
            base.OnPreRender(e);
            if (this.oMyVisualWP.ListName != null)
            {
                SPWeb oWeb = SPControl.GetContextWeb(HttpContext.Current);
                SPList oList = oWeb.Lists[this.oMyVisualWP.ListName];
                SPListItemCollection oColl = oList.Items;
                gvwProducts.DataSource = oColl.GetDataTable();
                gvwProducts.DataBind();
            }
        }
    }

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

Code
        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);
        }

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.

7) 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!