In this tutorial, you will learn how to order the tabs within the Episerver editor for your pages and blocks. Making the CMS as user friendly for content editors is one of the main keys to delivering a successful project that the business and the content editors love. One big annoyance for content editors is not having the properties within the pages and block sorted in a nice and easy to use way. In this tutorial, you will learn about all the code that you will require to make this happen, if this sounds of interest, read on 🔥🔥🔥
Episerver Tabs Explained
When you apply the [Display] attribute on a page or block proper, you can also use the GroupName property to define what tab that property will get displayed in. To make the property display in a tab called Example Tab you would write this code:
The problem with this approach is that you can't set the order in which the tabs are rendered. As a rule of thumb, tabs are rendered on a first-come, first-served basis. If you want to be more specific on the order of the tabs you will need to use a TabDefinition and the TabDefinitionRepository.
In this example, I'm going to use an abstract class to define my properties, so we can do some clever stuff with Structure Map and DI later on. You don't have to use this pattern but I quite like it 😉. The code we will create will use dependency injection to inject all the tabs into a tab creator. The benefit of this approach is that whenever you add a new tab into the system, all you need to do is create a new class that implements the base class and it will automatically be added into Episerver with no extra coding required. The code for the base class will look like this:
The next part of the puzzle is creating the tab definition:
OnLine 12, I create an Episerver tab definition and add the properties I care about. NOTICE the SortIndex property. This is the thing that will order the tabs. Next up, we will register this code within StructureMap:
The secret ingredient of this configuration is the AddAllTypesOf statement. AddAllTypesOf() tells StructureMap to register all concrete classes that implement the abstract base class to this configuration. To finish up, we need to configure Episerver on boot-up to apply and set the tab order. This is done using an InitializationModule:
We have quite a lot of code here, however, most of it is pretty basic. On line 20 in RegisterTabs. I use the ServiceLocator and the GetAllInstances() method. This line is the thing that will return back all the tabs defined within the project:
On-Line 40, I useTabDefinitionRepository.List() to iterate through all the existing tabs registered within Episerver to check if the tab has already registered:
If you put a breakpoint and inspect the collection, you will also see the system tabs like Content and Settings within the list. This means if we want to, we can re-order the built-in tabs as well 😊 On-Line 35 within AddTabToList() the tab meta-data, I updated the tab information within the CMS with a sort order 💥
How To Reorder Build-in Tabs
If you want to re-order the system tabs, you need to create a tab definition that inherits from EpiserverTabBase. In Episerver v7 onwards, there is a slight discrepancy in the naming conventions. The legacy names are still used in the tabs although the display name is different. For example, Content is called Information, Advanced is called Settings and Metadata is called SEO. If you want to change the sort order of the Content tab you would need to pick it using the Information identifier, like so:
To help you out, these are the default preset sort order indexes for the built-in types:
If you followed everything correctly, then you create a page like so:
The tabs within the CMS should now be reordered 💥
You should not be a tabbing guru. You know how to create a tab using the GroupName property. YOu know how to order tabs using TabDefinitions. When working with the TabDefinitionRepository, we also get access to the preset/default Episerver tabs. Happy Coding 🤘
