In this tutorial, you will learn what a content provider is. Every developer quickly learns about how to query pages and blocks to display content on web page, but what happens if you have content you want to display that is stored in a third party database or service?

This is where today's post will come in handy. In a recent project, the client in question sold products on their websites and any user of the site could post a review about it.  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.  This series is aimed towards solving this issue by allowing content editors to edit external content within the Episerver editor. 

Our overall aim is to allow a content editor to go to a product page in the CMS and edit these third party reviews.  The code to do this is quite tricky, so, in today's post, we're going to look at how you can create a custom comments class to store comments against.  The relevant product comments for a page will be displayed in the right hand side navigation pane with editing

What sort of data should be stored as page types and what shouldn't?

Most sites will have standard content requirements like a homepage, a contact us page, or blocks like an accordion, a carousel or a hero image, but, how do you deal with things like blog comments, reviews, ratings, form submissions?  All these things are definitely part of the website but a blog comment isn't really a page or a block.

Since Episerver 7 the concept of 'content' was introduced.  We have an API that allows us to work with anything we want to define as content, so, things like images, comments, pages and even Youtube videos can all be configured to be recognised by Episerver as content and work within the editor.

IContent

If you create a class that implements the IContent interface, then Episerver can store that data in the content repository as well as a few other cool features, like allowing that data to render in the navigation panes along with the blocks and media tabs.

Creating A Custom Class

The first thing we will need is a way to store our custom data.  In today's tutorial I will be storing blog comments against a page.

To allow us to save and view comments, all we need to do is implement the basic features of IContent, which makes life easy.  Our Comment class implements from IContent and implements the following interface members Name, ContentLink, ParentLink, ContentGuid, ContentTypeID, IsDeleted.  We also define two custom properties that we will use to store data in UserComment and PostedBy. 

Note that these need to be virtual. Episerver has several interfaces you can implement from and override; these include things like IReadOnly, ISecurable, IContent, ILocalizable, IModifiedTrackable, IVersionable, IResourceable, IRoutable, ICategorizable, IExportable.  These interface are outside the scope of this article though.

IContentRepositoryDescriptor and ContentRepositoryDescriptorBase

Now we have a way to store comments, we need a way to hack into the Episerver UI.  Episerver allows us to do that using a descriptor, in this case ContentRepositoryDescriptorBase.

This class is quite basic, you override a few of the base methods and tell Episerver that you want to use ContentFolders and Comments with-it. The Roots property is probably the biggest part you may 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.

Defining the navigation component

The last piece of the puzzle is a way that defines the Episerver Ui.  This will include 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, the repository that it's using and where in the CMS to render.

Conclusion

That's all the code you need to get everything up and running.  To see your comments, 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.

Rendering_Custom_IContent_Opening

Rendering_Custom_IContent

If you click on one of the comments, you can now view and edit it within Episerver itself.  This is a pretty cool way to keep all related data in one place but to hide the bits that are only used once in a while.

Rendering_Custom_IContent_Editing

All the above code can be downloaded in a fully working website from my github account here #ILoveEpiserver