Wow, time flies, doesn’t it? In the last installment of this blog series, I talked about getting started with Episerver as an Ektron developer. That still applies, so if you’re looking to begin using Episerver as a developer, I encourage you to start there, as I’ll be making assumptions about what you have available in your Visual Studio installation.
Let me start by saying that this blog won’t be able to cover everything, or even most things. Episerver has some very robust capabilities for creating content, and along with that comes a bit of a learning curve. Thankfully, we can use some familiar concepts from Ektron’s PageBuilder technology to get started on the road to learning Episerver.
We can start with the basics here. Episerver content is all strongly typed content, similar to the ContentType creation process Ektron has espoused for working with Smart Forms. Thankfully, creating these strongly typed models for Episerver content in MVC and WebForms is an identical process. The only thing that is different is the display (or View) of that content, which we’ll cover in Part 3.
Episerver has a hierarchy of content that is broken down into the following: Pages, Blocks, Folders, and Media (as well as Catalog content, which we won’t be covering, as it is e-commerce specific). For the purposes of this blog, we’ll be covering the non-UI side of Pages and Blocks.
The programmatic side of pages is called a page type. Think of a page type as the combination of a Smart Form and a PageBuilder page. It can include properties specific to that page, like Smart Form fields, but it also includes something called a ContentArea. The ContentArea is similar to a drop zone in PageBuilder. Inside the ContentArea you can add Blocks (these are easiest to compare to PageBuilder widgets) and other Pages.
I found the NewsPage in Episerver’s Alloy demo site to be a great example. You can find the class that references this under /Models/Pages/NewsPage.cs. This file provides an example of a Block being added to a page (in this case, the PageListBlock, which we’ll cover later). You can define the properties as needed for this particular page type. You’ll also see that the NewsPage inherits from StandardPage (we’ll skip over this one for now, as it gets fairly complicated) which in turn inherits from SitePageData, which finally inherits from PageData. PageData is the Episerver.Core reference that every Page must inherit from. In this case, the SitePageData.cs classes goes ahead and adds some really nice to have items for every page, which makes for a great starting point.
I know that in the past, folks have asked about inherited Smart Form configurations. Well, here it is. Previously, these would be set in the Ektron properties area for a content item or Smart Form. Because Episerver uses strongly typed content by default, you now you have total autonomy to declare your own properties for every page on your site.
To keep things consistent, we’ll use the PageListBlock referenced in the NewsPage when talking about Blocks. Blocks are also strongly typed content. The biggest difference between Blocks and Pages is that Blocks can exist at runtime and can be per instance or global. If you look at the PageListBlock, it inherits from SiteBlockData. When you open that, you might be confused that it’s simply empty or contains just a comment (depending on which sample you’re using). That comment is worth its weight in gold:
/* BEST PRACTICE TIP
* Always use your own base class for block types in your projects,
* instead of having your block types inherit BlockData directly.
* That way you can easily extend all block types by modifying your base class. */
As in the case with Pages above, you can also globally influence all of your Blocks with properties. This gives you tons of flexibility and, with good planning, can reduce the work overhead of needing to extend functionality.
Moving back to the PageListBlock, you’ll see a list of public properties, similar to fields in a widget. You’ll also notice that each of those properties contains decorators. We’re going to skip over those for now, but I think you can take a stab at what they do. Just like the pages mentioned previously, each of those is a strongly typed item, getting you all the benefits of those types.
We’ve barely scratched the surface of creating and working with Content in Episerver. Hopefully this is helpful in getting started with understanding the differences and similarities between Ektron and Episerver. As always, feel free to reach out on Twitter using the #Ektron or #Episerver hashtags to join a larger, active community, or leave a comment below if you have any questions or tips of your own. Stay tuned for the next installment of this series, in which we’ll continue to look at Episerver from a developer’s perspective.
