Our customer editors very often use Compare Versions functionality. The CMS has workflows enabled, so when editor change the content, he need to mark it as Ready to publish. Then one of the supervisor using Tasks list gadget will approve or reject the changes. There are many editors and just few supervisors. They daily have a lot of items to approve. And usually those are really minor changes like single word, comma or typo was corrected.

They are using “All properties compare” view. It’ a very useful EPiServer functionality with several features:

  • you can compare any two versions
  • the number of changes are displayed on tab
  • when two property values are different, then they are mark with different background color

Compare version number of changes

The EPierver 6 solution

Even if supervisor knows which property was update, reading through content and catching those small changes might be very time consuming.

Many of you who worked with EPiServer 6 probably remember that there was a tool that could improve this process. It was a version compare “With Markup”. Using this tool editor was able to show which part of text was added and which was removed. We will aim to get same effect.

Compare Version EPiServer 6

Extending built-in functionality

I decided to add markup compare functionality to EPiServer 8. Two new views will be introduced:

  • Extended All properties compare
  • Compare with markup

Compare version switch

In this post I will describe new “All properties compare” and in the next article “Compare with markup”.

ViewConfiguration class

First we need to define new ViewConfiguration class. It’s responsible for registering compare view on the server. Next we wil content types for which view that will be available. In our case it will be all content types, so we set generic type as IContentData. Finally, we set dojo widget class used by view (“alloy/editors/extendedAllPropertiesCompareView”). The widget will be located by the key property value (“extendedAllPropertiesCompare”).

Registering the editor

Compare views are defined in epi-cms/compare/command/CompareSettingsModel class inside modeOptions array. We were able to dynamically add new compare view on the backend by implementing ViewConfiguration. Unfortunately client side registration is hardcoded. The modeOptions array has two fixed items “allpropertiescompare” and “sidebysidecompare”. The CompareSettingsModel module is used to register compare views by epi-cms/compare/command/CompareCommandProvider. We need to replace this module with our custom implementation. Inside postscript method we will add two new compare views.

Client editor

The client widget extends original All properties compare view – epi-cms/compare/views/AllPropertiesCompareView. We need to override _createForm method and replace AllPropertiesTransformer with new implementation ExtendedAllPropertiesTransformer.

The extendedAllPropertiesTransformer extends AllPropertiesTransformer and set the _hint and _type values to extendedCompare

Type and hint keys will be used to locate correct FormField. In that case it should be extendedFormField. The extendedFormField will add Compare button. The onClick button event will get old and new property values. For most properties it’s just the value, but for ContentArea we need to take the items.

The functionality could work for all property types. I prepare it to work with RichTextEditor and ContentArea especially.

Compare version ContentArea

Compare version richtext

Compare service

To compare the data we will use server code. That’s why we need to prepare a service and register it in ModuleInitializer.

And the service:

The CompareStrings method use HtmlDiff class to compare properties. I got the implementation from EPiServer 6 libraries but you could achieve very similar effect using HtmlDiff nuget library.

Custom WidgetSwitcher

Finally, we need to override epi/shell/widget/WidgetSwitcher class. In the contextChanged method ensure that _loadViewComponentByConfiguration get’s one of our view if necessary. In that case there is a need to copy the file and replace original EPiServer implementation in module.config file.

compare version overriden libs

Now after click compare button, the editor will see the differences between properties

Compare version richtext differences

Compare version ContentArea differences

The full source code is available on Gist

Extended Compare versions in use