CMS 6: DropDownList Property Type

Finally, I get to make an old dream of mine (and a request I’ve heard 100000 times) come true – A DropDownList property type where you can customize the options in Admin mode. Sure, we’ve had lists before as property types (Like ‘Dynamic List’)– but they always required a definition of the options in Web.config – or as in Erik Nordins nice example they would have to squeeze the options into some text field where they didn’t really belong. But behold, in EPiServer CMS 6 we finally get what has been the contents of many wild geek dreams: Customizable settings for properties.

The settings are fairly easy to make, following the traditional episerver plugin attribute pattern, and you can make settings both for your PropertyData object as well as the Control object that renders it.

So, the steps I followed were like this:

1. I used the visual studio template to create a new property with rendering. I based it on the string property, cause I knew that eventually I’d have to store a selected value. This will give you a PropertyData object holding the name and value of each instance of the property type as well as a Control object that will render the property type in edit, view and on-page-edit modes.
2. I created a class to hold the settings for the property-type, made sure it implemented IPropertySettings and attached it to the PropertyDataControl class using the [PropertySettings()] attribute. I made sure this class would hold lists of both names, values and check-state of all the list-items.
3. I created a class to render the Settings, based on PropertySettingsUIBase and attached it to the settings using the [PropertySettingsUI()] attribute.
4. Now it was all a matter of creating the admin look & feel, loading and saving the properties and making sure the PropertyDataControl rendered a drop down list in edit-mode.

This is the end-result:

The 2 textbox’s in the bottom is to add new name, value to the drop-down-list. I used EPiServer.UI.WebControls.ToolButton for the buttons, because that has a property, DisablePageLeaveCheck, that you can set to true to make sure EPiServer knows you are just doing a local post back, and not leaving the page.

 Enjoy!