Creating a Simple Episerver Page Type Hierarchy Using PageTypeBuilder

In my previous post, I did a short introduction to Joel Abrahamsson’s PageTypeBuilder library for EPiServer. Among other features, I did a quick description of one of PageTypeBuilder’s greatest features, structural inheritance. In this post, I’ll describe a simple hierarchical Page Type inheritance structure example.

Let’s begin with the “Base Page Type” (that inherits from PageTypeBuilder.TypedPageData):

public class BasePageType : TypedPageData
{
 [PageTypeProperty(
 EditCaption = "Page teaser",
 Type = typeof(PropertyString),
 SortOrder = 10)]
 public virtual string PageTeaser { get; set; }

 [PageTypeProperty(
 EditCaption = "Show top image",
 Type = typeof(PropertyBoolean),
 DefaultValue = false,
 DefaultValueType = DefaultValueType.Value,
 SortOrder = 11)]
 public virtual bool ShowTopImage { get; set; }
}

Each field is decorated with the PageTypeProperty attribute, where you can define its properties including the caption for the end user. After defining the base, we can implement “concrete” Page Type classes that inherit from the base, and implement their own specific fields:

[PageType(
 Name = "Site inner page",
 Description = "Page type for all inner pages.",
 Filename = "~/Templates/InnerPage.aspx"
 AvailablePageTypes = new Type[] 
 { 
 typeof(InnerPage), typeof(SubPage) 
 }
 )]
public class InnerPage : BasePageType
{
 [PageTypeProperty(
 EditCaption = "Page HTML Body",
 Type = typeof(PropertyXhtmlString),
 SortOrder = 20)]
 public virtual string Body { get; set; }

 [PageTypeProperty(
 EditCaption = "Promotional Image",
 Type = typeof(PropertyImageUrl),
 SortOrder = 21)]
 public virtual string PromoImage { get; set; }
}

The PageType attribute defines the name of the Page Type in Episerver, a description of the page, and most importantly, the ASPX file name for the presentation of the Page Type (template). Also, you can specify an array of the Page Types that are allowed to be created (as page instances) under a page that has been instantiated from the Page Type being defined (i.e., when you create a page using the defined Page Type, its children are restricted to be of the types you entered in the array).

In the previous example, since InnerPage inherits from BasePageType, it will not only have the Body and PromoImage properties, but also the PageTeaser and ShowTopImage properties as well.

Finally, you can also implement subclasses of the “concrete” Page Type classes for specific functionality:

[PageType(
 Name = "Site subpage",
 Description = "Page type for third-level pages.",
 Filename = "~/Templates/SubPage.aspx")]
public class SubPage : InnerPage
{
 [PageTypeProperty(
 EditCaption = "Promotion link",
 Type = typeof(PropertyUrl),
 SortOrder = 30)]
 public virtual string PromoLink { get; set; }

 [PageTypeProperty(
 EditCaption = "Automatically redirect to",
 Type = typeof(PropertyPageReference),
 SortOrder = 31)]
 public virtual PageReference AutomaticRedirect { get; set; }
}

In this last example, the SubPage page type will inherit all the properties from its parents: PageTeaser, ShowTopImage, Body, PromoImage; and it will include its own properties PromoLink and AutomaticRedirect.

To create the actual templates (ASPX with the presentation of the Page Types), instead of inheriting from Episerver’s standard TemplatePage, you have to inherit from PageTypeBuilder’s generic TemplatePage<T>, where T is the Page Type class that is associated to this presentation component:

public partial class InnerPage : TemplatePage<PageTypes.InnerPage>

You can access the Page Type’s fields in code-behind with the CurrentPage property normally by using string indexes, or better, by accessing them as standard .NET properties:

this.CurrentPage["Body"]
this.CurrentPage.PromoImage

In the ASPX front-end, you can still use the EPiServer:Property web control.

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

In an upcoming post, I’ll describe how to assign Tabs to properties, and how to configure the TinyMCE editor for XHTML fields.