Side by side editing - alternative to Optimizely On-Page Edit

I've built a nice improvement add-on for Editors. It's very easy to install, uses only the public API and requires no configuration. It's available for free from https://nuget.optimizely.com/package/?id=SideBySideEditing and can be installed to any Optimizely CMS12+

Introduction

This package is an alternative editing view which additionally presents a preview on the right hand side. The preview is automatically refreshed after each save.

The On-Page Edit view which is built-in to Optimizely CMS is very powerful. However, it is also quite challenging to configure correctly, and often I saw that many people simply disabled it and switched to All-properties mode.

It is also cumbersome because by definition you can only edit the visual properties but if you need to change non-visual properties you need to switch back to All-properties mode.

This add-on tries to deliver best of both worlds. You will still use the All-properties mode for editing, however will still be able to see the real-time rendering.

Details

This addon's most powerful feature is the simplicity. You just need to install the nuget, turn the module on and that's it. There are no restrictions on how the delivery should be rendered (as opposed to the built-in On-page edit which requires specific data-epi attributes). There is no need to use Html/Tag helpers or render data-epi manually. Of course data-epi attributes, when used correctly will still work, making it possible to refresh just a part of the page. However, I had to think of another way because some properties may not be rendered visually, for example if you have a boolean property called

ShowHeader

Because of that I change the preview iframe so that it is just refreshed automatically behind the scenes after each successful save operation.

In order to start using SideBySideEditing you need to add it explicitly to your site.

Install-Package SideBySideEditing

It's available through the official Optimizely nuget feed - https://nuget.optimizely.com/package/?id=SideBySideEditing

After it's installed please add the following statement to your Startup.cs:

public class Startup
{
    ...
    public void ConfigureServices(IServiceCollection services)
    {
        ...
        services.AddSideBySideEditing();
        ...
    }
    ...
}

AddSideBySideEditing extension method also accepts optional parameter of Action<SideBySideEditingOptions> which lets you configure the add-on according to your needs.

List of available options:

• RegisterIframeAutoRefresher - (default: true) - Auto-refresh the preview iframe in the side-by-side view. If your views use tag/html helpers and render all data-epi attributes correctly you can turn this off.

After installation you will see the new view in the View Switcher:

Automatic preview refresh

By default, the preview just refreshes itself behind the scenes after each successful Save operation. Very important to note is that there are no restrictions on the delivery site. There is no need to use HtmlHelpers or TagHelpers which render data-epi* attributes or to render those manually.

If your delivery correctly renders data-epi attributes, all your properties are rendered visually meaning the is DOM element with data-epi-edit="your_property_name" or data-epi-property-name="your_property_name" and you don't want the preview to be automatically reloaded you can:

public class Startup
{
    ...
    public void ConfigureServices(IServiceCollection services)
    {
        ...
        services.AddSideBySideEditing(options =>
        {
            options.RegisterIframeAutoRefresher = false;
        });
        ...
    }
    ...
}

In that way the preview will of course work more seamlessly and faster because only a small part of the page is updated behind the scenes.

Please bear in mind that this is the first version, and there might be issues here and there. I would really appreciate some feedback, both positive and negative. I would also appreciate any kind of bug reports, contributions or regular comments. I would like to know if it's an idea worth investing my time or not.

The code is available on my github https://github.com/barteksekula/side-by-side-editing Please report and contribute there or comment this blog post!

Happy Editing! :)