All about the Strategy, Design, Customisation, Deployment and Development of SharePoint and its related Technologies

  Administration   All Me!! Baby!!   BDC   Book Review   Business   CKS   Conferences   CQWP   Development   Duffer Moments   Email   Errors   Family   Fixes   General   Groove   How To   How To Code   InfoPath   iPhone   IRM   Longhorn   Lotus Notes   Migration   Mobility   Office System 2007   Personal Projects   Powershell   Records Management   Search Server   Security   SharePoint   SharePoint 2010   Silverlight   SQL   Tech Ed 2008   Testing   Vista   VSTO   WSS   XSL

[26/11/2007] MOSS2007 – Web Part Properties (Part 2)
 
Categories: Development, Office System 2007, SharePoint
 

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:

  1. CreateTheTextBoxControlAndTableRow()

     

     

  2. CreateTheCheckBoxControlAndTableRow()

  3. 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.

 
23 Comments
 

Comments

Thursday, 6 Dec 2007 03:53 by Jacob
If I type in text in the "Textbox value" box and click "Apply" in the bottom of the Tool Pane, where does it save this text?

Friday, 7 Dec 2007 04:54 by Liam Cleary
Hi Jacob, I have not posted all the code needed here. What you need is two functions, one called "SyncChanges" and the other called "ApplyChanges". These two methods are used to keep the values in the webpart in sync with the values typed in the ToolPart controls. If you need the full code let me know. Liam

Saturday, 29 Dec 2007 05:06 by Carlos Morales
Hi Liam, Your code helped me a lot! Thanks. If you have it handy, can you send me to my email address the code to persist the values in the webpart. Also, all the values are persisted in the hard drive? Meaning everything stays configured, after an iisreset or a server reboot? Thanks, Carlos P.S. The CAPTCHA Image doesn't come up if you use Firefox.

Saturday, 26 Jul 2008 07:07 by Ron McKinney
Is there somewhere I can download the code for this web part including the SyncChanges and ApplyChanges method? This is much better than the example at MSDN!

Friday, 1 Aug 2008 12:01 by Colin
Thanks a lot Liam, your explanation proved crucial for me to implement my webpart. All other explanations are either about Sharepoint based webparts or are not in depth enough

Monday, 4 Aug 2008 12:53 by Vipul Patel
Hi Liam, Your code helped me a lot but can you send me the full code for syncchanges and applychanges method? Also i am looking to populate the dropdown with a collection of list for the site collection and then cascade another dropdown to populate collection of views for that list based on the selection of first list. Can you help me on how to get it working as i am new to sharepoint development?

Tuesday, 7 Oct 2008 10:38 by Tara
Your code is a great example. Can you send me the full code sample.

Tuesday, 4 Nov 2008 09:14 by Eric
Your code is a great example. Can you send me the full code sample.

Friday, 7 Nov 2008 05:44 by Paul
Would love the full sample as well merely for the Applychanges. Fantastic example!

Tuesday, 6 Jan 2009 03:41 by tony camacho
please can you send me the code for SyncChanges and ApplyChanges

Tuesday, 6 Jan 2009 03:49 by tony camacho
please can you send me the code for SyncChanges and ApplyChanges

Tuesday, 6 Jan 2009 03:51 by tony camacho
please can you send me the code for SyncChanges and ApplyChanges

Tuesday, 6 Jan 2009 03:56 by tony camacho
please can you send me the code for SyncChanges and ApplyChanges

Friday, 24 Apr 2009 04:52 by Eldar
Hi Liam, Can you send me the full code sample?

Friday, 24 Apr 2009 05:09 by Eldar
Hi Liam. Can you send me the full code example?

Tuesday, 30 Jun 2009 04:21 by gaurav kanwar
I want to execute some code say me poulate other drop down on the selected index change event. is there nay way of doing it

Monday, 6 Jul 2009 07:45 by Christian
can you send me the source code for this.

Monday, 7 Sep 2009 12:22 by siddarth
Hi Liam. Can you send me the full code example? Thanks siddarth

Tuesday, 29 Sep 2009 07:18 by Boris
Hi Liam. Can you send me the full code example?

Friday, 16 Oct 2009 07:26 by venu
can anyone help me...... what r the 2 classes used in creating webparts in moss2007?

Monday, 23 Nov 2009 07:48 by Vikash
Thanks for making it simple and understandable

Tuesday, 19 Jan 2010 05:00 by Aditya
Hi Lime, your code help me lot. can you send me code for apply changes() and SyncChanges() and cancelChanges() Thanks, Aditya

Wednesday, 3 Feb 2010 10:37 by Avinash
Hi liam, can u please send me the full code. Also, I would what i want to do is, On selectio changed event of dropdownlist inside toolpart panel, i need to make a div/panel visible. Will ppreciate any code hints for this. Thanks in Advance.!!

Name:

URL:

Email:

Comments: