Displaying A Custom On-Page Editing View

Today's tutorial is a follow up from How To Use A “Normal” Page Controller In Episerver?. In today's guide, we're going to go a step further and use the standard MVC controller/view that we created to display extra debugging information for pages within the editor, as an additional custom view rendering. Custom_On_Page_Editing_View

The Code

By default in the EPiServer editor two views come out the box, "On-Page Editing" and "All Properties" On_Page_Editing To register a view like this (or a custom one) we need to create a custom class that implements ViewConfiguration<T>. T being the type that you want the view to be applied to.  This means you can use PageData as the type and have your custom view registered against all page types within the website, or, you can specify an individual page type and only have the view registered against that type. This flexibility is pretty cool as it means you can customise the experience for your content editors, rather than them having to deal with a global view that might not be relevant to every page.
    public class ContentPageMetaDataPlugin : ViewConfiguration<ContentPage>
        public ContentPageMetaDataPlugin()
            Key = "ContentPageMetaDataPlugin";
            Name = "Page Debugging Information";
            Description = "Page Debugging Information";
            ControllerType = "epi-cms/widget/IFrameController";
            ViewType = "/DebuggingInformation/";
            IconClass = "epi-iconForms";
In the code above, we're implementing ViewConfiguration and using the ContentPage page type as the type. The Name, Icon and Description are pretty obvious. The ViewType is the view that will be displayed.  This mean when you visit www.website.com/DebuggingInformation, something needs to live there otherwise the View will have nothing to render.

The Controller

        [Authorize(Roles = "WebEditors, WebAdmins, Administrators")]
        public ActionResult Index()
            var pageRouteHelper = EPiServer.ServiceLocation.ServiceLocator.Current.GetInstance<EPiServer.Web.Routing.PageRouteHelper>();
            PageData currentPage = pageRouteHelper.Page;

            return View(currentPage);
The only addition I've made from the controller in the original post is to add the [Authorize] attribute.  In our example, we only want content editors to be able to see the debugging information, so we've limited the action to only be viewable for Episerver content editors.  Now, if a normal website visitor tries to view the page they will be prompted to log-in like so: On_page_editing_authorization That is all there is to it.  As long as you have a controller or view you only really need to define the ViewConfiguration and Episerver does the rest.

Switching The Default View

Now we have the knowledge to create our own custom views.  You may want to have your custom view become the default view that's loaded when the page loads.  To do this you need to create a UIDesciptor  that defines, as you can probably guess, how the UI should behave:
  	public class CustomUiDescriptor: UIDescriptor<PageData>
		public CustomUiDescripto()
			DefaultView = "ContentPageMetaDataPlugin";
IN this code we use the key we defined in ContentPageMetaDataPlugin to set it as the default. Tip If you want to get rid of the default Episerver views you can use:


In today's post, we've created a custom ViewConfiguration that renders our metadata controller within the CMS as an On-Page edit option.  We limited the pages that will be able to see the debugging option to ContentPages.  If you want the debugging information to be available to anything then you could have used PageData instead.

Code Sample

All the above code can be downloaded in a fully working website from my github account here. JonDJones.com.EPiServerCustomPluggableAreaWidget

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

Back to top
var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-35662136-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'stats.g.doubleclick.net/dc.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();