In my last post we looked at creating web part properties that would be available to the users via the standard tool pane. This approach worked well but had a few limitations. To read this post click this link:
http://www.helloitsliam.com/archive/2007/11/26/moss2007-%e2%80%93-web-part-properties-part-1.aspx
In this post we will look at creating a custom tool part and exposing properties that way. If we open the same visual studio project as before we can now add a new class.
The basic class code should render as shown below:
In order for it to work within the web part we need to chase the class to be "based" upon the "ToolPart" class. You will need to change the code to the following:
If the "ToolPart" option is not available you are probably missing some statements in the "declarations list". I am using the following "using statements":
Now when I set the class to inherit from the "ToolPart" it shows up in the list for selection.
So now we have a base class that inherits from the tool part we are ready to start coding the properties and exposing them. The first change to make is back in the main class for the web part. Within the class there is a method called "GetToolParts". This method needs to be overridden and then told to load the new custom tool part we have created as well as the default ones. The code is as follows:
Notice how "toolparts[1]" is set to the class name of the new tool part class we created. If you quickly compile this you should see that your code is correct. There is a little issue with using the "VseWSS" out of the box and that is the web part class is derived from the following class:
When you compile the code you may get the following error if your web part is derived from the above class.
To fix this you can change the class that the web part is derived from to the following, the great thing about this is that this class has all the properties and methods that the system class has plus a few SharePoint specific ones.
Once you have made this change the code should compile perfectly. J If you decide to load this web part now into SharePoint and view the configuration of the web part, it should look as shown below, notice the new yellow / orange coloured item that has appeared. This is the new tool part we created but with not items in it yet.
So let's create the items we need. For this tool part we will add the same items as before, they were a text box, checkbox and a dropdown list. To add the text box add the following code to the tool part class.
Notice in the code we are actually declaring all the controls that we need and then layering them up within the panel that resides in the tool part. Once compiled the web part should render the tool part in the configuration as shown below:
As you can see we did not lay the controls out very well for this, also we did not populate the dropdown list with any items at all. To load the dropdown and to lay it out better we need to make the following changes:
The dropdown load method in this example is simply loading all the content types into the control and sorting them in alphabetic order.
Now we have all of our code completed the tool part still does not look the best but loads as shown below:
There are different approaches that can be taken in order for the controls to look like the normal web part ones do. One approach is to add attributes to the controls such as the "CSS Class" that is to be used for that control, this works well but it can involve a lot of code. Another approach is to create a "Table" and add rows to the table that contain all the controls. The code for this would be similar to this:
The panel variable we had earlier has now been declared at the top of the class as well as the new "Table" variable. These are then called later on to construct the table and rows within the Panel.
The "GetToolPanel()" control is purely used as the single method for combining all the rows and the table together. This is then called within the "CreateChildControls" and used to populate the Panel. You can see in the above the control that it calls a set of functions:
-
CreateTheTextBoxControlAndTableRow()
-
CreateTheCheckBoxControlAndTableRow()
-
CreateTheDropDownListControlAndTableRow()
There is also a separator method that simply renders the "dotted" separator lines that you would normally see within a web part.
The "CreateChildControls" method "glues" all this together by creating the Panel, Table and all the controls in one go.
Now we have all the code completed when it now renders within the tool pane it looks as shown below:
As you can see this approach may be a little more complicated but has greater functionality. If you remember the three limitations we had with the first approach, this option gets around those. The only issue I can see is that there is no design surface to create the web parts. You cannot really see what you are creating and how it will look until you render it in the web site of SharePoint Site. I suppose that is when you would move to using user controls hosted within web parts. In the next post we will look at creating the same idea as above but using an Edit Part instead of a Tool Part.