Try our conversational search powered by Generative AI!

Ben  McKernan
Dec 6, 2012
(6 votes)

Taking control of the EPiServer 7 user interface

The design of the user interface in EPiServer 7 has been primarily targeted toward editors and publishes. Meaning that a lot of the more advanced functionality has been hidden from the main view. Dynamic Properties is one of these pieces of functionality that has been hidden.

From my time working with previous versions of EPiServer at a partner company, I know that dynamic properties can be used quite often. So to make your lives as developers or system admins easier I’ve created a nice little plugin that will add a button to the main toolbar in edit mode. The button will display the dynamic properties edit view in the main content area of edit mode when clicked. The nice thing about this scenario is that it lets me demonstrate a couple of ways that you too can customize edit mode!

The Command

In EPiServer 7 we use a command pattern to back the visual elements in the user interface. This allows us to separate the functional concerns of a command from the visual representation. Here is the code for the edit dynamic properties command:

    // General application modules
    'dojo/_base/declare', 'dojo/_base/lang', 'dojo/topic', 'epi/cms/contentediting/ContentActionSupport',
    // Parent classes
    'epi/shell/command/_Command', 'epi/cms/_ContentContextMixin',
    // Resources
], function(declare, lang, topic, ContentActionSupport, _Command, _ContentContextMixin, resources) {
    // module:
    //        addon/command/EditDynamicProperties
    // summary:
    //        Displays the edit dynamic properties view in the main edit area when executed. Also listens
    //        for context changes in order to update whether it can execute.
    return declare([_Command, _ContentContextMixin], {
        // label: [public] String
        //        The action text of the command to be used in visual elements.
        label: resources.label,
        // tooltip: [public] String
        //        The description text of the command to be used in visual elements.
        tooltip: resources.tooltip,
        // iconClass: [public] String
        //        The icon class of the command to be used in visual elements.
        iconClass: 'dijitNoIcon',
        contentContextChanged: function() {
            // summary:
            //        Set the command's model to the new current content.
            // tags:
            //        protected
            this.getCurrentContent().then(lang.hitch(this, 'set', 'model'));
        _execute: function() {
            // summary:
            //        Publishes a change view topic to switch to the dynamic properties view for the current model.
            // tags:
            //        protected
            topic.publish('/epi/shell/action/changeview', 'addon/view/DynamicProperties', null, this.model);
        _onModelChange: function() {
            // summary:
            //        Updates canExecute after the model has been updated. Set to true if the current content is
            //        a page and the current user has the administer access level; otherwise false.
            // tags:
            //        protected
            var model = this.model,
                canExecute = model && model.capabilities.isPage && ContentActionSupport.hasAccess(model.accessMask, ContentActionSupport.accessLevel.Administer);
            this.set('canExecute', canExecute);

As you can see the only things that related to the user interface are the properties: label, tooltip, and icon class.

Here you can also see the first method for taking control of the user interface. In the _execute method we publish a topic which tells the main view to display the widget that we pass through; in this case the addon/view/DynamicProperties widget. We also pass through the model as a parameter to be set on the view since this contains the information about the current page.


You might have noticed that the label and tooltip properties are having their values set from a resource file. This resource file is using the standard EPiServer localization service with the translations coming from a XML file as usual. To use localization in JavaScript we use a special plugin module. This module takes a parameter which is defined after the ! character. In this case the parameter is epi/nls/addon.dynamicproperties. This parameter is parsed server side; the first part indicates that EPiServer will handle this language resource, the second part indicates that this is a language resource request, and the third part is the usual dot separated path to the localization in the XML file.

The View

The view that we’re going to display basically just wraps an iframe. This is because I’m not creating a new edit view for dynamic properties but rather just display the legacy one in the main content area.

    // General application modules
    'dojo/_base/declare', 'epi/routes',
    // Parent classes
], function(declare, routes, Iframe) {
    // module:
    //        addon/view/DynamicProperties
    // summary:
    //        Displays the legacy dynamic properties edit view for the current page.
    return declare([Iframe], {
        // baseUrl: [public] String
        //        The base URL to the edit dynamic properties page.
        baseUrl: null,
        constructor: function() {
            // summary:
            //        Construct the dynamic properties view and set the base URL.
            // tags:
            //        public
            this.baseUrl = routes.getActionPath({
                path: 'Edit/EditDynProp.aspx',
                moduleArea: 'LegacyCMS'
        updateView: function(data) {
            // summary:
            //        Load a new view in the iframe using the base URL and the current page's content link.
            // tags:
            //        public
            this.load(this.baseUrl, {
                query: {
                    id: data.contentLink

So all this really does is get the base URL to the legacy edit dynamic properties view and then append the current page ID to the end as a query parameter.

Getting the Command into the Main Toolbar

So now for the next method for taking control of the user interface. While not simple, it is possible to plug into the main toolbar. But first a little explanation.

EPiServer 7 uses a provider and consumer pattern for passing commands around the interface. This allows, for example, a component to say that it provides commands without having to be concerned about where the commands are consumed or how they are displayed. In this example the component toolbar is a consumer and will automatically take those commands and display them how they should be displayed in a toolbar.

So in the global toolbar case, the toolbar is a consumer and it consumes commands that are registered in a named global provider. So we need to add our command to this named provider.

require(['dojo/aspect', 'epi/dependency', 'addon/command/EditDynamicProperties'], function(aspect, dependency, EditDynamicProperties) {
    // summary:
    //        Initialize the addon by registering the command in the global toolbar.
    var handle,
        key = 'epi.cms.globalToolbar',
        registry = dependency.resolve('epi.globalcommandregistry'),
        callback = function(identifier, provider) {
            if(identifier !== key) {
            // When the command provider for the global toolbar is registered add our additional command.
            provider.addCommand(new EditDynamicProperties(), {
                showLabel: true
            // Remove the aspect handle.
    // Listen for when the global toolbar command provider is registered in the command provider registry.
    handle = aspect.after(registry, 'registerProvider', callback, true);

Here we have a small initialization script that will hook into the provider registration method and when the global toolbar provider is registered we’ll add our command.

How It Looks

This is the button in the toolbar

This is the edit dynamic properties view

To make your life easier, I’ve packaged this as an add-on which you can manually upload and install on your site if you want to try it out or you can just extract it to see the code.


Dec 06, 2012


Dec 7, 2012 12:12 PM

Excellent! I had been thinking of doing a plugin to get a tab in forms mode but this is much better!

kayvan shaabani
kayvan shaabani Jan 4, 2013 06:23 PM

Thanks Ben

I have a simple requirement which I'm not sure if I need (if its possible) to create a new editor using Dojo.

The requirement is to have a property of type "PageReference" which should be set by only pages of a specific page type (i.e. AuthorPageType).

I need to retain the Episerver's nice default PageRefrence editor, but just filter the pages in tree view based on specific ones, so the user only select the right ones.

Is this requirement something somewhere in the SDK which I cannot see or I need to do extra work?


Christian Lindeberg
Christian Lindeberg Jun 19, 2013 10:14 AM

I cant get it to work with 7.1 and patch 3. I have tried your solution here:

but no luck.

Ben  McKernan
Ben McKernan Jun 19, 2013 02:19 PM

Hey Christian, I haven't tried this in EPiServer 7.1 but I imagine the only difference would be that all the "epi/cms" references in the define should be changed to use the new dash namespace. e.g. "epi-cms/_ContentContextMixin". If you need more help you can create a thread on the forum as that is a better medium for answering these kind of questions.

Sep 30, 2013 04:17 PM

The button disapears some times for me, any guess to why that is?

Sep 30, 2013 04:51 PM

Actually... nevermind my last post. Realized that I hadn't changed from epi/cms to epi-cms on all places

Jun 11, 2014 04:35 PM

Hello, I've installed your addon and updated the epi/cms references to epi-cms. But I can't get the button to show. Is there anything else that needs to be done?

Kenia Gonzalez
Kenia Gonzalez Dec 23, 2016 01:29 PM

Thanks for a great post!

yehhaichahateintv yehhaichahateintv
yehhaichahateintv yehhaichahateintv Aug 25, 2018 09:52 PM

Mariam Khan Star Plus Watch Drama Serials Episodes Online HD. Indian Channel Star Plus Drama Serial watch Mariam Khan
Complete HD Episodes video online.

yehhaichahateintv yehhaichahateintv
yehhaichahateintv yehhaichahateintv Aug 27, 2018 07:55 AM

Shakti Colors Tv Serial Watch HD All Episodes Online, Sony Tv Dramas, Colors Tv, Star Plus, Zee Tv, Kasam, Ishqbaaz, Kumkum Bhagya, Movies, Bigg Boss 12, Tu Aashiqui,.

naagin3drama naagin3drama
naagin3drama naagin3drama Aug 29, 2018 08:38 PM

Surprised to visit this website and reading the views of all mates concerning this post. I also like this Kaleerein.

Seerat Aarzoo
Seerat Aarzoo Sep 4, 2018 09:46 AM

Great work So Amazing I like your blog and blog layout I find so informative posts here. I am your permanent visitor from today. Many Thanks for sharing such informative posts I will visit soon one again. Thanks
Kasauti Zindagi Ki Full Episode

Please login to comment.
Latest blogs
New Series: Building a .NET Core headless site on Optimizely Graph and SaaS CMS

Welcome to this new multi-post series where you can follow along as I indulge in yet another crazy experiment: Can we make our beloved Alloy site r...

Allan Thraen | Jun 14, 2024 | Syndicated blog

Inspect In Index is finally back

EPiCode.InspectInIndex was released 9 years ago . The Search and Navigation addon is now finally upgraded to support Optimizely CMS 12....

Haakon Peder Haugsten | Jun 14, 2024

Change the IP HTTP Header used for geo-lookup in Application Insights


Johan Kronberg | Jun 10, 2024 | Syndicated blog

Copying property values

In this article I’d like to show simple Edit Mode extension for copying property values to other language versions. In one of my previous blogposts...

Grzegorz Wiecheć | Jun 8, 2024 | Syndicated blog