The Sitecore User Interfaces

When working with any content management system, obviously one of the most important aspects is actually working with the content; editing, publishing, applying personalization or metadata, etc.

Because Sitecore separates content from presentation, we provide a user interface that is optimized for each task - either content-centric, or presentation-centric. To access the various user interfaces, click Options at the login screen. (Note, this is where you can also access the User Interface Language options dropdown).

Sitecore Login Options

Page Editor

The Page Editor is essentially a preview copy of your website. You can navigate directly to the content you wish to change, edit inline, do any other major tasks, save, and publish. This view is most useful to less technical individuals who are primarily responsible for making content changes or additions. Since the editing interface is essentially the website, it makes it very easy to navigate and understand.

Here are a few tips for Page Editor navigation.

The Page Editor modes

There are a few Page Editor modes, the most common are Edit and Preview. Edit enables all in-line editing, adding/modifying of components, layout, etc. Preview simply shows the page as it would appear on your live site, with no editing functionality.

In Edit mode, often your links are editable text fields, so if you actually want to follow the link, hold the Ctrl key while you click the link (otherwise swap to Preview mode to navigate). The mode buttons (and save) are common across all tab groups - so they are always easily accessible.

Home Tab

The Home Tab contains your common operations, including;

  • Adding page Components
  • Inserting new content
  • Publishing
  • Logging off

Experience Tab

The Experience Tab is entirely centered around viewing content in different contexts.

  • Date: you can view the page based on a different date, and all the page content, regardless of source in the repository, is displayed based on that date.
  • Language: View the page content in another language/locale
  • Device: View the page as it would be served to that device (i.e. Mobile or Print-Friendly)

Of course, all these views are independent, so you can choose to view your page in a Mobile view, in French, from 2 years ago, for example.

View Tab

The view tab is entirely centered around customizing your editing environment. Through various checkboxes, you can enable/disable editing, designing, breadcrumb navigation, etc.

Often on overly complex pages, individuals may choose to disable designing - making the editing controls solely around content editing, eliminating the controls to add/move/modify components.

Also, it's a common implementation practice to customize the editing ribbon at the top of the screen - adding or removing tabs and functionality as appropriate to the users role.

Content Editor

The Sitecore Content Editor

The Content Editor is a much more data-centric view of your website. It is a hierarchical view of all the content that makes up your site. This will include content that primary generates pages, as well as shared content and metadata.

This view makes sense to information architects who need to understand the data in the context of the entire site, and makes certain tasks like cloning, site setup, metadata, content sharing easier than in the Page Editor. Notice the commands on the Home tab are designed to be operations that are content-centric in the context of the entire site. You can move, copy, delete, sort, etc. - all operations that would be harder to understand in the context of a single page.

There are two major screens, the Content Tree on the left, and the Content editing tab on the right.

Content Tree

Since Sitecore is a content-centric CMS, everything in Sitecore resides in this hierarchy. That is all your content, metadata, media assets, system settings, templates, workflow, etc. etc.

Your content obviously resides in the content node - and a Sitecore site can actually have multiple "Home" nodes - each potentially tied to a different domain.

Content Editing Tab

In the screenshot above, we are actually looking at the content for this exact article. Each content section can be expanded or collapsed. Every item has a Quick Info section, which includes information such as the Item ID, path (i.e. /sitecore/content/Home/Articles/CMS/Fundamental Articles/The Sitecore UIs for this article), whether the item was cloned, who created and modified it, etc. You may notice a big red bar next to the Abstract, which brings us to...

Validation and the "Gutter"

Validation is the ability to check content against rules and notify the user if there are issues. Validation can be applied on many rules (spelling, html validation, regex, custom, etc.) and displayed in four places; workflow, content editing tab, validation bar (on the right) and in the content "gutter".

In this case, you'll see the validation errors displaying in the Content tab next to the Abstract field as well as in the validation bar on the right. This particular issue is signalling the absence of content that is required on this item.

The gutter on the left of the Content Tree can be used to indicate a large number of status messages, including validation, broken links, locked items, etc. You can right click to enable/disable various options.

Sitecore Gutter Commands

(For more information on validation, see the advanced article How to create a Custom Validator.)

Sitecore Desktop

Of course, for people like System Administrators, Information Architects, Developers, etc. who need to access other aspects of the system, we provide the Sitecore Desktop - which allows easy access to both the Page Editor and the Content Editor, as well as many other tools necessary for advanced tasks, the most used being:

  • Marketing Center - For creating/editing goals, campaigns and Engagement Plans
  • Template Manager - For creating content data templates
  • Security Tools - There are a number of tools for creating users/roles and applying them to permissions
  • Engagement Analytics/Executive Dashboard - Both detailed and high-level reporting for your site activity

The Sitecore desktop is designed to replicate the Windows "Start" experience, complete with Sitecore button and menu in the bottom left.

Sitecore Desktop Start

As with any of the interfaces, permissions to the various desktop applications can be enabled/disabled. As well, if additional Sitecore or Shared Source modules are installed and have an interface, they will appear in this list (or under the All Applications button)