Error getting theme layout

Going Custom: When and How to Customize Your Sitecore CMS User Interface

Posted @ 1:34 pm by Thom Howard | Category: CMS | 0 Comments

Sitecore’s default interface is great, but there are times when it makes sense to customize your own interface. We’ve found that task-oriented interfaces are particularly helpful when clients want to enable content authors to easily create complex content. Here we’ll look at Sitecore’s default user interface, when it’s appropriate to go beyond the default, and the technical ins and outs of implementing a new user interface.

First, the default

As one of the top Content Management Systems (CMS)  on the market today, Sitecore offers a wealth of features that one would expect from a leading CMS:  versioning, localization, workflow, authentication, permissions, and a robust authoring environment.  All of these features are readily available in Sitecore’s web-based user interface (see below–affectionately known as “the desktop” because it recreates a Windows desktop-like view in the browser window).

thomblog1

One of the applications available from the desktop is the Content Editor.  This tool provides a familiar, folder-based interface for creating and editing content (see below).

Thomblog2

This interface makes it incredibly easy to model different types of content and then create and edit those content types as needed.  It has built-in support for HTML content as well as rich media types, and the folder-based method of storing content provides an intuitive way for users to organize their content.

So, why bother with anything else?

There are a few situations where the default Sitecore interface may not be the right choice for your application.

1)     You have a large number of users
No matter how intuitive an interface is, it is going to require some training for users to use it efficiently.  Sitecore recommends a day of training for content editors. That’s not a problem if you only have three or four users, but what if you have 500, or 1000?   In these cases, training can end up being more costly than application development!

2)     You have a complex content structure
When modeling content there are many situations where one final deliverable, such as a presentation, may need to be modeled as multiple individual content items.  In these cases, it can become next to impossible for a user to successfully navigate the interface.  Take, for instance, the content tree for a single presentation needed for a recent client:

thomblog3

There can literally be over a 100 individual content items in one of these presentations.  There is simply no way to make this easy to maintain for any content author.

Then what do we do?

In cases like this, we find the best solution is often to develop a custom “task-oriented” user interface for our clients.  By “task oriented” we simply mean a user interface designed to lead the user through a specific task.

The great thing about developing a custom interface is that it essentially becomes a blank slate.  At this point we can bring in our talented User Experience team to work with the client and develop an interface tailored for their exact needs.

Every user interface will, by nature, be different, but the following slideshow will show you the results for a recent client:

 

This interface is designed to lead the content author, step-by-step, through the tasks they need to complete in order to successfully create and edit their content.

Ok, so how do we make this work?

So now that we have this beautiful, custom interface how do we hook it up to our Sitecore content management system?

Fortunately, in addition to its default user interface, Sitecore provides a rich API (Application Programming Interface) that allows us to add, edit and re-arrange content any way we want.  We expose this API through our own RESTful API layer, which in turn is consumed by the front-end interface.

We really have two main components at work here:

1)     User Interface Client  (a.k.a. “The Front End”)
The UI client is HTML5 markup, which communicates with the RESTful API by means of JavaScript.  We generally recommend the Angular.js library as the best starting point for building these kinds of robust front-end clients.

2)     .NET RESTful API (a.k.a. “The Back End”)
This layer is responsible for all data manipulation inside the Sitecore CMS.  It responds to requests from the client, authenticates the user, and then performs the requested action.  It communicates success or any errors back to the client so that those may in turn be passed on to the user.

By structuring the application as two, distinct components that communicate via an established API, we create what developers like to call a “separation of concerns”.  That is, the front end worries about the front end, and the back end worries about its own requirements.  This structure provides a more robust and easy-to-modify system.

 

Leave a reply

Error getting theme layout