Episerver gives a flexible way of adding and rearranging gadgets in edit mode. Editors can select which gadgets should be displayed, change their position and size. But for some editing scenarios we would like to force specific gadgets to be displayed for all editors and behave similar to the “Page tree”. Those fixed gadgets should should be added automatically when Editor logs-in to the edit mode and it should not be possible to remove them. I prepared a small snippet that allow you to make this work.

Creating an example

First we need a simple gadget. It won’t have a logic inside and just display a static text. We need to register it and add client class.

Registration

To register new gadget I created “AlloyComponent” class that inherits from ComponentDefinitionBase and added Component attribute. Then I set client widget to “alloy/AlloyComponent“.

The “Category” property defines group name where gadget should appear. It can be uncommented for now to test if gadget works. But later, when we make gadget fixed, the Category property should be removed and gadget should not be selectable by Editor
adding new gadget

Implementing client widget

Widget has template with a text displayed in a DIV element.

The “AlloyComponent.js” file should be added to “ClientResources/Scripts” directory.

After running the site and adding gadget to edit mode it will looks like:
simple gadget

Automatic registration

To automatically add gadget to the sidebar we could create new implementation of IViewTransformer and use “AddAndSave” container method.

The code above will check if AlloyComponent was added and if not, then add it to the Navigation area.

Now we have gadget that will be displayed for all editors, but it still can be manually removed by Editor. Of course, after refreshing the page, it will be added again (by ViewTransformer), but it would be better to make gadget fixed.

Fixed gadgets

I prepared “FixedComponent” dojo mixin. The mixin is responsible for disabling “Remove gadget” command and “X” button when rearranging gadgets. It can be used with any custom components, not only with this example. The full source code of the mixin:

Mixin has also hideMenuBar flag that allows to hide the bottom menu bar. It can be useful when gadget has only one “Remove gadget” command and menu bar is not needed.

To use the snippet, mixin file should be simply copied to the solution and then used by component class. For AlloyComponent example:

As you can see I had to change only 3 lines of code: add dependency on “./FixedComponentMixin” (I copied the mixin to the same directory as AlloComponent.js) and add mixin to the declaration next to the _TemplatedMixin.
Now when running the site, the gadget can’t be removed.

fixed gadget

And in rearranging gadgets scenario:

rearange gadgets

it also can’t be removed:

removing fixed gadgets

Fixed built-in gadgets

With few lines of code it’s possible to make built-in gadgets fixed.
For example we would like to have fixed Versions gadget.
fixed versions gadget

We need to register new component with copy of all properties from built-in component, but with custom client editor.

Then client widget will be declared using two classes. First one will be built-in widget (in this example “epi-cms/component/VersionsComponent”) and second is FixedComponentMixin.

The Versions gadget has more menu commands, so hideMenuBar should be set to false.

Registration

Now we can extend CustomComponentsTransformer and register both AlloyComponent and FixedVersions gadgets: