|Number of votes:||2|
The plan was to write a "How To" on adding dropdown lists to Edit Mode and how to interact with them, but as usual it is hard to stop and I ended up with a page template with a stylesheet picker that I thought might bring some inspiration to beginner developers. The dropdownlist is populated from an XML file with a list of the available stylesheets. The same thing could be done by either hard coding the values (which we don't like) or by reading them from web.config which would make the web site restart each time the list is modified.
›› The Markup
For this sample I used Visual Studio 2008 and Visual Studio 2005. The project was initially created in VS 2005 and then imported to VS 2008 since I needed ASP.NET 3.5. The reason for 3.5 is that I used Linq to read the XML document. You also need an EPiServer CMS 5 SDK installation.
I started off by creating a custom property with the Visual Studio UI. Right-click the project root node and select Add -> New Item.
On the dialog that follows, select the EPiServer node directly under the Visual C# node in the Categories view. In the Templates view, select Custom Property, enter a name (in my case I choose the original name: MyDropDown).
A dialog will pop up on the screen asking you if you want to create the property as Custom or Derived. Check the Derived radio button and select PropertyString as base class (also make sure that the option "Create an associated Control used for rendering the custom property" is checked).
This will create two new classes in your project. The MyDropDown class that uses attributes to make sure it is plugged in to the correct tab in the EPiServer UI, this could be either the Admin or Edit mode. Almost no code is placed in this class. Instead most of the functionality is placed in the Control class, MyDropDownControl. As your classes are generated you will notice that the control class contains some usefull comments on what methods to override in order to get started. In this sample code we will override two methods, ApplyEditChanges() and CreateEditControls().
Add a DropDownList to your class:
This is the instance we will use for all our manipulation of the control.
After the DropDownList is added we will do the following in the CreateEditControls method:
And here is the complete CreateEditControls method:
public override void CreateEditControls()
_DropDown = new System.Web.UI.WebControls.DropDownList();
XDocument _document = XDocument.Load(
var xElements = from c in _document.Descendants("file")
foreach (var xElement in xElements)
ListItem item = _DropDown.Items.FindByValue(this.ToString());
if (item != null)
item.Selected = true;
_DropDown.Items.Selected = true;
The last thing we do in the control class is to make sure the correct item is selected in the dropdown when we hit the save button.
public override void ApplyEditChanges()
if (_DropDown.SelectedValue != null)
Let's add a new Page Template to our project. I've choosen to have the templates in the folder Templates/Public/Pages :
When the EPiServer installation kicks in and asks if you want to register a PageType for your new template, click Yes.
Enter a name for the page to be shown in the EPiServer UI and enter a description:
Now it's time to modify the markup of our template. In this sample I'm going to:
I am also using a masterpage residing in my /MasterPages/ folder.
<%@ Page language="c#" Inherits="EPiTest.MyPage"
<asp:Content ContentPlaceHolderID="main" runat="server">
href="<%= CurrentPage.Property["Css"] %>"
type="text/css" rel="stylesheet" />
(Using style set <b><%= CurrentPage.Property["Css"] %></b>)<br />
Browse to your site and enter Admin Mode. Click the Page Type tab and click your new template. Click Add Property and enter the values for your property (find the newly created property and select it in the Type dropdown).
While you are in the admin mode, add a MainBody property of the type LongString (>255) to your template.
For this samples purposes I've added two style sheets to my project. I named them Style.css and Discrete.css. Both Style sheets contain the same elements but with different styles. After adding them to the project, open up your XML file (which should be named cssFiles.xml if you are using the code from the MyDropDownControl sample) and enter corresponding items for them so that your custom property dropdown can use them. In my case, the XML looks like this:
<?xml version="1.0" encoding="utf-8" ?>
And that's it! If you create a few instances of your page template you can now enter Edit Mode and choose what style to use from your newly created control (settings will be unique for each instance). Here is a sample of what it could look like:
Admittedly, my stylesheets aren't very fancy, but since I do like to include everything I'll post them as well:
border: #999999 thin solid;
border: solid gray 1px;
border: solid 1px gray;}
border: #333300 1px solid;
border: #333300 1px solid;
border: dimgray 1px solid;