WebPart Properties Part 2: EditorPart

This is a continuation of a previous post entitled WebPart Properties. In the previous post, I showed you how to create a property used to store information for your webpart. In this post, I'll show you how to use that same property to store text from a dropdown list that appears in the editorPart.
The first thing to do is remove the attributes from the Text property in the webpart class. This isn't necessary but if you don't remove it, a textbox will appear in your editorPart. There is one more change that will need to be made to the Hello class but we'll wait til the end to make that change.

Next, create a new class library, call it HelloWorldEditorPart and inherit from the EditorPart class. (EditorPart comes from System.Web.UI.WebControls.WebParts). As you can see in the image below, I'm going to create 2 controls. A label and a dropdown list. The label wasn't really necessary, but I just threw it in there. The dropdown list will contain items from a custom list called Messages. Messages contains 1 column (the Title field) and 3 items.

Now that we know which controls we'll be using, we'll need to instantiate and populate them. First, override the CreateChildControls method. As you can see in the image below, I assigned a string to Messages. Again, the label wasn't necessary. I could've easily added text using html. Next, create 3 objects. An spweb, splist and splistItemCollection. This will be the first time we'll be using SharePoint objects so you'll have to reference the Microsoft.SharePoint dll. This dll is located at C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\ISAPI. Don't forget to add Using Microsoft.SharePoint to the top of your class.


In the code above, you'll see that the spweb object is given the context of the current web. The Messages list is located in the current web, so I created an splist object and assigned currentWeb.Lists["Messages"] to it. If you drop this webpart on another web somewhere that doesn't contain a list called Messages, this webpart will fail. Then I created a spListItemCollection that contained the items of the Messages list. Finally, I setup my dropdown list. DropDownMessages.DataTextField is set to Title (the default column of the list) and DropDownMessages.DataValueField assigns the unique listitem ID to each item in the dropdown.

Now, we're going to override the RenderContents method. We haven't used this method until now. This method is used to organize your controls in an order specified by you using html. If you look at the image, you'll see the two controls are using a method called RenderControl. This is used to display the control on the editor. You'll see writer.Write("
") between the controls. This is there to place a break between the controls. If the break wasn't there, the controls would be side by side with no space.



The last thing that needs to be done to the editorPart is for us to override two methods required to save the data back to the webPart. Override ApplyChanges and SyncChanges. ApplyChanges will fire when you click the apply button in the editorPart. As you can see in the image, I'm creating a Hello object and assigning it the text from the dropdown. In the Sync method, I'm taking the text that's stored in the property and selecting it in the dropdown.




Now, we're done with the EditorPart and we need to make one last change to the webPart class. We'll need to tell the webpart that there is a custom EditorPart that it has access to. Override the CreateEditorParts method. First, you'll need to create an instance of your editor webpart. You'll see this done in the first line. Then give it an ID. Create an arrayList and add the object that you just created to it. Finally, return an EditorPartCollection object with the base.CreateEditorParts() and your arrays. This will display the typical content in the editorPart as well as your new customized part.


Now we can look at our results. Click on Modified Shared Web Part from your web part's menu and you'll see the label control followed by a dropdown list populated with the contents of the Messages list like the image below.
I'll select the first item in the dropdown and the label control in my webpart, which displays the value assigned to the Text property, will be updated when I click on OK or Apply with the selected Text of the dropdown.

Labels: