Episerver CMS Tutorials For Developers New To Episerver

Getting started with an unfamiliar bit of technology can be daunting at first. Luckily, Episerver is fairly easy to get up to speed with and there are a ton of useful Episerver CMS tutorials available online to help you.

Today’s guide can be thought of as a complete newbie’s guide to Episerver CMS. I decided to write this post because when I first started messing around and learning Episerver 5 I definitely struggled to find the right answers to some of my questions. Since I started learning and using Episerver, there have been so many great movements in pushing Episerver to the next level and making it easier than ever to use. I think life for people wanting to learn Episerver is a lot easier, but I’m still yet to find a comprehensive guide that ties some of the great Episerver CMS Tutorials together. I’m hoping to break the Episerver CMS Tutorials available out there down into a manageable order to hopefully allow you to learn Episerver in a nice and easy manner. In no time at all you’ll be up a very impressive Episerver developer 🙂

1. What Is Episerver CMS?

Episerver CMS is the one of the best ASP.NET based Content Management System (CMS) around. Episerver is an incredibly powerful and flexible platform that will allow you to build pretty much any website or web application that you want to.

If you are completely new to the concepts of CMS systems completely, then I suggest you read Beginner’s Guide: What is Episerver?. This article should hopefully answer all your questions about what Episerver is, why you should use it and who else is using it.

2. What Is The iContent Interface

One of the first things you need to get to grips with when you start out with Episerver is the notion of content. All websites are made up of a hierarchy of pages, with the homepage being the page at the top of the hierarchy.

Each page in your website might have a number of reusable components shared between them. In Episerver these reusable component are called blocks. In order for Episerver to create a nice and clean API, they developed the concept of content. In Episerver all pages and blocks are related to an interface. This interface defines the properties something needs to possess in order for it to be usable in Episerver.

This interface definition is called the iContent interface. More information about the iContent interface can be found in this Episerver CMS tutorial, What is the IContent Interface?

3. Pages and Blocks

As I’ve alluded to above, an Episerver website is made up of a hierarchy of pages. A page might be something like the homepage, the contact us page or the search page.

A block is a small bit of functionality that lives on a page. On most websites, you might get a banner. If that banner is displayed on a number of pages then you could create a banner block. The concept of the block is one of Episerver CMS’s strong points compared to other CMS systems.

Blocks allow content editors to add the bit of functionality onto a page, decide the order in which they appear and how they can look. You might want a banner to only display on half the page, so the block can be set to display at ‘Half Width’

More information about what an Episerver page or block is can be found in this Episerver CMS tutorial, What Is The Difference Between An Episerver Page and an Episerver Block?

4.Content References

So you should understand the concept of pages and blocks. In the inner working of Episerver, every page and block within Episerver has to implement a special interface (iContent) in order for it to work within Episerver. A website would be pretty boring if none of the pages linked together, or shared information between themselves. This is where we get on to the next concept, the content reference.

If you think about posting a letter, each house needs its own unique address in order for your letter to get to its destination. Episerver works exactly the same. Each page needs a unique identifier in order for other pages to be able to reference it and communicate with it. In Episerver terminology this identifier is called a content reference.

I mentioned above that all Episerver items need to implement the iContent interface in order to work with Episerver. One of the properties on the iContent interface is a content reference. This means that in order for an item to work in Episerver, it has to have a unique content reference.

When content editors create pages, Episerver will automatically create a content reference for any page, based on a page ID and a few other things.

More information about the content references interface can be found in this Episerver CMS tutorial, Why Does Episerver Need A Content Reference?

5. Page Types

So you should hopefully get that page and blocks implement an interface that defines a content reference. The content reference is used by us developers and the Episerver CMS platform to uniquely identify that bit of content. As long as you roughly understand those concepts, the next step is to understand how pages are constructed.

Say your website has a homepage which contains some welcome text. In Episerver you would create a new C# class called Homepage. To display the welcome title you would create a property in your Homepage class called ‘WelcomeText’.

A basic code example for how this class could be defined, would look something like this:

[ContentType(
DisplayName = "Homepage Page",
GUID = "8dee011f-8dbf-43ab-b4f3-211db5ceb9d5",
Description = "Homepage Page")]
public class Homepage : PageData
{
[Display(
Name = "Welcome Text",
Description = "Welcome Text",
GroupName = SystemTabNames.Content,
Order = 100)]
[CultureSpecific]
public virtual string WelcomeText { get; set; }
}

The code above is pretty similar to how you would create any C# class. The main differences are the Episerver attributes and base classes you need to use. If you had this class in your Episerver website, when you ran your Episerver website. Episerver will scan all your code and anything it finds with the ‘ContentType’ attribute, it will add it into the Episerver database.

Depending on how you configure your classes, content editors should then be able to create an instance of your class in the form of a homepage. This process is really simple to start using for any C# developer. You create a class and Episerver does the rest for you.

More information about the page types can be found in these tutorials:

6. Block Types

Just like pages, blocks are also defined in exactly the same way, by C# classes. A class to define a block would look like this:

[ContentType(DisplayName = "Banner Block",
GUID = "8ba1b100-fdfa-4757-b25a-755bc5b98200",
Description = "Banner Block")]
public class BannerBlock: SiteBlockData
{
[Required]
[CultureSpecific]
[Display(
Name = "Text",
Description = "The text content",
GroupName = SystemTabNames.Content,
Order = 100)]
public virtual XhtmlString Text { get; set; }
}

More information about what an Episerver page or block is can be found in this Episerver CMS tutorial, EPiServer Blocks A Quick Reference Guide

7. Properties

Pages and Blocks are defined by classes and properties. Unlike a normal C# class Episerver provides a number of custom properties that allow pages to have more interesting components. A website would be pretty dull if all it contained were some simple strings or dates. Some of the Episerver properties include:

  • ContentArea: This allows content editor to drag blocks into an area
  • XhtmlString: This provides a content editor with a HTML editor. This editor works a lot like Microsoft word, so people can highlight and format content easily.
  • ContentReference: A reference to another page, or block
  • LinkItemCollection: A List

More information about the properties available in EpiSserver can be found in:

7. Episerver APIs

As Episerver defines your websites content it makes using the APIs really simple. The most common API you will bump into is the IContentRepository. IContentRepository allows you to get pages based on a content reference, create pages in code or even delete pages in code.

A simple example of how to get a page via the API can be found here, How To Get The Current Page In Episerver 8?.

The code looks like this:

var repository = ServiceLocator.Current.GetInstance<IContentLoader>();
var contentReference = new ContentReference();
var epiServerContent = repository.Get<PageType>(contentReference);

Conclusion

When you start learning Episerver CMS there is a lot to learn. The aim of this post is to introduce some of Episervers core concepts by outlining a number of useful Episerver CMS tutorials that will help you on your way to Episerver mastery.

Each step outlined above is a key concept in order to master Episerver. There is a lot to take in for a first read, so I would suggest you bookmark this page for reference. Over the years, I’ve worked with a number of CMS systems and Episerver is definitely one of the easier CMS systems to get into. It’s personally my favourite to work with, so if you are reading this then you have definitely made a good decision.

If you are unsure about anything, please leave a comment below and I’ll try my hardest to get back to you. Enjoy!

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

0 replies

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 *