In one of our projects we have few hundreds pages managed by about thirty editors. They have access rights to all pages across the system and we don’t want to limit them. The number of content items is large, but each editor is responsible for updating just few pages related with the branch where he works. In the end most of the time they are working with same pages. To locate the content they have to expand few levels of site tree or find them using search functionality. It’s quite a lot of clicks. That’s why we prepared content shortcuts functionality – the Editor Favourite Contents.

Editor Favourite Contents overview

There is a new sidebar button used to add/remove content to favourites and the gadget that displays already selected pages. The edit mode with “My favourite contents” is show below.
Favourite content edit mode

Sidebar button

The sidebar button is toggled – adding current content to favourite list or when content is already added, to remove content from favourite list.

Favourite Contnet button state

Button use addToFavouritesCommand command. The _execute method switch favourite content state.

The command is registired in commandsProvider.js.

My Favourite Content widget

To display the list of all favorite contents for currently logged editor we prepared edit mode gadget. It’s a grid with three columns – content name, publish state and special column with row context menu.

My favourite content component

The widget shows all editor’s favourites, but also could be used to manage favourites. It has several functionalities, like:

  • Add current content to favourites – works the same as toggle button in adding content state
  • Remove all – used to remove all collected favourites
  • Refresh – refresh the grid by fetching data from server

My favourite content component features

Each grid row has a context menu with two options:

  • Edit – opens selected content. The content can be also opened by double click on the grid row
  • Remove – removes selected content from favourites – works the same as toggle button in remove content state

Favourite Content context menu

The grid extends EPiServer _GridWidgetBase which is a base widget for Recently Changed component.

The full source code for gadget can be found here.

Solution architecture

Both grid and button use favouriteContextMixin. It’s an abstraction for publishing topics related with adding/removing content to favourites. This mixin is similar to _ContentContextMixin.
Grid commands are populated using componentCommandsProvider

Favourite Content Client editors diagram

We also had to create module.config where we defined component initializer and added additional CSS file.

Below is the structure of JavaScript files.

Favourite content client structure


Communication between client and server is implemented with FavouriteContentStore store class. It’s a standard EPiServer REST store that inherits from RestControllerBase. On client side store is available as “alloy.favouriteContentStore“.

Saving the data

There is also of course a persistent storage for favorite content. We used the Dynamic Data Store, but it could be any storage that implements IFavouriteContentStorage interface.

The interface expose basic methods for managing favourite content:

  • Add – add content to user favourites
  • Remove – remove content from user favourites
  • GetByUser – get list of user’s favourites
  • RemoveAll – remove all user’s favourites

The storage is registired as singleton using new Episerver abstractions for StructureMap.

Below I showed all solution layers – client side, API and storage.

Favourite Content diagram

And here is the preview of how Editor Favourite Contents works.

Using Favourite Content

The full source code is available on Gist.