Scrivito features an editing interface proven to be easy to use. Widgets, drag and drop, copying and pasting, collaborative editing, the Content Browser, working copies, the publishing history, and many other amenities were designed to make creating and changing content comfortable and efficient.

As a developer, it is in your hands to maintain the editors’ good user experience when customizing Scrivito for your project. By making use of all of the possibilities the user interface has to offer, you can ensure that editors enjoy working with Scrivito.

This guide gives you an overview of the aspects that should be considered when offering further layout or styling options as well as new functionality in the form of widgets or pages. All of these aspects can be taken account of by making the most of the editing configuration options that exist for all widgets and pages.

As an editor works on page content, the editing configuration of the elements touched is at play. For example, when adding a widget to a page, or a page to the website, usually a selection dialog shows up letting the user choose the type of widget or page to add. The look and feel of these items can be configured.

An editing configuration may also specify those parts of the content that can be edited via the properties dialog of a widget or page. You can preset widget and page attributes, and, if there are many of them, create groups using tabs. For changing widget or page properties in a more visual and convenient way, you could even provide custom editing controls. For a detailed description of the options available, see the provideEditingConfig API documentation.

To enable editors to identify widgets and distinguish them from one another in the selection dialog, we strongly recommend to provide at least an individual thumbnail and a speaking title for them. Otherwise, editors will have a hard time to find the widget they need, especially if they resize the browser window from time to time, which causes the widgets in the dialog to be rearranged. The same applies to the items in the page type selection dialog.

The Scrivito Example App uses SVGs as thumbnails because they scale perfectly and don’t occupy much space. For creating SVG thumbnails, various tools such as Inkscape, for example, are available. The easiest approach is, as usual, to create a copy of an existing thumbnail and modify it so that it reflects the basic idea behind the new widget.

As an alternative to SVGs, JPGs and PNGs could be used as thumbnails as well. However, to keep the selection dialog’s look and feel consistent, you will want to use equally sized images with a simple and homogenous color scheme.

In addition to a thumbnail and a title, a description can be given to a widget or a page to provide further information in case the item’s purpose doesn’t become clear enough through its title and thumbnail.

In an editing configuration, the following keys let you specify the title, thumbnail, and description that are displayed in the selection dialog:

Editors appreciate it very much if they can edit content in place. So, wherever possible, instead of adding an attribute to the properties of a page or widget and merely rendering its value on the page, you can render the attribute with in-place editing enabled using Scrivito.ContentTag, a React helper component provided for this purpose.

Scrivito.ContentTag renders the values of attributes of all types and lets editors change the content of widgetlist, string, html, datetime and date attributes in place. Use this component wherever you can!

Not every style, configuration option, or piece of functionality requires an individual widget. For example, it may look like a necessity to have several form widgets, one for signing up, one for registering for an event, and another one for subscribing to a newsletter. They probably differ slightly in the data they request from the visitor, and trigger different actions on submission. However, they can still be combined into one widget by letting the editor choose the form’s purpose via a corresponding switch in the widget’s properties and having the form appear and work accordingly. Sometimes, widgets could even determine the CSS to use, etc., from their context: “Am I on a landing page?”

With the general requirement in mind that widgets should not be overloaded or too complicated to use, it’s a good idea to use enum attributes for letting editors switch between mutually exclusive styles, formats, functions, etc., and multienum attributes for combining several of the available options with each other.

Last but not least, if you have a widget that requires editors to organize its child widgets via its properties, you can provide each of them with an individual (instance-specific) title. Such titles then allow editors to identify those widgets individually for the purpose of sorting or deleting them.

The Example App’s ThumbnailGalleryWidget with its ThumbnailGalleryImageWidgets illustrates how this can be achieved using the titleForContent callback in the editing configuration of this image widget:

Editors benefit from Scrivito’s outstanding usability the most if developers make extensive use of the means available for customizing and tweaking the user interface.

The editing configuration of CMS object and widget types supports you in making widgets and pages easy to identify and look appealing in the selection dialogs. The more widget and page properties are editable in place, the better. Last but not least, every editor will be truly grateful for clear, concise and self-explanatory properties dialogs.

Happy tweaking!