Neat Trick: Modifying Edit Mode Tabs

Last week Johan Olofsson showed me a cool trick that I figured should be passed on. It’s a fun little hack that I’ve already found useful a number of times.

Problem: You are annoyed with main tabs in edit mode (“View”, “Edit”, …). Maybe you want remove one of them (perhaps the “Statistics” that no-one seems to use) or maybe you want to have the “Edit” tab be the default tab when you select a page instead of the “View”. In my case, I had made a page provider (that I’ll share later) that produced some pages which were really data containers, and which I was too lazy to make actual templates for, so I had no need for the “View” tab at all.

The trick is to make a GuiPlugin, that’s not really a GuiPlugin. Instead it just makes sure to attach to the LoadComplete event of the editPanel (to which we register it) and then in that event modify the existing Tabs.

using System;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Xml.Linq;
 
using EPiServer.Core;           // addref: EPiServer.dll
using EPiServer.PlugIn;         // addref: EPiServer.dll
using EPiServer.DataAbstraction;// addref: EPiServer.dll
using EPiServer.UI.Edit;        // addref: EPiServer.UI.dll
using EPiServer.UI.WebControls; // addref: EPiServer.UI.dll
 
namespace EPiServer.Research.FunStuff
{
    [GuiPlugIn(Area = PlugInArea.EditPanel)]
    public class RemoveViewTab : ICustomPlugInLoader
    {
        public PlugInDescriptor[] List()
        {
            // hook LoadComplete-event on EditPanel page
            EditPanel editPanel = HttpContext.Current.Handler as EditPanel;
 
            if (null != editPanel)
            {
                //Only modify tabs when the page selected is of a specific type - in this case the types name starts with "[Fun]".
                if ((editPanel as PageBase).CurrentPage.PageTypeName.StartsWith("[Fun]"))
                {
                    editPanel.LoadComplete += new EventHandler(editPanel_LoadComplete);
                }
            }
 
            //Never return a plugin - we don't want to add tabs.
            return new PlugInDescriptor[0] { };
        }
 
        protected void editPanel_LoadComplete(object sender, EventArgs e)
        {
            // find the TabStrip with id = "actionTab"
            TabStrip actionTabStrip = this.FindControl<TabStrip>(sender as Control, "actionTab");
 
            //THIS IS WHERE YOU CAN DO WHATEVER YOU WANT TO THE TABS!
 
            // remove View-tab and set active tab to Edit.
            if(actionTabStrip.SelectedTab==0)   actionTabStrip.SetSelectedTab(1);
            ((Tab)actionTabStrip.Controls[0]).Visible = false;
 
        }
 
        // try to locate control of type T with ID==id
        // recurses into each childcontrol until first match is found
        protected T FindControl<T>(Control control, string id) where T : Control
        {
            T controlTest = control as T;
 
            if (null != controlTest && (null == id || controlTest.ID.Equals(id)))
                return controlTest;
 
            foreach (Control c in control.Controls)
            {
                controlTest = FindControl<T>(c, id);
                if (null != controlTest)
                    return controlTest;
            }
 
            return null;
        }
 
        protected T FindControl<T>(Control control) where T : Control
        {
            return FindControl<T>(control, null);
        }
    }
}

Notice that you don’t need to create a full .ascx in order to make a GuiPlugin – as long as you never try to show it (which is why we have the CustomPluginLoader return an empty array.

The challenge in this code is if you want to change / modify tabs that’s not the “View” tab – because the “View”-tab is the only tab you can be sure is at position 0. In fact, you would have to iterate through all the tabs and look on their PluginID or similar to find the ones you want to modify.

Neat Trick: Modifying Edit Mode Tabs

Recent posts