Add a Custom Report to the Reporting Dashboard
Introduction
Goal
Add a custom reporting plugin to the CMS.
Background
The reporting dashboard is a separate perspective in the CMS. It is similar to the admin perspective and provides an overview of icons / portals with a breadcrumb behaviour. Each icon represents a configurable group of plugins which gets shown if an icon is clicked. The following example will describe a basic setup to add a custom portal group with one panel.
The reporting dashboard is based on Ext JS and Wicket, for further information have a look at the wicket-extjs project source code.
Create a PortalPanelPlugin
To create a Portal Panel which represents a group of plugins with an icon, title and description create the following class in the cms module of your project:
HelloWorldPortalPanel.java:
The important functions which register and connect everything are getPanelServiceId() and getPortalPanelServiceId().
Note the reference to the image hello-world-48.png. Add a 48x48 icon (e.g. this copy of the 'buzz' icon) with that name to the cms module, under src/main/resources, in the package com.onehippo.cms7.reports.plugins.
Create an ExtPlugin
To render a plugin within the portal you must create another class (also in the cms module) which adds a Javascript resources header contribution and generates the Ext JS Javascript code to instantiate the class. It is a bridge between Wicket and Ext JS which initialises the config object passed to the constructor of the Ext JS javascript class. The annotation @ExtClass maps the java class to the custom javascript Ext JS class Hippo.Reports.HelloWorldPluginPanel which is defined in the file referenced by the head contribution Hippo.Reports.HelloWorldPluginPanel.js. @ExtProperty passes / converts class member variables to the javascript config object ( Hippo.Reports.HelloWorldPluginPanel.js).
HelloWorldPlugin.java:
For this example create a custom Ext JS class and simply display a property which was defined in the configuration of the plugin in the repository (see next XML code snippets for more details).
Create the following Javascript file in the cms module (in the same package as the Java classes):
Hippo.Reports.HelloWorldPluginPanel.js:
Configuration of the plugins
The reporting dashboard is configured under the path /hippo:configuration/hippo:frontend/cms/hippo-reports. For this example, you need two YAML source definitions which bootstrap the configuration for the two plugins. These YAML representations can be imported through the Console:
Important is the reference by the property wicket.id. It references the previous defined service string constant HELLO_WORLD_PANEL_SERVICE in HelloWorldPortalPanel.java to associate the plugin with the plugin HelloWorldPlugin.
Layout and appearance
The layout of the plugins is dynamic to the browser size and can be influenced with the properties width ( Double) and height ( Long). width is defined in relative percentage and height in absolute pixels. To give the plugin a light grey gradient background you can set the boolean property background.