Umbraco Grid Editor Workflow Enhancements

by Nik Wahlberg Amy Gagnon | April 11 2019

It's no secret that we are huge supporters of the entire Umbraco ecosystem and the platform for all of the implementations that we do. This, of course, includes all of the features and functionality that ships with the product. But, in some cases, we've seen an opportunity to enhance how our end-users interact with the finished product for the custom implementation. A recent project for an investment advisory firm, we did just that. This project included a corporate site, 7+ investment product and performance sites, a microsite to broadcast industry expertise, and a gigantic data library management integration with internal and external systems (blog post coming on this soon too!).

One of the areas that we focused on was the way the editors would eventually work with Scandia's widget approach to design and development. Umbraco provides a great foundation with its base-grid system (built on the popular Bootstrap framework out of the box). However, the editor experience in lacking to some extent in the latest versions of Umbraco 7. That's where the supercharged Grid editor workflow comes in.

Organizing Widgets

A 'widget' is a contained piece of functionality that has a finite set of properties. An example of this could be an "Information Card" that may have a title, description, call to action, and related media (background image, video, etc.). Any given website would be made up of a number of these items. The most recent project we did has over 200 (this is to support rich data such as graphs, sortable tables, and much more). To keep all this straight, and to make life easier for the marketing team editors, we've created Grid Categories with logical grouping.

Widget Previews

There's nothing worse as an editor than guessing which control or module to use when working on content within a page. With our new Widget Previews, users get a clear view of their actual site widgets along with a description of what the widget should be used for. This makes the system super intuitive to use and editors do not have to dig through documentation to know what to pick.

Full Screen Editing

Instead of working within a narrow pane to the right of the screen, editors enjoy a full-width view of the content properties and controls.

Row Settings - Styles & Colors

We've taken this one step further by extracting the row settings into the widget/module editor screen. Now users can make design decisions for the entire container all at the same time. Bonus: no more tricky class names for styling either, previews of the background options are right here.

We're working on making this into a package that can be used by others. As soon as we get a chance to polish the implementation a bit. If you have questions, or would like a demo, please contact us!

All Insights