Episerver Property Configuration with PageTypeBuilder

In a previous post, I talked about how to assign properties (fields) to tabs in Episerver using PageTypeBuilder. Property types such as Drop Down Lists or the XHTML Editor usually need some additional configurations (such as what values to display/restrict in the drop down menu). This is usually done in the EPiServer Admin mode graphical interface. But in version 1.0 of PageTypeBuilder, this couldn't be done; you had to go to the Admin mode interface to do individual configurations manually, one-by-one, defeating the purpose of synchronizing the Page Types between environments automatically.

Fortunately, PageTypeBuilder 2.0 introduced a mechanism to configure properties by implementing the PageTypeBuilder.IUpdatePropertySettings<T> interface. An Attribute class (i.e., that inherits from System.Attribute) must implement this interface. The "T" type in the generic IUpdatePropertySettings interface declaration must be an EPiServer property settings class, such as EPiServer.Web.PropertyControls.PropertySettings.MultipleOptionsListSettings or EPiServer.Editor.TinyMCE.TinyMCESettings.

The following example shows how to create a Drop Down List configuration class that defines the values that can be chosen from the list:

public class ScrollSettingsIFrameAttribute : Attribute, IUpdatePropertySettings<MultipleOptionsListSettings>
{
 public int GetSettingsHashCode(MultipleOptionsListSettings settings)
 {
 return (settings.ListOptions != null ? settings.ListOptions.Count : 0);
 }

 public bool OverWriteExistingSettings
 {
 get { return true; }
 }

 public void UpdateSettings(MultipleOptionsListSettings settings)
 {
 Dictionary<string, string> options = new Dictionary<string, string>();
 
 options.Add("no", "no");
 options.Add("yes", "yes");
 options.Add("auto", "auto");

 settings.ListOptions = options;
 }
}

Once defined, the attribute class can be used in the declaration of a property in a Page Type class:

public class PageWithIFrame : TypedPageData
{
 //... Other property declarations ...
 
 [PageTypeProperty(
 EditCaption = "iFrame scroll bars",
 Type = typeof(PropertyDropDownList),
 SortOrder = 50)]
 [ScrollSettingsIFrame]
 public virtual string Scrolling { get; set; }
}

The following example configures the TinyMCE editor for XHTML properties to display the "formatting" drop down list in the toolbar, uses the stylesheet declaration in the project's "/css/style.css" for the styles drop down menu, and defines the size of the editor:

public class HtmlEditorSettingsAttribute : Attribute, IUpdatePropertySettings<TinyMCESettings>
{
 public int GetSettingsHashCode(TinyMCESettings settings)
 {
 return settings.Height + settings.Width;
 }

 public bool OverWriteExistingSettings
 {
 get { return true; }
 }

 public void UpdateSettings(TinyMCESettings settings)
 {
 int totalToolbars = settings.ToolbarRows.Count;
 ToolbarRow row = settings.ToolbarRows[totalToolbars - 1];
 row.Buttons.Add("formatselect");

 settings.ContentCss = "/css/style.css";
 settings.Height = 400;
 settings.Width = 615;
 }
}

Once defined, use the attribute in the declaration of a XHTML property in a Page Type class:

public class SubPage : BasePageType
{
 // ... Other property declarations ...

 [PageTypeProperty(
 EditCaption = "Body HTML",
 Type = typeof(PropertyXhtmlString),
 SortOrder = 22)]
 [HtmlEditorSettings]
 public virtual string Body { get; set; }
}

You can find information about the TinyMCE configurations by searching the web, since TinyMCE is a standard JS-based editor not developed by Episerver.