Episerver – How to Enhance Edit Mode with Custom Views
A day in the life of a content editor can be grueling. Having to keep up with ever-changing customer expectations, trying to anticipate website user issues, and maintaining brand consistency can be time consuming.
To help solve more complex scenarios of Property Editing for our customers, Adage uses “Custom Views” within the Episerver Digital Experience Cloud.
Before diving into Custom Views, let’s first take a look at two different scenarios of property editing within Episerver.
Standard on-page editing
For simple properties such as changing a Heading Tag on a page or block, using Episerver’s built-in helpers do the job wonderfully. This will cover both rendering of the content for the end user and on-page editing for the content editors. Here is an example in MVC, using the Html Helper PropertyFor to render the property WysiwygContent to a view.
In a scenario where multiple properties are represented by a single UI element, it may be a good idea to use a “Local Block.” A Local Block is a block used as a property on a page or another block. This is a convenient way to group properties together. The best part is Local Blocks work great with on-page editing out-of-the-box with no additional development. Here is an example of a “Link Block” used on a page and its corresponding on-page edit experience.
Complex Properties and Custom Views
Where Adage sees Custom Views coming into play is for more complex property editing cases. These could include:
- Properties interacting with other properties
- Custom properties
- Properties with complex business rules for population.
In Episerver, a content editor or developer can easily swap between On-Page Edit Mode and the All properties view with the button below.
Episerver also allows us to create customized view options here to help editors streamline day-to-day activities. Below is an example of the steps taken within the code to accomplish this.
Step 1: Create a View Configuration
Below is an example of a custom ViewConfiguration class.
A few notes about this class:
- ServiceConfiguration Attribute – Handles registration of this new view configuration during initialization.
- ViewConfiguration<> Base Class – All custom view configurations must inherit from this class. Tells Episerver the content types for which this view configuration should be available.
- Name – The name which appears in the View chooser dropdown.
- ControllerType – The module id of the client-side controller to use for this View. In this example, we are using the built-in IFrameController so we use standard MVC to render our View.
- ViewType – When using an Iframe and MVC, this should point to the route which will execute your controller.
Step 2: Register The Route
Since we used a custom route in our ViewType parameter in Step 1, we need to make sure to register it.
Step 3: Create the Controller
The controller is relatively straightforward. One important thing you’ll want to note is the code in red, which fetches the PageData object by using the “id” parameter in the Request query string.
At the end of the day, creating opportunities to streamline processes for our clients’ and their website. Custom views is an easy step in that direction!
Examples of Custom Views
Here are some examples of this feature in action. Hopefully these will give you give you an idea of the types of things you could do with Custom Views!
About This Page Type View
SEO Properties View
External API Information View
Custom Hero Image Editor View
Code samples uses in this blog post can be downloaded at https://github.com/barig224/Episerver-Custom-Views). Hope you enjoyed learning about Custom Views in Episerver. Check out some of our Episerver sites.
Our Work
