Ynze

Working with page header properties in Optimizely

Optimizely Content Cloud

Ynze Nunnink's photo
Ynze Nunnink

The top section when editing content is the page header (also know as settings panel) and it contains some standard fields. In this post I will share how to hide, move or add properties within this header section. image.png

Hiding specific properties

The default properties are generally useful for every content type, however in some situations they are not used or require adjustments. For example the Category selector field and 'Display in navigation' checkbox that are rendered by default on every page. Now you might be thinking, I can easily override these properties in my page type and add the Ignore attribute to hide them, but unfortunately that does not work because of the way these properties are created in the PageData class.

It's still possible to hide those default properties by creating an EditorDescriptor class. The code in the following snippet will hide the 'Display in navigation' property. If we set the target type as 'bool' it will only be called for properties of type bool. Then the if statement will make sure we hide the correct property only on pages of type TagPage.

[EditorDescriptorRegistration(TargetType = typeof(bool))]
[EditorDescriptorRegistration(TargetType = typeof(bool?))]
public class HideVisibleInMenuEditorDescriptor : EditorDescriptor
{
    public override void ModifyMetadata(ExtendedMetadata metadata, IEnumerable<Attribute> attributes)
    {
        base.ModifyMetadata(metadata, attributes);

        //Get owner content
        dynamic data = metadata;
        var ownerContent = data.OwnerContent;

        //Only hide the property for content types inheriting from SettingsBase
        if (metadata.PropertyName == "PageVisibleInMenu" && ownerContent is TagPage)
        {
            metadata.ShowForEdit = false;
        }
    }
}

The result is that the checkbox is hidden on all of our tag pages. image.png

Hiding the category field

In the next example the Category field gets hidden for content types inheriting from SettingsBase. It's very similar to the snippet above, the main difference is that the target type is set to CategoryList.

[EditorDescriptorRegistration(TargetType = typeof(CategoryList), EditorDescriptorBehavior = EditorDescriptorBehavior.Default)]
public class CategoryEditorDescriptor : EditorDescriptor
{
    public override void ModifyMetadata(
        ExtendedMetadata metadata,
        IEnumerable<Attribute> attributes)
    {
        base.ModifyMetadata(metadata, attributes);

        //Get owner content
        dynamic mayQuack = metadata;
        var ownerContent = mayQuack.OwnerContent;

        //Only hide category for content types inheriting from SettingsBase
        if (metadata.PropertyName == "icategorizable_category" && ownerContent is TagPage)
        {
            //Hide property
            metadata.ShowForDisplay = false;
            metadata.ShowForEdit = false;
        }
    }
}

Move category to the page header

With an editor descriptor it's also possible to move the category field. By default it is placed within the content tab, but as shown in the Optimizely Foundation project you can also move it into the page header. Using the same descriptor that we created earlier we can move the category by setting the group name.

metadata.GroupName = SystemTabNames.PageHeader;
metadata.Order = 10000;

Adding a custom property to the page header

This technique can also be used for custom properties. All you have to do is set the group name using the SystemTabNames.PageHeader constant.

[SelectOne(SelectionFactoryType = typeof(ThemeSelectionFactory))]
[Display(Name = "Theme", Order = 2, GroupName = SystemTabNames.PageHeader)]
public virtual string SiteTheme { get; set; }

The result is that we now have a 'Theme' dropdown in the header section. image.png

These snippets are all just examples and can be used in many different ways depending on your content approach. The default properties are there for a reason so I recommend reconsidering all the options before hiding any of them. Over the years I've had to deal with requirements to make specific adjustments to the page header so that's why I'm sharing this knowledge.

dotnetcms