Create an EPiServer Composer page type with Page Type Builder

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

Here we look at how to create a new Composer page type and template using EPiServer Composer 4 and Page Type Builder.

Estimated read time : 8 minutes

Jump to

Prerequisites

This post is based on:

Create a PTB class for the Composer tab

In order to easily add page properties to the Composer tab we simply create a class deriving from Page Type Builder’s Tab class and set the name, access level, and sort order to the exact same values as the existing tab to avoid Page Type Builder creating an additional Composer tab for us.

Although we set the name to “Extension” the tab will actually be called “Composer” in the UI. This is handled by the language files.

public class ComposerTab : Tab
{
    public override string Name
    {
        get { return "Extension"; }
    }
 
    public override AccessLevel RequiredAccess
    {
        get { return AccessLevel.Edit; }
    }
 
    public override int SortIndex
    {
        get { return 1000; }
    }
}

Create a Composer page type base class

I recommend creating a base class for your Composer page types. It should at least contain the property type used for editing Composer pages, called ExtensionPageProperty (note that it needs to be unique per language):

public abstract class ComposerPageBase : PageTypeBase
{
    [PageTypeProperty(
        Searchable = true,
        UniqueValuePerLanguage = true,
        Type = typeof(ExtensionPageProperty),
        Tab = typeof(ComposerTab))]
    public virtual string ExtensionPageProperty { get; set; } 
}

Note: my base class in this case inherits PageTypeBase which comes from EPiServer Template Foundation. If you’re not using ETF you can inherit Page Type Builder’s TypedPageData class instead.

Create a Composer page type

The page type is created much like any other Page Type Builder page type. The most notable thing is that we add a property called MainArea, an area where Composer blocks can be added. However, this property is hidden from edit mode since Composer pages are edited through the ExtensionPageProperty property – which we added to our ComposerPageBase base class earlier.

[PageType("19AA1025-05DC-4564-8ADD-1F925D1486B2",
    Name = "Composer Page", 
    Description = "Dynamic page template with a heavy customizable layout",
    Filename = "/Templates/PageTemplates/ComposerPageTemplate.aspx")]
public class ComposerPage : ComposerPageBase
{
    [PageTypeProperty(
        DisplayInEditMode = false,
        UniqueValuePerLanguage = false,
        Searchable = true,
        Type = typeof(ExtensionContentAreaProperty),
        Tab = typeof(ComposerTab))] 
    public virtual string MainArea { get; set; } 
}

Set the page type GUID explicitly (optional)

When I create a new page type class I set the page type GUID manually (using createguid.com to create one). Page Type Builder will then use that GUID when creating the page type the first time after the page type class has been compiled. That way I don’t have to look up the GUID in the database. That’s just because I want to be able to change the page type name in code without having additional page types created by Page Type Builder.

Create a Composer page template

The code-front (ASPX)

We’ll make our page template inherit the site’s master page, so minimal markup is required. We simply add an ExtensionContentArea control for the MainArea content area we created earlier:

<asp:Content ContentPlaceHolderID="Content" runat="server">
 
    <Extension:ExtensionContentArea 
        ID="MainArea" 
        Description="The main content area of the page"
        runat="server" /> 
 
</asp:Content>

The code-behind

Our page template is quite trivial, we just have to make sure it inherits Composer’s ExtensionBaseTemplate class (otherwise we won’t see the Composer – Edit On Page option in the right-click context menu):

public partial class ComposerPageTemplate : ExtensionBaseTemplate
{

}

Composer page types and content areas in admin mode

Our new Composer page type, including the content area we added to it, will now pop up in admin mode:

image

Add a new Composer page

Now, if we add a new page in edit mode…

image

…we’ll see the Composer page types grouped together:

image

We’ll click our Composer page type and publish it. Now we can edit our page by either editing our page in edit mode and switching to the Composer tab…

image

…or by switching to view mode and then selecting Composer – Edit On Page from the right-click context menu:

image

Now we can start adding Composer blocks to our new page:

image

Creating new Composer blocks

The next step is to start creating your own Composer blocks. I've put together some tips and tricks on how to create Composer functions using Page Type Builder, hopefully it'll get you started!