Or: “an exercise in hacking EPiServers Edit mode!”

I’ve always found it a little awkward having to do repetitive tasks spanning more than one page in EPiServer’s Edit mode as the selected tab is reset to the default “View” tab when I click on a new page.

Say for example that you should set some specific category for a couple of pages. For each page you select in the tree, you’d have to click the Edit-tab and then click the Categories-tab before you can set the category.

So, I came up with a small hack that would “remember” the currently selected tabs (by setting client cookies), and automatically restore them whenever a new Page is selected.

It works by exposing a class marked with the GuiPlugIn attribute targeting the EditPanel plugin area, and then in the ICustomPlugInLoader.List it attaches to some page event handlers to perform the necessary tricks to both resad changes to the tab selection and to initialize a new tabstrip with a previously remembered tab layout.

Note that no plugin’s are actually returned by the ICustomPluginLoader.List, it’s just used as a “bootstrap” to attach to the EditPanel page events:

   1: // ICustomPlugInLoader is just used as a bootstrap to hook up

   2: // to the EditPanel-page Load event

   3: public PlugInDescriptor[] List()

   4: {

   5:     EditPanel editPanel = HttpContext.Current.Handler as EditPanel;

   6:  

   7:     if(null!=editPanel)

   8:         editPanel.Load += new EventHandler(EditPanel_Load);

   9:     

  10:     return new PlugInDescriptor[0] {};

  11: }

Then in the EditPanel_Load event handler, it tries to locate a TabStrip-control named “actionTab” in the Pages control collection, and if its found, it first attaches an event handler to the TabClicked event and then looks in the Request.Cookie-collection if we do have a previous tab selection that should be made selected.

EditPanel_Load also takes some extra steps if the selected tab is the “Edit”-tab, so that it also can handle tab selection for the tabstrip in the PropertyDataForm-control. As this tabstrip works solely in clientmode,i.e. no postbacks, some special clientside scripting has to be applied. This is done by attaching to the PreRender event and modify the tabs “onclick”-attribute to first do a “document.setcookie()” before running the original code.

And lastly, the TabClicked event handler simply sets the selected tab in the Response.Cookies collection.

The hack is installed by simply dropping the dll in the /bin folder and thats it. No further configuration is needed. If you want to remove it, simply delete the dll from the /bin folder and its completely gone.

Disclaimer: This hack is quite dependent on the layout of the EPiServer EditPanel page and its contained control. If any of those changes in upcoming releases, the code would break.

The complete project (VS2008) including a compiled dll can be downloaded from: http://labs.episerver.com/PageFiles/111555/StickyTabs.zip

/johan