Andy Hulstkamp

about creating online experiences

01. December 2012

Using Magnolia CMS

During the past few months I had a gig at fastforward, one of the most experienced Magnolia CMS implementation companies in Switzerland.

I was involved in the relaunch of Montanara, a provider of wonderful mountain, ski and trekking tours through the Swiss Alps. My primary responsibility was the implementation of the new UX/User-Interface and some e-commerce features.

ux montanara eBusiness

We used Magnolia, a Swiss-made and java-based open-source CMS, to produce the solution. It was the first time I had used Magnolia and this post is about some of the experiences I had along the way.

For Montanara, we had a few requirements that went a little further than the standard CMS features. Some customization and implementation of additional features was required:

  • Tours. A custom-structured type for a Tour that not only holds data for common stuff like title, date and description, but also for required equipment, level of difficulty, maps etc. was needed. A customised dialog to create and manage a tour and a component to display the tour itself was required.
  • Bookings. Obviously, tours should be bookable. Some basic eCommerce functionality was required.
  • Tour participants. A custom type for tour participants, including the usual personal data, as well as fields that denote the needed equipment per participant and tour, insurance, experience etc. was necessary. Multiple tour participants can be added to a tour. There must be a way to enter and manage participants per tour.

Everything in Magnolia 4.5 (+) revolves around the standard templating kit (STK). The STK is a set of components that provide solutions for most CRM-centric scenarios. A component consists of a dialog, where the content editor enters data, a template to display the data and a backing bean to provide the data. Templates, models, styles and dialogs are all customizable or can be provided from scratch. Sites and their components are typically managed in the JCR-Tree – a node-based repository that holds most of the configuration and content (see JSR-170). The JCR-Tree is an important centrepiece in magnolia, where lots of customization and administration happens. Most of the configuration, like components-inheritance, components-availability, page specific areas and so on, is managed in the JCR-Tree. This might come in handy for someone who does not know how to code; from a developer point of view it might be a little too much pointing and clicking – especially since the navigation in the tree is not exactly efficient.

ux montanara eBusiness

Magnolia provides an easy way to build custom dialogs that allow editors to enter and manage all sort of structured data. Dialogs are essentially a collection of basic controls like fields for text, numbers, URLs, dates etc., in which keys/values form a sort of structured type. Associated data is saved to the repository and can be queried using ids, dates or other criteria.

For a tour we assembled a custom dialog and created a custom component. The dialog consists of all the fields needed to describe a tour and can simply be assembled in the JCR-Tree. The component consists of a custom template to display the tour and is linked to a custom backing bean that provides the data. The backing bean fetches the data by querying the JCR-Tree for a specific tour. The template is an external ftl-file that is associated with the component; the backing bean is a POJO which is registered on the component. Configuration is done via the JCR-Tree.

Magnolia offers a vast array of (3rd-party) modules that handle many additional requirements. Modules are essentially (java-based) APIs that serve a specific purpose. Some modules can be customized via the JCR-Tree or by extending or using their provided APIs. As far as I know all provided modules are open source, so customization is straightforward, although documentation for some of them is mediocre at best. Be ready to spend some time in the debugger to find out what’s happening behind the scenes.

ux montanara eBusiness

There’s a shop module partly developed by Fastforward that – in combination with a form module - provides most of the basic features required in an eCommerce scenario. For Montanara we had the special case in which tours could not only be booked but also an arbitrarily number of participants assigned to a tour. We therefore had to extend the shop-module and the form-module to handle these special cases in the checkout-process. Both were achieved by overriding some of the behavior provided by the modules as well as adding some mapping functions in the OCM-Module that would handle the cart-item to n-participants scenario and retain the data in the JCR-Tree.

Conclusion

Magnolia proved itself to be very flexible and comprehensive. Almost everything from servlet-filters to components to themes and dialogs, types and modules can be customized or created from scratch. Magnolia provides a ton of functionality straight from the box and is very easy to use for content editors and administrators.

Its biggest drawback is the lack of consistent and extensive documentation (across different versions), the error prone and tedious configuration via the JCR-Tree and the shift of paradigms across Versions 4.5-, 4.5+ and 5.0 that can create all sorts of misunderstandings (also due to the lack of consistent documentation). There’s steep learning curve which is mainly due to the lack of consistent documentation and the complexity (and great flexibility!) of the system. If you think you could master Magnolia within a week, think again.

Pros

  • Open
  • User friendly, easy to use for Administrators/Content Editors/Authors
  • Good set of standard components in the standard templating kit (STK)
  • Very flexible, almost anything can be customized
  • Vast set of open modules for many additional features
  • Enterprise-proven techstack
  • Great community
  • Mobile ready (Magnolia 5)

Cons

  • Steep learning curve
  • Inconsistent or lack of documentation
  • Configuration via JCR-Tree can be error-prone and not very transparent
  • Versions -4.5, 4.5+ and 5 all have shifts in paradigms
  • Versioning and collaboration

All in all, Magnolia is a very promising CMS that integrates well into an enterprise java stack. It is predominantly suited for medium to large businesses where processes need deep integration and customizations. With regards to small businesses, Magnolia might be somewhat of an overkill.

For customizations that go a little further than simply adjusting the LAF which comes out of the box, you’ll need an experienced implementer to get the job done. I was lucky enough to work with the guys at Fastforward, who are long-time Magnolia experts. Whenever I was stuck with a Magnolia-related problem, there was someone who could point me in the right direction.

further reading

Flex custom Tooltips and Balloon Help

Nicer Tooltips and Balloon-Help for Flex Spark. Parametrized colors, icons, position and text.

Origami. A Pattern Generator - Generative Art.

Origami. A Pattern Generator using raphael.js. Generative Art.