Organizing Editors with Containers

When adding [Editable…] attributes on content classes you are defining what the editor interface will look like. It’s possible to fine-tune how this interface will appear using “containers”. An example:

     [TabContainer("content", "Content", 0)]
     [WithEditableName(ContainerName = "content"), WithEditableTitle(ContainerName = "content")]
     public abstract class PageBase : N2.ContentItem
     {
           [EditableFreeTextArea(ContainerName = "content")]
           public virtual string Text { get; set; }
     }

Adds title, name and text editing to a tab “Content”.

     [N2.PageDefinition]
     [TabContainer("advanced", "Advanced", 10)]
     public class HomePage : PageBase
     {
           [EditableImage(ContainerName = "content")]
           public virtual string ImageUrl { get; set; }
 
           [EditablePageDropDown(ContainerName = "advanced")]
           public virtual ContentItem AboutPage { get; set; }
 
           [EditablePageDropDown(ContainerName = "advanced")]
           public virtual ContentItem CookiePage { get; set; }
     }

Adds image picker to the Content tab defined in the base class, and an “Advanced” tab with two drop down editors. The advanced tab is sorted after the content since it’s sortOrder property is greater (10 > 0).

This is the previously defined editor interface:

Nesting Containers

It’s also possible to nest containers:

     [TabContainer("content", "Content", 0)]
     [FieldSetContainer("meta", "Meta attributes", 0,
           ContainerName = "content", SortOrder = 100)]
     [WithEditableName(ContainerName = "content")]
     [WithEditableTitle(ContainerName = "content")]
     public abstract class PageBase : N2.ContentItem
     {
           [EditableFreeTextArea(ContainerName = "content")]
           public virtual string Text { get; set; }
 
           [EditableTextBox(ContainerName = "meta")]
           public virtual string MetaDescription { get; set; }
 
           [EditableTextBox(ContainerName = "meta")]
           public virtual string MetaKeywords { get; set; }
     }

The resulting interface after the changes above:

Built-in Containers

These are the built-in containers:

[ExpandableContainer]
[FieldSetContainer]
[Separator]
[TabContainer]

To build your own extend from N2.Definitions.EditorContainerAttribute.