How To Display Non Episerver Content Within The Episerver Editor

This post is the first in a series that will explain what a content provider is and how they can be used. Every developer quickly learns about how to use pages and blocks to deliver content within the CMS itself, but what happens if you have data stored in a third party database or service; what happens if you simply don’t want all your meta-data stored within the Episerver page tree.  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, we now have the concept of ‘content’.  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.

[ContentType(
GUID = "14bbf4a1-cd38-47f0-a550-1028cc989c4f",
AvailableInEditMode = true)]
public class Comment : ContentData, IContent
{
public virtual XhtmlString UserComment { get; set; }
public virtual string PostedBy { get; set; }
public string Name { get; set; }
public ContentReference ContentLink { get; set; }
public ContentReference ParentLink { get; set; }
public Guid ContentGuid { get; set; }
public int ContentTypeID { get; set; }
public bool IsDeleted { get; set; }
}

Code Walkthrough  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.

[ServiceConfiguration(typeof(IContentRepositoryDescriptor))]
public class CommentsPaneDescriptor : ContentRepositoryDescriptorBase
{
public static string RepositoryKey { get { return "commets"; } }
public override string Key { get { return RepositoryKey; } }
public override string Name { get { return "Comments"; } }
public override IEnumerable<Type> ContainedTypes
{
get
{
return new[]
{
typeof(ContentFolder),
typeof(Comment)
};
}
}
public override IEnumerable<Type> CreatableTypes
{
get
{
return new[] { typeof(Comment) };
}
}
public override IEnumerable<ContentReference> Roots
{
get
{
return Enumerable.Empty<ContentReference>();
}
}
public override IEnumerable<Type> MainNavigationTypes
{
get
{
return new[]
{
typeof(ContentFolder)
};
}
}

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.

Warning 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..

[Component]
public class CommentsPaneNavigationComponent : ComponentDefinitionBase
{
public CommentsPaneNavigationComponent()
: base("epi-cms.component.SharedBlocks")
{
Categories = new[] { "content" };
Title = "Comments";
SortOrder = 1000;
PlugInAreas = new[] { PlugInArea.AssetsDefaultGroup };
Settings.Add(new Setting("repositoryKey", CommentsPaneDescriptor.RepositoryKey));
}
}

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

Working Code Example

All the above code can be downloaded in a fully working website from my github account here.  The demo also has set-up fixtures included so you should have a few comments pre-assigned to the content page JonDJones.com.CustomContentInEpiserverNavigation

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

More Posts

5 replies
  1. Jens Qvist
    Jens Qvist says:

    Hey,

    Following your article I implemented this in my solution. I can store the comments and they show up if I set “Roots” to SiteDefinition.Current.ContentAssetsRoot. Like this

    For this Page (The actual root for “For this Page” -folders I guess?)
    The name of page (For this page folder for a specific page)
    Comment1
    Comment2

    But if I leave Roots empty like in your example. I get nothing. It is empty.

    Have any idea what might cause this? I just want the ContentAssetsFolder for the page I am viewing.

    Reply

Trackbacks & Pingbacks

  1. […] How-to-display-non-episerver-content-within-the-episerver-editor […]

  2. […] talked previously about How To Display Non EpiServer Content Within The EpiServer Editor and not all content displayed on your website might live in EpiServer at all. You might have […]

  3. […] talked previously about How To Display Non EpiServer Content Within The EpiServer Editor and not all content displayed on your website might live in EpiServer at all. You might have […]

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *