Custom WebPart ToolPart with SharePoint look and feel

Sometimes things that should be pretty simple are finally a lot more complicated than you would imagine. Today I tried to create a custom WebPart ToolPart to expose a custom property. Writing a toolpart for a SharePoint WebPart is pretty straightforward. You need to create a class that inherits Microsoft.SharePoint.WebPartPages.ToolPart. This class will handle the controls needed to edit your custom properties. Then you have to override the GetToolParts method to return the SharePoint base ToolParts and yours.

I won’t explain here in detail the steps needed to create the ToolPart, if you need more info you can read the post of Tobias Zimmergren here : http://zimmergren.net/technical/how-to-custom-web-part-properties-toolpart

So after putting these blocks together you end up with this :

That’s was not what I was expected at all ! See the difference with the Advanced section that is OOB. Instead of the collapsible panel with the blue title I get an ugly ASP .Net style toolpart.

So I decided to run one of my favorite SharePoint developer tool : dotPeek (I’m saying dotPeek is a SharePoint tool because when you start developing serious solutions for SharePoint there is a point you just NEED to explore the API by yourself).

After decompiling a couple of classes I finally found the control that is used to render the toolpart like SharePoint does.

Here are the steps to recreate the look and feel of a SharePoint ToolPart :

  1. Disable the Chrome of the ToolPart in the constructor.
  2. Instantiate a Panel Control into CreateChildControls. You have to put an id to this panel, it is required by the JavaScript which is handling the collapse / expand functionality.
  3. Instantiate a Microsoft.SharePoint.WebPartPages.TPPanel with reflection (this is an Internal type) and pass the Panel created in step 2 in the argument list.
Here is a code sample of the CreateChildControls method :

Warning : we are using reflection here to instantiate a control that is marked as internal. You shouldn’t use this method because it’s not supported by Microsoft. I won’t argue on this topic in this post but personally I’m OK with that. The only risk is to break the functionality when upgrading to the next version of SharePoint, unfortunately if I try to reproduce the SharePoint style by applying the same CSS than the TPPanel on custom controls I probably have to change the CSS with the next version. You know what? I rather prefer to update a line of C# every 3 years than struggling with some CSS.

That being said here is the result :

If you want to apply the SharePoint style on the Controls inside the TPPanel I invite you to download the attached project that contains a full example of Custom ToolPart. The final result :

I hope you will enjoy your custom toolpart with SharePoint Look and Feel ! Don’t hesitate to leave a comment if you have any question.

CustomToolPane.zip (13KB)

CustomToolPane-1.zip (updated version VS2015)

6 thoughts on “Custom WebPart ToolPart with SharePoint look and feel

  1. Hi,

    Thanks for your great tuto but the link at the end isn’t valid anymore, could you re-upload your code ? (if, by any chance, you read my comment 2 years after writing this tuto…)

    1. Hi,
      I finally found the original file (it was still on the blog but the link was wrong). Of course I figured it out after creating a new project all over again 🙂
      So I’ve put both versions. The first one is a VS2013 project I think and the second is VS2015.

      I hope that will be helpful.

Leave a Reply

Your email address will not be published. Required fields are marked *