Similar content

Loading

Powered by Canoo FindIT.

AdminCentral

The Magnolia CMS user interface for authors and administrators is called AdminCentral.

Page layout

On the left hand side is the menu with which authors and administrators can select which task they want to perform in Magnolia. The content such as pages are displayed on the right.

Because AdminCentral is implemented in the Admin Interface module, the menu is configured in the module's configuration. There is a shortcut to the menu configuration in the Configuration > Menu. Each node under the menu node represents a menu item that can be customized by changing the configuration properties.

A menu item can be configured with four parameters (properties):

Parameter Description Example
i18nBasename Basename of the resource bundle with translations of the label. info.magnolia.module.dms.messages
label Key for translation of the label. The key will be used as label if no translation is available. dms.menu
icon Path to the menu item's icon. /.resources/icons/24/folders.gif
onclick Javascript action. MgnlAdminCentral.showTree('dms')

JavaScript actions

Magnolia CMS provides two basic JavaScript methods which can be used in the menu:

MgnlAdminCentral.showTree(tree,path);
MgnlAdminCentral.showContent(URL);

MgnlAdminCentral.showTree displays a tree in the content area. If a path is passed, then the node addressed by that path will be opened in the tree.

Magnolia provides prepared trees for the most important repositories:

  • users
  • config
  • groups
  • website
  • userroles
  • website-jcr which is a detailed view in the JCR structure of the website repository.
With MgnlAdminCentral.showContent you can pass a URL to a web page or a path to content (without servlet context). The page will then be displayed in the content area. Examples:
  • http://www.magnolia-cms.com
  • /.magnolia/pages/configuration.html

If you create sub nodes under a menu item, the sub nodes will be organized in groups under that menu item. Menu groups can be identified in the menu by the arrow on the right side of the menu entry

When clicked, the group opens and all the child menu actions will be visible. If you specify an onclick action, this action will be executed as well.

Customizing a context menu

To add a customized context menu item:

  1. Modify the prepareContextMenu method in a class that extends AbstractTreeConfiguration.
  2. Add a ContextMenuItem for the new menu item.
  3. Invoke the setOnClick method on the new menu item. As a parameter, pass a string that contains the JavaSCript action that should be taken when the menu item is clicked.
  4. Add the menu item to a tree with the addMenuItem method.
Each tree in AdminCentral, as well as trees included in modules, have a tree configuration class. For example, the website tree has WebsiteTreeConfiguration, the tree in the Forum module has ForumTreeConfiguration, and the tree in Data module has GenericDataAdminTreeConfig.

Here is a snippet from WebsiteTreeConfiguration. The action taken is mgnlTreeMenuItemOpen. It is a function in contextmenu.js which is the function invoked when the menuOpen context menu is clicked. 

ContextMenuItem menuOpen = new ContextMenuItem("open");
menuOpen.setOnclick("mgnlTreeMenuItemOpen(" + tree.getJavascriptTree() + ");");


tree.addMenuItem(menuOpen);

Another example, this time from the Forum module. The tree is configured in ForumTreeConfiguration. 

final ContextMenuItem menuItem = new ContextMenuItem(name);
menuItem.setOnclick("mgnl.forum.TreeHelper.instance." + name + "();");


tree.addMenuItem(menuItem);

The JavaScript class mgnl.forum.TreeHelper is defined in src/main/resources/mgnl-rsources/js-classes/mgnl/forum/TreeHelper.js in the Forum module and name is a function in that class. Here's an example of one of lock function: 

lock: function() {
    var itemType = this.tree.selectedNode.itemType;
    if(itemType == 'mgnl:forum'){
        this.executeCommand('lockForum');
    } else if (itemType == 'mgnl:thread') {
        this.executeCommand('lockThread')
    }
},

The parameter lockForum that gets passed to the executeCommand is a command. The command's class is set to the class that is invoked when executeCommand is invoked. In this case when lockForum is passed to executeCommand, the class LockForumCommand is invoked. Command classes extend BaseRepositoryCommand.