EPiServer Tab Assignment with PageTypeBuilder

In my previous post, I demonstrated how to implement a hierarchical inheritance structure for Page Types in EPiServer using PageTypeBuilder. But all the properties are created under the default “Content” tab in Edit Mode. One of EPiServer’s nicest features is the ability to organize properties into tabs; to avoid cluttering the editor’s interface, group related properties and assign user permissions to a group of properties.

PageTypeBuilder allows you to create tabs, and assign properties to them. Creating a tab, is as simple as creating a class that inherits from PageTypeBuilder.Tab:

public class Promotions : PageTypeBuilder.Tab
{
 public override string Name
 {
 get { return "Promotions"; }
 }

 public override AccessLevel RequiredAccess
 {
 get { return AccessLevel.Edit; }
 }

 public override int SortIndex
 {
 get { return 20; }
 }
}

• The Name property is the text you want to display on the tab.
• The RequiredAccess property allows you to assign user permissions to the tab by using EPiServer.Security.AccessLevel enum.
• The SortIndex property allows you to position the tab in the Editor pane.

To assign properties in any Page Type to a tab, include the “Tab” parameter in the PageTypeProperty attribute declaration:

public class HomePage : BasePageType
{
 [PageTypeProperty(
 EditCaption = "Promotion Image",
 Type = typeof(PropertyImageUrl),
 Tab = typeof(Promotions),
 SortIndex = 40)]
 public virtual string PromoImage { get; set; }

 [PageTypeProperty(
 EditCaption = "Promotion Link",
 Type = typeof(PropertyPageReference),
 Tab = typeof(Promotions),
 SortIndex = 41)]
 public virtual PageReference PromoLink { get; set; }
}

When structuring your project, make sure to locate your Tab classes in a namespace that is “global” to all Page Type classes.

In an upcoming post, I’ll talk about how to configure special properties, such as TinyMCE options for XHTML fields.