Creating a WebPart with a custom ToolPart properties

Add custom properties to WebPart:

Most of the times you need to add custom properties to your webpart to support funtionality. I want to explain here the simplest and understandable way to show custom properties to webpart toolpart.


I was used to add custom properties into webpart.cs file just like below.


[WebPartStorage(Storage.Shared)]    //available in both Personalization and Customization mode.
[Personalizable(PersonalizationScope.Shared)]
[FriendlyNameAttribute("Header")]                   //will be displayed to user
[Description("Sets webpart title")]                   //will be displayed on tooltip
[WebBrowsable(true)]                                   //hide or show
[Category("UI Configuration")]                        //category name where to be shown
[XmlElement(ElementName = "String")]
public string WebPartHeader
{
     get;
     set;
}


output:

Above property definition was working correctly for my web parts, But i got issue with some of the OOB extended web parts while creating such complex properties with above way. some of the times i found my properties messed up.

I found below workaround to implement complex custom properties.

Create ToolPart to add custom properties:

Follow steps specified below to add custom properties.

• Create .cs file (Inheriting from Microsoft.SharePoint.WebPartPages.ToolPart):

This class is basically has same code as we code for webpart. In 'CreateChildControl()' method you write the code to create controls which will be shown into toolpart.

This requires the original instance of webpart from toolpart which can be collected through below codeline.

ExtendedWebpart webPart = ( ExtendedWebpart )this.ParentToolPane.SelectedWebPart;

and as above code gives us instance of editing web part, we can have retrieve and assign back values to be reflected from 'CreateChildControls()' and 'ApplyChanges()' methods respectively.

Sample Code ExtendedToolPart:

       CheckBox chkEnableOOBSupport;

        protected override void CreateChildControls()

        {

            base.CreateChildControls();

            ExtendedWebpart webPart = ( ExtendedWebpart )this.ParentToolPane.SelectedWebPart;

         

            Panel toolPartPanel = new Panel();

            Controls.Add(toolPartPanel);           

           

            chkEnableOOBSupport = new CheckBox();

            toolPartPanel.Controls.Add(chkEnableOOBSupport);

            //below property already specified in webpart (cs) file.

            chkEnableOOBSupport.Checked = webPart.chkEnableOOBSupport;

            chkEnableOOBSupport .ID = "chkEnableOOBSupport";

            chkEnableOOBSupport .CssClass = lblCssClass;

            chkEnableOOBSupport .Text = "Enable OOB Support</br>";

       }

    public override void ApplyChanges()

       {

            EnsureChildControls();

            base.ApplyChanges();

            //Get webpart instance

             ExtendedWebpart webPart = (ExtendedWebpart  )this.ParentToolPane.SelectedWebPart;

            webPart.chkEnableOOBSupport  =  chkEnableOOBSupport.Checked;

        }

To give title for ToolPart write below codeline in contructor:

this.Title = "OOB Support";

Half of the job is done, now you have to create instance of above class and add it to the 'ToolPart'. how will you do that? you have to override 'GetToolParts()' method and add instance of toolpart in the first position.

Sample Code for ExtendedWebpart.cs

        /// <summary>

        /// Overridden GetToolParts Method.

        /// </summary>

        /// <returns></returns>

        public override ToolPart[] GetToolParts()

        {

           // resize the tool part array 

           ToolPart[] toolparts = new ToolPart[3];

           // instantiate the standard SharePopint tool part 

           WebPartToolPart wptp = new   WebPartToolPart();

           // instantiate the custom property toolpart if needed. 

           // this object is what renders our regular properties. 

           CustomPropertyToolPart custom = new CustomPropertyToolPart();

           // instantiate and add our tool part to the array. 

           // tool parts will render in the order they are added to this array. 

           toolparts[0] = new  ExtendedToolPart();

           toolparts[1] = custom;

           toolparts[2] = wptp;

           return toolparts;        

         

        }

By using above code we can have our custom controls added in toolpart with  our customization like validations, dependency etc.

Above code for extended WebPart worked perfectly for me and creates custom properties.