How To Display Non Episerver Content Within The Episerver Editor

In this tutorial, you will learn how to display content stored in a third-party database inside Episerver CMS. Improving external content is possible via Episerver content providers. Content providers allow you to import data from a data source external to the Episerver database. Let us start by thinking about a real-life use-case 🤔

On a recent project, the client in question sold products on their websites. Any site user could post a review about any product. Reviews were stored in a third-party system. Reviews were shared between several different sites so the data could not live in the Episerver database. The client wanted the content editors to have access to the reviews in the CMS for moderation purposes. This is where a content provider can help 🔥🔥🔥

I am not going to lie, the code to do this is quite tricky and it's not a simple case of copy and paste code, you will need to do some thinking to get this working on your site, sorry! By the end of this guide, you will learn the process required to import comments within the Epsiervcer editor. On the relevant CMS page, in the right-hand side navigation pane, associated comments will appear!

Since Episerver 7 the concept of 'content' was introduced. Episerver APIs allows us to work with anything that is defined as Episerver content. This means the APIs can return pages and also concepts like images, video and comments. Anything that you can model as Episerver content will work with the Episerver API. In order to make Episerver content you need one important thing...

IContent: If you create a class that implements the IContent interface, then Episerver can access that data in the content repository API. If something implements IContent it can also be displayed within the navigation pane within the editor. This is how the block and media library work

How To Create Episerver Content

The first thing we will need is a way to store our custom data:

Our use case today is comments. In order to make the comments appear in the editor, all we need to do is implement the basic features of IContent. Our Comment class will need to implement from IContent and implement the following properties Name, ContentLink, ParentLink, ContentGuid, ContentTypeID, and IsDeleted. In this example, I will also define two custom properties, UserComment and PostedBy , to store some custom meta-data.

Note that these properties need to be virtual. Episerver also has several interfaces you can implement from and override, these include things like IReadOnly, ISecurable, ILocalizable, IModifiedTrackable, IVersionable, IResourceable, IRoutable, ICategorizable, and IExportable. These interfaces are outside the scope of this article though, however, if you want your custom class to have extra capabilities, look at implementing some of these other interfaces. We have a way to use comments with the Episerver EPI. Next, we need a way to hack into the Episerver UI. 🤔

IContentRepositoryDescriptor and ContentRepositoryDescriptorBase

Episerver allows hacking into the UI using descriptors. In this example, we can use ContentRepositoryDescriptorBase:

This class is quite basic, you override a few of the base methods and tell Episerver that you want to use ContentFolders and our new Comments class. The Roots is the part that you want to change. The Roots property defines where Episerver should store your custom content. For us, we want to be able to add comments to any page, so I return an empty enumerable which allows us to save content anywhere. If you want to restrict content to a certain section, for example, so you have everything listed under one (or more) content item node, then this is the bit you will need to change.

After you have created items DO NOT change the RepositoryKey. I've found that this class is very fragile and if you break it after you have content stored in Episerver, the whole editor can break, so be careful 😱. This makes sense, if you add content that gets deleted, expect wired shit 💩

Navigation Component

The last piece of the puzzle is to define how the custom class will render in the Episerver Ui. This will include defining things like the tab name that the comments will be listed under, in what order they should be displayed etc...

The code above is pretty self-explanatory, define a title, sort order, and the repository. That's all the code you need to get everything up and running.  To see the comments in the CMS, go to a page that has some associated comments and click the 'Toggle Assets Pane' button. 

You should now see a tab called Comments and under that, if you click on the For This Page button, you should now have comments that display in your right-hand navigation.

If you click on one of the comments, you can now view and edit the comments within Episerver itself. This is a pretty cool way to keep all related CMS page related data in one place!