Loading and saving a custom property value with PropertyUserControlBase

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


The PropertyUserControlBase class in Template Foundation has been updated with two new events called PropertyLoad and PropertySave, making it easier to load and save the property value.

Estimated read time : 4 minutes

Jump to

EPiServer custom properties using user controls

I recently blogged about how to create custom properties with user controls in EPiServer with the help of EPiServer Template Foundation, and with the latest release on Codeplex you get two additional events that make it a lot easier to load and save your property value.

New events in the PropertyUserControlBase class

If you’ve built an EPiServer custom property using the PropertyUserControlBase class in EPiServer Template Foundation you’ve probably come across something like this:

protected override void OnLoad(EventArgs e)
{
base.OnLoad(e);

if(!IsPostBack)
{
// Load the property value
myEditControl.Text = Value;
}
else
{
// Save the property value
Value = myEditControl.Text;
}
}

However, this won’t work because postbacks are also triggered by the EPiServer tabs (such as when switching from Preview to Edit), meaning the custom property user control will sometimes be loaded with and sometimes without postback.

In other words, you cannot count on !IsPostBack to setup your property user control. Luckily, there are now events you can count on in the PropertyUserControlBase class! :)

The PropertyLoad event

First up is the PropertyLoad event which you use to get the Value property and set up your property controls accordingly:

protected override void OnPropertyLoad(EditPageEventArgs e)
{
   base.OnPropertyLoad(e);
 
   // Setup the property control based on the property value
   myEditControl.Text = Value ?? string.Empty;
}

The PropertyLoad event fires whenever the property user control loads, ie when you right-click a page in the content tree and select Edit, or when you switch tabs from View to Edit. And of course it also fires when the user control is loaded without postback.

The PropertySave event

Next is the PropertySave event which you use to set the Value property in order to have it saved:

protected override void OnPropertySave(EditPageEventArgs e)
{
   base.OnPropertySave(e);
 
   // Set the value to save
   Value = myEditControl.Text;
}

The PropertySave event fires whenever the Save, Save and view, or Save and publish button is clicked.

Complex property types

The examples above are for a simple string property, but the Value property could obviously be any XML-serializable object that you’ve set up your custom property for using the generic versions of the UserControlPropertyBase and PropertyUserControlBase classes.

Finally, a big thank you to Martin Lannsjö at HiQ for helping in testing this out!