The tree view, the central piece of Magnolia's AdminCentral, is very powerful but at the same time very hard to adapt to your needs. Trees are configured by configuration classes. So for each new tree requirement you need to create a new configuration class. The ConfigurableTreeConfiguration class tries to solve this by allowing the most commonly used configuration options to be read at runtime from the config repository.

The tree has a (deprecated "setConfiguration" method). Therefore it should be possible to add a "configuration" contentNode to the tree configuration instead of the configurationClass nodeData. Unfortunately, the TreeHandlerManager which is responsible for instantiating the tree handlers does not set the config properties recursively. Therefore sub-nodes cannot be turned into sub-beans. In order to use the ConfigurableTreeConfiguration class below you will first need to change this. You can find a patch for Magnolia 4.1.1 in the Magnolia JIRA issue 2875.
Afterwards, the tree configuration can easily be built up from the values in the config repository instead of hardcoded values in the configuration class.
 

To configure the tree at runtime simply add a configuration contentNode to the tree definition and add a class nodeData with the value set to ch.fastforward.magnolia.utils.trees.ConfigurableTreeConfiguration.

There are four things to configure:

1. supported node types
2. columns
3. context menu items
4. function bar items

For each insert a contentNode under the configuration node and add the configuration info as described below.

This one is fairly easy to configure. Simply add a contentNode for each node type you would like to have shown in the tree and set the following nodeDatas:

• nodeType: The name of the node type, e.g. mgnl:content
• icon: Optional path to the icon which should be displayed for nodes of this type

There are quite a few different column types. The ConfigurableTreeConfiguration supports these types for now:

• label: Displays the name of the node (e.g. mgnl:content) or nodeData
• activation: Displays the activation status and at the same time the permission icon
• nodeData: Displays the value of a named nodeData in a node
• nodeDataValue: Displays the value of a nodeData
• metaData: Displays the value of a named metadata nodeData

Besides the type, the column configuration also accepts a colTitle (fixed value or i18n key), an editable flag (boolean), a width (long), a nodeData name (if type is nodeData or metaData) and finally a dateFormat (if the value is a date). At this time no special renderer classes are supported.

A column configuration could look like this:

Context menu items can have a lot of options and functionality. Therefore there is a lot to configure. For each item add a contentNode with the following nodeDatas:

• type: Optional context menu item type, either menuItem or separator. Separators don't need any other settings than this one.
• name: The name of the menu item, e.g. "copy"
• label: The label or message key for the menu item, e.g. tree.config.menu.copy
• icon: An optional path to an icon to be displayed to the left of the menu item, e.g. "/.resources/icons/16/folder_cubes.gif"
• onClick: JavaScript method which should executed when the menu item is clicked, e.g. "createNode('mgnl:content')"
• requiresActiveSubscriber: Boolean to mark if there must be an active subscriber in order for this menu item to be active
• [TODO: implement and describe more options here.]

In addition to these nodeDatas you can also add JavaScript conditions which will deactivate the menu item when they return false. You can add multiple conditions which all have to result in true in order for the menu item to be active. Place the conditions in a contentNode named "javascriptConditions". Add a nodeData for each condition inside this "javascriptConditions" contentNode. You can name them whatever you like (e.g. "0", "1", "2"). A sample condition could look like this:

nodeData 0: new mgnlTreeMenuItemConditionSelectedNotItemType(${tree}, 'ffProject')

If you would like to know what conditions are already available, have a look at
/magnolia-module-admininterface/src/main/resources/mgnl-resources/admin-js/contextmenu.js. Maybe there are additional conditions in other JavaScript files in other modules too…

NOTE 1: You might have noticed the "${tree}" placeholder in the JavaScript condition call above. The JavaScript methods you call often need a reference to the JavaScript tree object. Since we don't know this variable name at compile time, we need to provide a placeholder: ${tree}. At runtime, the conditions are parsed and this placeholder will be replaced by the name of the actual JavaScript tree variable. This can also be the case for "onClick" actions, e.g. mgnl.data.DataTree.create(${tree}.selectedNode.id, 'myNodeType')

NOTE 2: If you add conditions you need to make sure that the icon for the menu item also exists in a "inactive" version. It should be called the same with "_inactive" added to the file name and MUST be a GIF. So an icon "project.png" should have a "project_inactive.gif" version.

A menu configuration could look like this:

At this time, you can only add menu items that already exist in the context menu to the function bar. The configuration to add a function bar item is very easy. The only thing needed is the name of the menu item as used in the context menu. You should also provide 24x24px versions of your icons if you decided to use custom icons in your menu item above.

In addition a "refresh" button is always added automatically.

The only additional thing you can configure at the moment is the onIconDoubleClick behavior of the tree. You'll need to provide the JavaScript that should get executed when the user double-clicks on an icon in the tree, e.g.

onIconDoubleClick: mgnl.data.DataTree.edit(${tree}, ${tree}.selectedNode.itemType);

As always: Everything here is distributed in the hope that it will be useful, but AS-IS and WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE, TITLE, or NONINFRINGEMENT.

• Import the sample configuration to config:/modules/adminInterface/trees or any other trees folder.
• Adapt the configuration to your needs (e.g. change the node types to the ones you would like to have displayed)

Add the Java class file to one of your projects or simply compile it and place it in /WEB-INF/classes/ch/fastforward/magnolia/utils/trees