In this tutorial, you will learn how to use a standard MVC controller/view that we created to display extra debugging information for pages within the editor, as an additional custom view rendering. This tutorial is a follow up from How To Use A “Normal” Page Controller In Episerver? and you may want to read this to learn more around how controllers work within Episerver. In this tutorial, you will learn how to create this:

Custom_On_Page_Editing_View

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 being the type that you want the view to be applied to. 

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.

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 means when you visit www.website.com/DebuggingInformation, something needs to live there otherwise the View will have nothing to render.

The Controller

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:

The key is used to define the ContentPageMetaDataPlugin as the default view.

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 content pages.  If you want the debugging information to be available to anything then you could have used PageData instead.