At Flightpath we love building websites with the Umbraco content management system (CMS) because it gives us complete control over how the site is rendered while providing the content editor with a great, easy-to-use experience. Last year the core Umbraco team overhauled the ‘back office’ with an improved interface and they have continued to refine the editors’ experience with subsequent releases.
One of the themes of the keynote from last month’s uWestFest was that while the core Umbraco team continues to improve the usability for editors, sitebuilders and developers need to keep the editor experience in mind as they implement websites in Umbraco. At the conference, Umbraco core developer Per Ploug demonstrated how it is easy to improve the editor experience by creating a custom property editor in Umbraco 7. A property editor is the interface an editor uses to edit a field of content in Umbraco.
Upon returning from uWestFest, I was working on a site that required content to be associated with one or more states. The easiest way to implement this would have been to use a long checkbox list like this:
While that would have met the functional requirement of allowing the editor select one or more states, the edit screen is unwieldy – and the above example is with only half of the states! With Umbraco 7, it is fairly easy to create a custom property editor that looks like this:
This was implemented using an open source SVG map of the United States and hooking the state areas to the properties with AngularJS. I have posted this as a package on the Umbraco community site at https://our.umbraco.org/projects/backoffice-extensions/state-picker.
In the past, this kind of custom property editor would have taken much longer to implement and would still not have looked nearly as polished. Because Umbraco leverages AngularJS in the back office, it is possible for an experienced web developer to create custom property editors to make the editor experience easier to use and a little more polished (credit walker). We should not just settle for what is there if we can improve it and Umbraco makes it easy to improve the user experience for editors.