How to create custom webpart properties in SharePoint 2013

(With Static Data and Dynamic Data Source)

Ø  To create a custom webpart properties in SharePoint we should follow one stranded approach.

Ø  Basically we can create following custom properties with only  inheriting  of webpart class

1.       check box

2.       dropdown

3.       textbox

Ø  To create any above controls we should write the following property  attributes of visual webparts

   [Category("Extended Settings"), //we can provide any name as category

   Personalizable(PersonalizationScope.Shared), 

   WebBrowsable(true),

   WebDisplayName("Sample Drop Down"), //here we have to provide control display name(opnl)

   WebDescription("Please Choose a Sample DropDown")] //optional

·         Category – This will group your property according to category. If not declared, “Miscellaneous” will be used as the default.

·         Personalizable – How the WebPart is configured, which can be per-user (PersonalizationScope.User), or for everyone (PersonalizationScope.Shared). For this example, we have chosen all users.

·         WebBrowsable – This will hide or show the property on the tool pane.

·         WebDisplayName – Label for the property.

·         WebDescription – Description for the property.

Ø  In webPart properties by declaring of property, the controls will be initialized.

Ø  the deferent types of property types and equivalent control initializations on pane as follows.

The above property types are provide limited controls but if you want to create more or any user control and provide initialization values dynamically, we have to inherit and implement few abstract classes and interfaces. we can discuss about them after these controls creation.

v   BOOL (Check Box): 

        public Boolean _property; // this line creates check box
        [System.Web.UI.WebControls.WebParts.WebBrowsable(true),
         System.Web.UI.WebControls.WebParts.WebDisplayName("Check box property"),
         System.Web.UI.WebControls.WebParts.WebDescription(""),
         System.Web.UI.WebControls.WebParts.Personalizable(
         System.Web.UI.WebControls.WebParts.PersonalizationScope.Shared),
         System.ComponentModel.Category("Gowtham Custom Properties"),
         System.ComponentModel.DefaultValue("")]

        public Boolean _Property   // the check box value available here.
        {
            get { return _property; }
            set { _property = value; }
        }

v  Enum (Dropdown):

        public enum Dropdownvalues { List1, List2, List3 };
        protected Dropdownvalues  selected_value  ;
          [System.Web.UI.WebControls.WebParts.WebBrowsable(true),
         System.Web.UI.WebControls.WebParts.WebDisplayName("Select the List"),
         System.Web.UI.WebControls.WebParts.WebDescription(""),
         System.Web.UI.WebControls.WebParts.Personalizable(
         System.Web.UI.WebControls.WebParts.PersonalizationScope.Shared),
         System.ComponentModel.Category("Gowtham Custom Properties"),
         System.ComponentModel.DefaultValue("")]

        public Dropdownvalues  selected_value  // selected value available here
        {
            get { return _list; }
            set { _list = value; }
        }

v  TextBox (String, int,Date):

          public static string/int/Date  _value;
        [System.Web.UI.WebControls.WebParts.WebBrowsable(true),
         System.Web.UI.WebControls.WebParts.WebDisplayName("Enter the Value"),
         System.Web.UI.WebControls.WebParts.WebDescription(""),
         System.Web.UI.WebControls.WebParts.Personalizable(
         System.Web.UI.WebControls.WebParts.PersonalizationScope.Shared),
         System.ComponentModel.Category("Gowtham Custom Properties"),
         System.ComponentModel.DefaultValue("")]

        public string/int/Date _Value
        {
            get { return _value; }
            set { _value = value; }
        }

Ø  In the Above scenario we can provide values statically especially for dropdown control.

Ø  and we can't generate   events for respected controls and those are limited controls to overcome these limitations we have to inherit few abstract classes and we have to override few methods from those abstract classes.

 

Abstract classes to customize webpart properties are :

             

o   Editor Part                           

o   IWebEditable

o   Microsoft.SharePoint.WebPartPages.ToolPart    

                                                                                        

With EditorPart Class and IWebeditable Interface :

Ø  first we have to create one separate .cs file for that webpart to create control in editor webpart pane.

Ø  that class must inherited from Editorpart Class.

Ø  From that class we should override following methods:

ü  CreateChildControls()

ü  SyncChanges()

ü  ApplyChanges()

ü  we have to override other methods from different classes  as per requirement.

      The controls are added in the CreateChildControls method. This is where you should place most of your control logic, in editor parts, web parts etc.

      The SynChanges method is used by the EditorPart to get the values from the Web Part into the Editor Part.

      The ApplyChanges method is executed when you click Ok or Apply and is used to set the property values of your Web Part. SyncChanges is always called directly after the ApplyChanges method, to make sure that the properties are in sync.

Ø  From IWebeditable interface we have to override CreateEditorparts()

Ø  The CreateEditorParts method is used to tell the web part zone what editor parts you will show, in this case we only have one. But more advanced web parts may require that you have several. (this method must used in webpart.ascx.cs file)

Step by Step Procedure to Create Custom Webpart properties Webpart :

1.       Create New Visual WebPart of sharepoint2013

2.       add WPEditor.cs file to the webpart(another .cs file )

3.       write code in WPEditor with inheriting the class Editorpart.

4.       Override Onint() to initialize user controls with static/dynamic values from sources

   

  protected override void OnInit(EventArgs e)

        {

            base.OnInit(e);

       DropDownList     ddlTop = new DropDownList();

            SPWeb oWeb = SPContext.Current.Web;

            SPList list = oWeb.Lists["QPDES Top Navigation"];

            SPQuery Topquery = new SPQuery();

            Topquery.Query = "<Where><IsNull><FieldRef Name='parentLink' /></IsNull></Where>";

            SPListItemCollection Topcol = list.GetItems(Topquery);

            foreach (SPListItem item in Topcol)

            {

                ddlTop.Items.Add(item.Title);

            }

}

v  In above code we get the values from SPList to the dropdown

this control is added in criateChildControl(). in this we can provide any data, here we take dropdown but you can take any control.

5.       Then override the CriateChildcontrols()                                                                                 protected override void CreateChildControls()

        {

            base.CreateChildControls();

            this.Controls.add(UserControlObj);    

        }

6.       Then override ApplyChanges()

 public override bool ApplyChanges()

        {

   QPDES_ContentDisplayWP webPart = this.WebPartToEdit as QPDES_ContentDisplayWP;

            if (webPart != null)    //Webpart class object to assign values to proporties of                                                                    webpart main class

            {

     webPart.Top =User control  object.value attribute //top is property in main webpart class

            }

            return true;

        }

7.       Then Override Sycchanges()

    public override void SyncChanges() 

        {

      QPDES_ContentDisplayWP webPart = this.WebPartToEdit as QPDES_ContentDisplayWP;

            if (webPart != null)

            {

       UserControlOBJ.Value Atribute = webPart.Top;  // top is the property from main                                                                                                                                      webpart class

            }}

8.       Then implement the IWebEditable to the .ascx.cs class of the webpart

9.       Create Properties to get the values from user controls

            public string Top { get; set; }

10.   Then override the CreateEditorParts()

  public override EditorPartCollection CreateEditorParts()

        {

            List<EditorPart> editorParts = new List<EditorPart>();

            WPEditor oWPEditor = new WPEditor();   //object of controls created class

            oWPEditor.ID = this.ID + "_sampleEditorPart";

            oWPEditor.Title = "Personalize";

            editorParts.Add(oWPEditor);

            return new EditorPartCollection(base.CreateEditorParts(), editorParts);

        }     

11.   Then override the Webbrowsable() from IWebeditable

object IWebEditable.WebBrowsableObject

        {

            get { throw new NotImplementedException(); }

        }

v  Now you can assign that property value (public string Top { get; set; }) ,where you want and  this is selected value of dropdown in webpart properties.

Read More