Tuesday, 10 July 2012

Custom Editor Part in SharePoint 2010 Webpart

WebPart is an excellent feature in SharePoint.  The webpart custom properties facilitates the webpart to extends its range in multiple websites.  But that webpart editor have lack of feature like it doesn't have any fields like textarea, password,validation and event handler also is not available.  It is very limited. 

Here is a possible to extend its function by using custom editor.  We develop our own editor for our webpart.

Steps 1.  Create Webpart properties but that is not display to the user so put browsable feature to false like the following


        [WebBrowsable(false)]
        [Personalizable(PersonalizationScope.Shared)]
        public string Content
        {
            get { return _Content; }
            set { _Content = value; }
        }

        private string _LinkUrl;
        [WebBrowsable(false)]
        [Personalizable(PersonalizationScope.Shared)]
        public string LinkUrl
        {
            get { return _LinkUrl; }
            set { _LinkUrl = value; }
        }


Step 2 : Override the CreateEditorParts Function and WebBrowsableObject



public override EditorPartCollection CreateEditorParts()
        {
            //Add custom CheckBoxList editor for editing NewsSources Property
            List<EditorPart> editors = new List<EditorPart>();
            editors.Add(
               new CustomEditor { ID = "Content Editor" });
            return new EditorPartCollection(editors);
        }

      
      public override object WebBrowsableObject
      {
          get { return this; }
      }

Note:  Here CustomEditor  is the custom class for the custom editor we must add in the same name space after that the webpart file is look like this.

using System;
using System.ComponentModel;
using System.Web;
using System.Web.UI;
using Microsoft.SharePoint;
using System.Web.UI.WebControls.WebParts;
using Microsoft.SharePoint.WebPartPages;
using System.Collections.Generic;



namespace BlackintonWebparts.MiddleBox
{
    [ToolboxItemAttribute(false)]
    public class MiddleBox : Microsoft.SharePoint.WebPartPages.WebPart
    {
        // Visual Studio might automatically update this path when you change the Visual Web Part project item.
        private const string _ascxPath = @"~/_CONTROLTEMPLATES/BlackintonWebparts/MiddleBox/MiddleBoxUserControl.ascx";


        private string _Content;

        [WebBrowsable(false)]
        [Personalizable(PersonalizationScope.Shared)]
        public string Content
        {
            get { return _Content; }
            set { _Content = value; }
        }

        private string _LinkUrl;
        [WebBrowsable(false)]
        [Personalizable(PersonalizationScope.Shared)]
        public string LinkUrl
        {
            get { return _LinkUrl; }
            set { _LinkUrl = value; }
        }


        protected override void CreateChildControls()
        {
            Control control = Page.LoadControl(_ascxPath);
            Controls.Add(control);
        }

        #region IWebEditable Members

        //create an instance of each custom EditorPart control
        //associated with a server control and return them as collection
        public override EditorPartCollection CreateEditorParts()
        {
            //Add custom CheckBoxList editor for editing NewsSources Property
            List<EditorPart> editors = new List<EditorPart>();
            editors.Add(
               new CustomEditor { ID = "Content Editor" });
            return new EditorPartCollection(editors);
        }

        //a reference to the associated server control
      public override object WebBrowsableObject
      {
          get { return this; }
      }

        #endregion

    }
}


The CustomEditor class look like this

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web.UI.WebControls;
using Microsoft.SharePoint;
using System.Web.UI;
using System.Web.UI.WebControls.WebParts;
using System.Collections;

namespace BlackintonWebparts.MiddleBox
{
    public class CustomEditor:EditorPart
    {

        private TextBox txtContent;
        private TextBox txtLinkUrl;
       

        protected override void OnInit(EventArgs e)
        {
            base.OnInit(e);
            txtContent = new TextBox();
            txtContent.TextMode = TextBoxMode.MultiLine;
            txtLinkUrl = new TextBox();
        }

       
  
        protected override void  CreateChildControls()
        {
            base.CreateChildControls();
            this.Controls.Add(txtContent);
            this.Controls.Add(txtLinkUrl);
        }

        public override bool ApplyChanges()
        {

            //call to make sure the check box list is set up
            EnsureChildControls();
            var wb = WebPartToEdit as MiddleBox;
            if (wb == null) return false;
            wb.LinkUrl = txtLinkUrl.Text;
            wb.Content = txtContent.Text;
            return true;


        }

        public override void  SyncChanges()
        {


            //call to make sure the check box list is set up
            EnsureChildControls();   
           
            // get a reference to the corresponfing web part
            var wb = WebPartToEdit as MiddleBox;
            if (wb == null) return;

            txtLinkUrl.Text = wb.LinkUrl;
            txtContent.Text = wb.Content;


        }

    }

}



The Method Apply Changes Set the properties to the webpart and the method SynChanges retrive the data from the webpart properties.

Happy Coding :)