Wednesday, February 20, 2013

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 { getset; }

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
  1. namespace VisualWebpartDemo.MyVisualWP
  2. {
  3.     public partial class MyVisualWPUserControl : UserControl
  4.     {
  5.         public MyVisualWP objMyVisualWP { get; set; }
  6.         protected override void OnPreRender(EventArgs e)
  7.         {
  8.             base.OnPreRender(e);
  9.             if (this.objMyVisualWP.ListName != null)
  10.             {
  11.                 SPWeb oWeb = SPControl.GetContextWeb(HttpContext.Current);
  12.                 SPList oList = oWeb.Lists[this.objMyVisualWP.ListName];
  13.                 SPListItemCollection oColl = oList.Items;
  14.                 gvwProducts.DataSource = oColl.GetDataTable();
  15.                 gvwProducts.DataBind();
  16.             }
  17.         }
  18.     }
  19. }

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

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!

5 comments:

  1. Thank you Neal, these are nice articles.. to learn

    ReplyDelete
  2. Thanks a bunch for this Article

    ReplyDelete
  3. Thanks Neal.
    It is very helpful.

    Here after this all implementation I am stuck at one place.
    That is I want Toggle effect in this custom editor part also. As we are getting in Appearance, Layout and Advanced.
    Someone told me that register your custom control as category.
    How can I do that?

    ReplyDelete