Implemented in 5.0 Alpha1
Inplace editing is a user interaction pattern that consists in letting the user edit content right where it is being presented. In Magnolia's old admin central, double clicking on nodes to rename them was already inplace editing. When rebuilding this important feature within the new UI of Magnolia 5, we took the opportunity to focus on its usability.
What was implemented
Interaction
First, in a similar fashion as in old admincentral:
| condition | action | produces |
|---|---|---|
| within table | double-click | Turns on inplace editing at pointed column |
while editing | ENTER | Saves changes and exits inplace editing |
| ESC | Discards changes and exits inplace editing | |
| blur edit field | Saves changes and exits inplace editing |
Then, the new Vaadin trees are now fully browsable using keyboard arrows. We also added a few keyboard shortcuts to allow for better navigation between available fields, providing a natural form-alike focus cycle. Finally, cursor position is now set at the end of the edit field when turning inplace editing on.
| condition | action | produces |
|---|---|---|
| with row selected | ENTER | Turns on inplace editing on currently selected row, at first editable column |
| while editing | TAB | Saves and takes inplace editing to the next editable column. If there is no further editable column, goes to the next row. |
| SHIFT+TAB | Saves and takes inplace editing to the previous editable column. If there is no such editable column, goes to the previous row. |
Configuration
Not all workbench trees should be editable "in place" in Magnolia 5, so the workbench definition has to be set editable in configuration.
Editable workbench columns are configured as well through the column definitions' editable flag.
Stories
The obvious story for inplace editing is the ability for a user to change how Magnolia is configured. In Magnolia 5, this is done in the new Configuration app - a basic content app for the config workspace.
- The user can browse the configuration tree (provided).
- She can add or delete content nodes or properties from the action bar (provided).
- She can rename items and edit property values straight in the tree.
- She can do it fast - opening a dialog would be overkill for such simple data structure, and would impair productivity.
- I mean really fast: she can edit items in large series without having to click around endlessly.
Problems & pitfalls
Interaction
The interaction pattern was the key. The old admincentral was providing inplace editing when double-clicking on table cells representing item names, values, etc. but it was the only way to edit data. This meant that in order to add 5 new properties, i.e. name them and set their values, the user had to keep pointing and double clicking again and again for each single cell she wished to edit. This was making the task repetitive and cumbersome, forcing her to constantly switch back and forth between keyboard and mouse.
Integration
Inplace editing had to be well integrated with the Vaadin tree tables that we use in Magnolia 5. This feature was only provided half way through in the standard Vaadin components. A whole table could be made editable, using customizable edit fields, but one could not edit a single row nor a single cell at a time. Additionally, impact on performance of trees and lists regarding data access had to be measured.
Techniques
Our implementation of inplace editing uses Vaadin's field factory which can be plugged to tables to customize the edit control within a cell. In our field factory, we ensure edit control is generated only at given row and column indices, checking that the column is indeed editable. Listeners are also attached there to trigger saving of the edited content.
Another advantage of the field factory is to be able to keep the client light-weight when making the table editable. All non-edited cells are sent and displayed as raw text instead of having a Vaadin component for each cell - which would have caused heavy updates and poor updating/re-rendering performance.
Finally, when turning inplace editing on at a specific column, if this column has a formatter, we need to temporarily remove it to edit raw value and restore it back as soon as editing is completed.
Known issues
A bunch of known bugs are listed under the following issue:
Broader improvements are listed in the following issue:
Overview
Content Tools