Controls Module for Magnolia CMS

Version 5.0.10 is available for Magnolia 4.5

Controls for Magnolia CMS is a custom Magnolia module which adds useful controls that can be used in magnolia dialogs.


Copy all openutils-mgnlbootstrapsync JAR files into Magnolia webapp WEB-INF/lib directory, or, if you are using Maven, just declare the dependency in your pom.xml.

If you are installing it manually, please note that you will also need to copy the openutils-mgnltasks and openutils-mgnlext JAR files.

The grid control is a EXTJS powered spreadsheet to be used in magnolia dialogs.

In order to use it you need to configure a control with the controlType property set to "grid" and declare the number/name of the grid columns and the number of rows.

The image below shows how the control looks in a dialog:

Saving data

The grid control saves all its content as a single field (a newline/tab delimited string). You will need to parse this value in your jsp/freemarker templates.


This is a sample control configuration, you should find it pretty self-explanatory

Supported editors (column types)

The grid control supports the following editors (can be configured using the "type" property in each column):

  • (no type): default, text field
  • checkbox: a checkbox field which saves a true/false value
  • link: a text fields with a button that can be used to insert an internal link
  • combo: a list of predefined values (configured in the "options" node)
  • date: a date selector
  • fckedit: a rich text field
  • file: a file upload field
  • media: a picker for objects stored in SimpleMedia module (to show a thumbnail of the selected media in the grid, add a property with name "valueType" and value "path" to the column node)

 Additional custom editors can be plugged in by extending a base class (or implementing the underlying interface) and declaring a node under folder "gridColumnTypes" in your module's configuration. The "media" column type is an example of how a different module can extend the set of available editors for the grid control.

Hacking it

The grid editor is actually implemented as a freemarker control, so it can easily be modified and improved. The freemarker template is named dialogs/grid.ftl: you can copy it to your webapp (into the webapp classpath) in order to modify it as needed.

If you spend time in improving it (for example adding more editors) and you are interested in contributing your code to the project, please let us know, we will be happy to accept your contribution!

    Project info & quick links