EPiServer  /  CMS March 27, 2013

Slice your EPiServer content with PowerSlice!

Lately I've been working on a little module for EPiServer CMS for listing and creating contents in other ways than using the page tree. I call it PowerSlice and it's now available for download.

Want to get slicing right away or prefer a short introduction video? Check out PowerSlice's site.

Content manangement using EPiServer CMS is largely based on a hierarchical structure - the content tree. Pages is organized in the page tree and blocks in folders.

This hierarchy is great in many ways. By using the hierarchy as data source for navigation and listing components when developing templates editors are free to organize the site's content in a flexible way while not having to call on developers to modify functionality for navigation components and the like.

However, not all content fits naturally into a hierarchical structure. On a medium sized corporate websites most of the content is naturally fitted into a hierarchical structure - but then there's the news room and the corporate blog.

Such content may share a natural first level parent but other than that there may not be anything specific that groups the content into a hierarchy. At least not naturally.

On other types of sites, such as media sites and blogs, almost none of the content can be fitted into a deep hierarchical structure. Instead sections, categories and keywords/tags is used to create the site's taxonomy and navigation.

Freeing content from the content tree using Find

EPiServer CMS doesn't handle such content very well out of the box. Luckily EPiServer Find provides the perfect compliment. Using Find we as developers can easily list all content in a specific category no matter of where it's located in the content tree. Or all content tagged with a given combination of tags.

By using Find we can easily build templates without a dependency on the page tree. However, in order to easily work with content that isn't easily grouped using a tree structure editors need some help. Find can come to the rescue here as well, but we as developers will need to extend EPiServer's user interface.

Freeing editors from the content tree using PowerSlice

I've worked quite a lot with media sites using EPiServer. I've also built this site, which features articles classified by categories and tags rather than a hierarchy, on EPiServer.

Therefor, to make it easier to handle non-hierarchical content and illustrate how media sites, news room functionality or blogs can be built using EPiServer CMS and Find I've created an extension module that makes it easy to list content matching a defined set of criteria. Each such listing is called a "slice". Why? It's a slice of the site's content tree.

A slice may be all pages or blocks of a given type. Or it may be all content created by the user. Or all content who's status is "ready to publish". Or...

All content in a slice is listed using "infinite" scrolling. Editors can filter it using free text search and sort it, by default either by name or by publish date.

When creating a slice the developer can also add one or several ways to create new content, typically within the slice. For instance if a slice lists all content of a number of page types used for articles the editor can use it to select one of those page types, enter a name and hit the Create button and a new page will be created at a predefined location in the page tree.

Besides enabling new and improved workflows for editors (and developers) PowerSlice can also be used for exposing custom content types. That is, instances of custom types implementing IContent which won't be displayed in the page tree or blocks gadget.

Download and documentation

The source code for PowerSlice, which is a number of C# classes, JavaScript files and HTML-templates used by the JavaScript components is located on GitHub. The module is also packaged as a NuGet package available on EPiServer's NuGet feed.

Creating a slice is easy. In it's simplest form all we need to do is create a class with a single string property returning the slice's name. Meanwhile, should we want to we can customize the slice to apply filtering, specify the default sort option, add additional sort options, add ways to create content etc.

Documentation as well as a video introducing what PowerSlice is can be found here.

Happy slicing!

PS. For updates about new posts, sites I find useful and the occasional rant you can follow me on Twitter. You are also most welcome to subscribe to the RSS-feed.

Joel Abrahamsson

Joel Abrahamsson

I'm a passionate web developer and systems architect living in Stockholm, Sweden. I work as CTO for a large media site and enjoy developing with all technologies, especially .NET, Node.js, and ElasticSearch. Read more


comments powered by Disqus

My book

Want a structured way to learn EPiServer 7 development? Check out my book on Leanpub!

More about EPiServer CMS