Move built-in property to another tab when editing

image One of our customers required that we limited access to the Advanced Information tab in edit mode for normal editors. A reasonable requirement but how do you enable normal editors to adjust the sort order?

The answer is to move these built-in properties to a new tab.

Where to I hook my Event in EPiServer?

In latest releases of EPiServer CMS you are not allowed to access come parts of EPiServer to early. That is why I hook FirstBeginRequest event on EPiServer InitializationModule during Application_Start in Global.asax. You could also do this in Init() of an HttpModule.

All initialization is then done in that Event handler. We start by loading the target TabDefinition to get the ID then we hook EditPanel.LoadedPage.

EditPanel is the user class implementing EPiServers editor interface and LoadedPage is a static event that is fired every time the editor is shown. A perfect hook to tweak the editor!

Source Code in Global.asax.cs to change tab for properties

protected void Application_Start(Object sender, EventArgs e)
{
    InitializationModule.FirstBeginRequest += InitializationModule_FirstBeginRequest;
}

void InitializationModule_FirstBeginRequest(object sender, EventArgs e)
{
    CreateEventToMovePageOrderPropertyToCustomTab();
}

private int pageOrderTabID;

private void CreateEventToMovePageOrderPropertyToCustomTab()
{
    string pageOrderTabName = WebConfigurationManager.AppSettings["PageOrderTab"];
    var pageOrderTab = TabDefinition.Load(pageOrderTabName);
    if (pageOrderTab!=null)
    {
        pageOrderTabID = pageOrderTab.ID;
        EditPanel.LoadedPage += EditPanel_LoadedPage;
    }
}

void EditPanel_LoadedPage(EditPanel sender, LoadedPageEventArgs e)
{
    e.Page.Property["PageChildOrderRule"].OwnerTab = pageOrderTabID;
    e.Page.Property["PagePeerOrder"].OwnerTab = pageOrderTabID;
}

Settings in web.config

<configuration>
  <appSettings>
    <add key="PageOrderTab"
         value="Sidadministration"/>
  </appSettings>
</configuration>

As usual, drop a comment if you think this is usefull! It is good for my blogging morale. :-)

Bookmark and Share

Tags: , ,

  1. Petter’s avatar

    Good stuff! Keep em comming!

    Reply

  2. Jonatan Larsson’s avatar

    Very nice – thanks for the tips!

    Reply

  3. Robert’s avatar

    Incomplete code example.
    What is the “EditPanel” ?
    Please post th complete stuff and not half of it.

    Reply

  4. Fredrik Haglund’s avatar

    Hi Robert!

    Just add a reference to the Assembly EPiServer.UI.dll in your project. The EditPanel class is in namespace EPiServer.UI.Edit so you have to add a using statement in the top of your Global.asax.cs file.

    /Fredrik

    Reply