In order to keep the Edit Panel as clean as can be, I’ve written a small extension that enhances the ability to disable and hide buttons in the EditPanel for specific PageTypes. This post explains the setup for the EditPanelManager extension, which options it currently supports and how the implementation has been done. The main objective of this post is to give insight in a possible solution to the problem and should not by default be read as the best solution. While all code is usable and tested it could well be optimized at places.
The Edit Panel, as you probably know, is one of the areas for which you can use a GuiPlugIn with Area set to PlugInArea.EditPanel to add custom tabs. With these tabs you can add specific functionality to pages or PageTypes for instance which can improve the work for your editors in case you need to provide some functionality that otherwise would mean manual selection or at least non trivial work.
While this is a great way to extend your specific pages or PageTypes, adding a multitude of these custom GuiPlugIns can make the Edit Panel a bit overwhelming to your editors in the number of tabs they see. Most of the times however your editors won’t be using all of these tabs frequently. Some tabs probably won’t be used at all throughout the site, and perhaps some tabs are only used for a specific PageType.
This extension uses an xml configuration file to manage the tabs in the EditPanel for our PageTypes. I’ll start by explaining this configuration. Further down the post I’ll show how we can hook into EPiServer to influence the actual tabs being displayed in the EditPanel.
Let’s start with the structure of the xml configuration file. This will explain all of the options that are available in this extension and will provide the basis insights on what to do with those options.
The type element
Within the ‘pagetypes’ node you set up a ‘type’ element. Each type element reflects a single PageType in your EPiServer site structure. The are two attributes on the type element. The first is the ‘name’ attribute, which is mandatory. The name attribute contains the name of the PageType that you want to manage the EditPanel tabs for. The second attribute is the ‘active’ attribute, which is optional. This attribute contains the name of the EditPanel tab that you want to set as the default tab which is displayed when an editor selects a page from the PageTree (Note: if this is the same for all your PageTypes or there is no need to customize this for each PageType you should probably use the ‘uiDefaultPanelTab’ in your EPiServer site configuration).
The property element
Within the type element there is a single ‘properties’ element that contains a number of ‘property’ elements. Each property element reflects a tab that exists in the EditPanel; like the Preview tab, the Edit tab, the Workflow tab, the Version List tab etc. The are three attributes on the property element. The first is the ‘name’ attribute, which is mandatory. The name attribute contains the name of the EditPanel tab that you want to manage. The second attribute is the ‘enable’ attribute, also mandatory. The enable attribute is a Boolean and holds the values ‘true’ or ‘false’. If set to true, the EditPanel tab should be displayed. If set to false the EditPanel tab should not be displayed. The third attribute is the ‘ignoreroles’ attribute, which is optional. This attribute can hold a comma separated list of user roles. This works as an override to the enable attribute. Users from these user roles are not taken into account on the enable attribute. In the above example this means that the ‘MySecondEditPanelTabName’ is not visible to anyone, except users from the ‘MyUserRole’ user role.
Hopefully you’re still reading ;) The summary above highlights the functional use of the EditPanelManager extension. The next part will explain some more on how this can be achieved with some code examples as well. Before we get into that just another small example xml configuration.
Try and see if you understand how this would affect the EditPanel of your site editors (Note: spoiler below the example!)
Ok, so how does the above configuration affect our editors?
Once logged in, I won’t see the View tab in the EditPanel for the TeaserPageType. Further I won’t see the VersionList, Workflow and Statistics tab on the NewsPageType, and the Edit tab is the default tab when selecting a page of type NewsPageType in the PageTree. If the logged in user has the ‘WebAdmins’ user role he’ll see all five tabs on the EventPageType. If the logged in user has the ‘WebSpecialAdmins’ user role, he’ll only see the ‘View’ tab in the EditPanel.
So far for the examples. As promised I’ll dive into the actual implementation.
We start by creating a GuiPlugIn. Let’s call this ‘EditPanelManager’.
The next step is to implement the ‘PlugInDescriptor List()’ method from the ICustomPlugInLoader interface. In short we add an EventHandler to LoadComplete of the EditPanel if the PageType of the current page exists in our xml configuration file.
The EventHandler is added to manipulate the way the tabs in the EditPanel are rendered (Thanks to the article ‘Neat Trick: Modifying Edit Mode Tabs’ by Allan Thræn).
We also need to implement the LoadComplete event of the EditPanel for which we’ve added the new EventHandler in the ‘PlugInDescriptor List()’ method. There are three single line calls in the LoadComplete event. First we get the TabStrip object by looking for the ‘actionTab’ control. Secondly we retrieve all properties (the tabs) that are configured for the current page type in our xml configuration file. Finally, we call our Tab Manager that handles the processing of the individual tabs.
Within both the ‘PlugInDescriptor List()’ method and the LoadComplete event method there are calls to certain Helper classes. Of course you can set this up any way you like. For this demo I’ve chosen to just simply set up two classes; the EditPanelManagerHelper and the TabStripHelper.
The EditPanelManagerHelper is used to retrieve the correct PageTypes and properties from our configuration file. It has two methods. The first method is ‘GetPageTypeNamesFromConfig()’ and reads the xml configuration file for all PageTypes defined using the ConfigurationManager. The second method is ‘GetPropertyElementsFromPageTypeConfigElement()’ that reads all properties for a given PageType present in the xml configuration file.
The second helper class is the TabStripHelper. This contains the actual logic that controls which tabs are displayed and which are hidden.
This helper class contains two methods. The ‘UserHasRole’ method has been added here for convenience, but you probably have another place for this in your codebase. It simply checks the current users role to the provided userrole list from the ‘ignoreroles’ attribute for the current PageType.
The first method ‘SetTabs()’ holds three input parameters. The current TabStrip (which holds all tabs of the EditPanel), the list of tabs that you configured in your xml configuration file for the given PageType and the name of the activeTab if present in the xml configuration file. It simply iterates over all controls in the TabStrip and compares these to the xml configuration setup.
And there you have it, that’s all there is to it. As you can see this example shows how to influence the way tabs are rendered within the EditPanel and can possibly simplify the way your site editors experience the Edit Mode of EPiServer. Feel free to comment!