World is now on Opti ID! Learn more

nguyen
nguyen  -  CMS
Dec 6, 2013
  10331
(1 votes)

Custom views and plugin areas in EPiServer 7.5

Create custom views

You might have already known that in EPiServer 7.5, it is possible to create custom views in Edit mode beside the built-in “On page edit” and “All properties” views.
In the simplest practice, all you need is to create a widget which represent your custom view and register it on the server side using a descriptor class.
In the below example, I will create a very simple view which simply displays the text “My very simple edit view”. The widget looks like this:

define([
    "dojo/_base/declare",

    "dijit/_WidgetBase",
    "dijit/_TemplatedMixin"
],

function (
    declare,

    _WidgetBase,
    _TemplatedMixin
) {

    return declare([_WidgetBase, _TemplatedMixin], {
        templateString: "<div>My very simple edit view</div>",

        updateView: function (viewInfo, context) {
        }
    });
});

         

Be noticed that the widget should have an updateView method, which is called when the view is loaded or updated due to context change. And here is the view configuration on the server side:

using EPiServer.Core;
using EPiServer.ServiceLocation;
using EPiServer.Shell;

namespace EPiServer.Templates.Alloy.Business.ViewConfigurations
{
    [ServiceConfiguration(typeof(ViewConfiguration))]
    public class SummaryView : ViewConfiguration<IContentData>
    {
        public SampleView()
        {
            Key = "sampleView";
            Name = "Sample View";
            Description = "Very simple view";
            IconClass = "epi-iconForms";

            ControllerType = "alloy/views/SampleView";
        }
    }
}

Nothing special! You provide a key, a name, a description, and an icon class for your view. The single interesting point here is the property ControllerType whose value is the module id of the widget mentioned above. You may ask why is it called Controller type while we are creating a view. The answer is that the Edit UI is design toward the MVC pattern where you have a controller widget which in turn will decide the view widget to load. In this example, for the simplicity, the controller widget does not care about the view widget as it always display the same text.

Here is what we get:

blog-1

The Edit mode switch button is now a drop down menu where you can select the brand new Sample View from.

blog-2

And the simple view is showing up.

Plug the custom view to a pluggable area

When you have so many view, the drop down many may get crowded. Also, you may want to add your view to some other places, for instance the Tool button under the Content Settings Header, or the Publish/Option menu. This feature has unfortunately missed the train in EPiServer 7.5, but with a little bit effort, we can achieve it.

If you inspected the ViewConfiguration class, you would have seen 2 properties: HideFromViewMenu and PlugInAreas. Let’s modify our sample view a bit.

using EPiServer.Core;
using EPiServer.ServiceLocation;
using EPiServer.Shell;

namespace EPiServer.Templates.Alloy.Business.ViewConfigurations
{
    [ServiceConfiguration(typeof(EPiServer.Shell.ViewConfiguration))]
    public class SampleView : ViewConfiguration<IContentData>
    {
        public SampleView()
        {
            Key = "sampleView";
            Name = "Sample View";
            Description = "A stupid simple view";
            ControllerType = "alloy/views/SampleView";
            IconClass = "epi-iconForms";

            HideFromViewMenu = true;
            PlugInAreas = new string[] { "toolButton" };
        }
    }
}

In this configuration, we want to hide the view from the drop down menu and state that we want to plug our view to the Tool button.
However, no magic has happened yet. To make it happened, I have created a simple command provider which inspects all the views available to the current content context and are configured to the specified plugin area. You just need to configure your plugin area in the client module initializer.

commandregistry.registerProvider("epi.cms.contentdetailsmenu", new AvailableViewsCommandProvider({
        plugInArea: "toolButton"
}));

The above method call registers a AvailableViewsCommandProvider with plugInArea “toolButton” to the global command provider of the Tool button whose key is “epi.cms.contentdetailmenu”. Here is the result:

blog-3

I will let you discover the command provider by yourself. It will give you a better understanding on how the command provider/consumer pattern works in EPiServer as well as how to get informed when a view is loaded.

I hope it will help you to extend the awesome EPiServer Edit UI to fit your customer’s requirements. Happy coding!

Download the code for the command provider: ViewCommandProvider.zip.

Dec 06, 2013

Comments

Linus Ekström
Linus Ekström Dec 6, 2013 04:12 PM

There is also a wrapper widget if you want to use server side technology like MVC or Web Forms to display your view. Setting the two values below in your view configuration shows how to plug in the "Dynamic Properties editorial view":

ControllerType = "epi-cms/widget/IFrameController";
ViewType = UriSupport.ResolveUrlFromUIBySettings("edit/editdynprop.aspx");

Aug 25, 2018 10:53 AM

EPI Server is well known software this was amazing software of its time this have much plugging on it. I read about its custom view on superior papers review this site that has much information about this.

Please login to comment.
Latest blogs
Troubleshooting Optimizely Shortcuts: Why PageShortcutLink Threw an Error and the Solution

As developers working with Optimizely, we often encounter unique challenges that push us to explore the platform's depths. Recently, I tackled a...

Amit Mittal | Jul 9, 2025

Commerce 14.41 delisted from Nuget feed

We have decided to delist version 14.41 of the Commerce packages as we have discovered a bug that prevents current carts to be saved into...

Shahrukh Ikhtear | Jul 8, 2025

How Optimizely SaaS CMS Isn’t Just Another Commodity

CMS platforms these days are becoming commoditised. The modelling of most systems lends itself to automation. Giving marketers more flexibility wit...

Chuhukon | Jul 4, 2025 |

How to Set Up CI/CD Pipeline for Optimizely Frontend Hosting Using GitHub Actions

As I promised in my previous blog post about getting started with Optimizely Frontend Hosting, today I’m delivering on that promise by sharing how ...

Szymon Uryga | Jul 2, 2025

Environment-specific badges in the Optimizely CMS

Step 1: Add Environment Info to the UI Create a custom UIDescriptor and a ComponentDefinition to inject a badge into the CMS UI. using EPiServer.Sh...

Rajveer Singh | Jul 1, 2025

Boosting by published date with Relevance

Goal: To ensure that the latest published or last updated content is ranked higher in your search results, you can modify your query to include a ...

Rajveer Singh | Jul 1, 2025