Introduction to EPiServer properties

This article was migrated from an older iteration of our website, and it could deviate in design and functionality.

This post tries to clarify what an EPiServer property is and how it works, primarily to enable us to better develop custom properties for EPiServer websites.

Estimated read time : 4 minutes

Jump to

The basics of an EPiServer property

You can view an EPiServer property as consisting of two things: property data and property controls.

The property data is contained within a PropertyData object which contains the value of the property.

The PropertyData object also contains logic for loading property controls to edit or view the property.

Schematic of an EPiServer property

Relationship between PropertyData and PropertyControl

Let’s say we have a property called “MainBody” which we use to store the main HTML content for a standard page.

This property will be of type PropertyXhtmlString (that’s our PropertyData type). When the property control for this property is requested the property data object will return a control suitable for the current context.

For example, we may have the following on our page template:

<EPiServer:Property PropertyName="MainBody" runat="server" />

When the page is viewed the PropertyXhtmlString object will load the default controls for rendering the property value, which is an XHTML string (note that this is pseudo code):

// Load default controls for displaying the property value on a page
return new Literal { Text = Value };

When the page is edited the PropertyXhtmlString object will instead load the edit controls for editing the property value:

// Load edit controls for editing the property value
return new TextBox { Text = Value };

Properties supporting direct on-page edit will also have a third property control which is rendered in DOPE mode. Note that DOPE is only supported in Internet Explorer. It’s accessible through the right-click menu when viewing a page:

EPiServer right-click menu

So, to sum up: a PropertyData object is responsible for storing the property value and to render Default, Edit, and OnPageEdit controls for displaying or editing the property value:

The relationship between PropertyData and PropertyControl

Implement your own custom properties in EPiServer

This post was written as an introduction to a post on how to implement custom properties in EPiServer and how to use user controls for rendering the different property controls.

Update: Also check out these posts by Joel Abrahamsson on creating a custom EPiServer property, and how to implement a custom property in EPiServer using a custom class as the value type.