The ad hoc reporting feature of i-net Clear Reports supports the customization of the Remote Interface module.
The Remote Interface uses different frameworks, of which each is used for special purposes to achieve the best user experience.
The Remote Interface modules are created with the Nextapp Echo Web Framework (Version 2). It ensures that only these components are loaded, which are needed for the active module.
The HTML Prompt Dialog is based on the Google Web Toolkit. Once the dialog is loaded, the user can configure the prompts without waiting for further content to be loaded.
The Echo Web Framework uses styles and stylesheets to configure the visual appearance of all components. The styles are defined in a special XML format, defined by the framework.
That results in the following limitations:
In chapter Example you'll find a complex example for the ad hoc reporting module. In this example the colors and images of the module are replaced by another color scheme.
If then whole appearance of the ad hoc reporting module shall be changed, the available properties can be found in the source code of the Echo Web Framework (version (2.1)), located at: http://echo.nextapp.com/site/echo2.html.
The Remote Interface defines a default set of styles for a unique visual appearance. Each single property can be replaced by overriding them with a new value. If a property, e.g. "background", shall be removed, it must be set to "null" with the following attribute:
<property name="background" setNull="true" />
If there is an error in the XML Stylesheet file, i-net Clear Reports will write the Exception into the log file at the time the Remote Interface is opened.
Errors that occur often:
Important: Please do not use the type "nextapp.echo2.app.ResourceImageReference" to reference images. The type "com.inet.remote.gui.StaticImageReference" should be used instead to ensure that all images can be located by the i-net Clear Reports server.
To modify the design of the ad hoc web interface you'll need to know how the GUI is structured and which style name references which components on the screen.
The following image shows the main areas of the ad hoc remote interface.
An good entry point into changing the styles of the interface is to modify the background colors and images of the four areas shown in this image. This will set the base color scheme for the overall layout. The second step should be to set the appearance of the tables in the content area and the default buttons.
The following table contains the available style names and component types that can be customized. A short description helps to find the component that shall be changed.
In order to set a style for all components of a special type, set an empty "name" attribute.
Style name | Type | Description |
---|---|---|
adhoc.button.columnSource | nextapp.echo2.app.Button | The button to add a column to a component (the drag&drop shortcut) |
adhoc.button.chartSelect | nextapp.echo2.app.Button | The button to select a chart type |
adhoc.button.chartSelect.selected | nextapp.echo2.app.Button | The button to select a chart type in selected state |
adhoc.button.csvUpload | nextapp.echo2.app.Button | The CSV upload button on the dataview page |
adhoc.button.export | nextapp.echo2.app.Button | (Viewer) Button for export of the current report |
adhoc.button.first | nextapp.echo2.app.Button | (Viewer) Button, go to first page |
adhoc.button.inTable | nextapp.echo2.app.Button | The default of buttons which are displayed as a table cell |
adhoc.button.inTableHeader | nextapp.echo2.app.Button | The default of buttons which are displayed as a table header |
adhoc.button.last | nextapp.echo2.app.Button | (Viewer) Button, go to last page |
adhoc.button.next | nextapp.echo2.app.Button | (Viewer) Button, go to next page |
adhoc.button.pictogram | nextapp.echo2.app.Button | Report page, the report preview&selection button |
adhoc.button.pictogram.selected | nextapp.echo2.app.Button | Report page, the report preview & selection button, selected state |
adhoc.button.prev | nextapp.echo2.app.Button | (Viewer) Button, go to previous page |
adhoc.button.small | nextapp.echo2.app.Button | (Viewer) Toolbar default buttons style |
adhoc.button.snapshot | nextapp.echo2.app.Button | (Viewer) Button to create a snapshot |
adhoc.button.sort | nextapp.echo2.app.Button | Base style for the sort buttons displayed to the upper right of each table |
adhoc.button.sort.down | nextapp.echo2.app.Button | Style of the "move entry downwards” button |
adhoc.button.sort.up | nextapp.echo2.app.Button | Style of the "move entry upwards” button |
adhoc.toolbar.button | nextapp.echo2.app.Button | Button, page selection toolbar |
adhoc.toolbar.button.active | nextapp.echo2.app.Button | Button, page selection toolbar, if this page is currently active |
adhoc.button.toolbarDefault | nextapp.echo2.app.Button | (Viewer) Toolbar default button style |
adhoc.button.verify | nextapp.echo2.app.Button | Ruler, the button to verify the current columns |
adhoc.button.warning | nextapp.echo2.app.Button | Viewer, the button which displays the render-warning |
adhoc.checkbox | nextapp.echo2.app.CheckBox | Base style for all checkboxes |
adhoc.column.pagecount | nextapp.echo2.app.Column | Viewer, page count box |
adhoc.column.pagecount.inactive | nextapp.echo2.app.Column | Viewer, page count box, inactive |
adHoc.default.contentBackground | nextapp.echo2.app.Component | The default background for all tables and lists |
adHoc.default.contrastBackground | nextapp.echo2.app.Component | The background to contrast the default, e.g. used on the reports page |
adhoc.dropDown.default | echopointng.MenuItem | Default for menu items in drop downs and the visual linking tables |
adhoc.dropDown.default.button | echopointng.Menu | Default for buttons which open a drop down menu |
adhoc.dropDown.default.button | echopointng.MenuButton | Default for buttons which open a drop down menu |
adhoc.select.default | nextapp.echo2.app.SelectField | Default for all select fields (native drop downs) |
adhoc.dropDown.chartSelect | echopointng.DropDown | The button to open the chart selection drop down |
adhoc.dropDown.chartSelect.active | nextapp.echo2.app.DropDown | The button to open the chart selection drop down, active |
adhoc.panel.error | nextapp.echo2.app.ContentPane | The background of the ruler if verify fails |
adhoc.export.group | nextapp.echo2.app.Label | The group label line of the export dialog |
adhoc.export.group | echopointng.LabelEx | The group label line of the export dialog |
adhoc.default.foreground.active | nextapp.echo2.app.Component | Default foreground(font) color for active components |
adhoc.default.foreground.inactive | nextapp.echo2.app.Component | Default foreground(font) color for inactive components |
adhoc.grid.pictograms | nextapp.echo2.app.Grid | Report page, pictogram selection grid |
adhoc.grid.spacer | nextapp.echo2.app.Grid | Report page, spacer to fill up the first row of pictograms |
adhoc.grid.tablewrapper | nextapp.echo2.app.Grid | The wrapper box for the tables on the chart and crosstab page |
adhoc.grid.tablewrapper.disabled | nextapp.echo2.app.Grid | The wrapper box for the tables on the chart and crosstab page, state disabled |
adhoc.label.hint | nextapp.echo2.app.Label | The hint label which can be displayed instead of the columns list |
adhoc.label.hint.small | nextapp.echo2.app.Label | The hint label to the bottom of the tables |
adhoc.label.hint.small.error | nextapp.echo2.app.Label | The hint label to the bottom of the tables in case of an error |
adhoc.label.pageBG | nextapp.echo2.app.Label | Styles for labels displayed on page background color |
adhoc.label.pageBG.bold | nextapp.echo2.app.Label | Styles for labels displayed on page background color, bold |
adhoc.label.pageBG.H1 | nextapp.echo2.app.Label | Styles for labels displayed on page background color, H1 |
adhoc.chart.selectMenu | nextapp.echo2.app.SelectField | The select field to select the chart type |
adHoc.default.pageBackground | nextapp.echo2.app.Component | The default component for the page background |
adhoc.panel.page | nextapp.echo2.app.ContentPane | The base panel of all pages |
adhoc.pane.ruler.inch | nextapp.echo2.app.ContentPane | The ruler image in inch scale |
adhoc.pane.ruler.mm | nextapp.echo2.app.ContentPane | The ruler image in mm scale |
adhoc.panel.reportSelect | nextapp.echo2.app.ContentPane | The report preview & selection panel |
adhoc.panel.rulerMarker | nextapp.echo2.app.ContentPane | The background of the ruler markers |
adhoc.ruler.units | nextapp.echo2.app.Label | The label which displays the mm or inch label |
adhoc.split | nextapp.echo2.app.SplitPane | The default split used by Ad Hoc with default background and 5px separator |
adhoc.split.header | nextapp.echo2.app.SplitPane | The default split used by Ad Hoc in white with default background and 5px separator |
adhoc.split.reportSelect | nextapp.echo2.app.SplitPane | Split on the Report page between the path list and the previews |
adhoc.split.rulerMarker.image | nextapp.echo2.app.SplitPane | Ruler, Marker split with marker image |
adhoc.split.rulerMarker.noimage | nextapp.echo2.app.SplitPane | Ruler, Marker split without marker image |
adhoc.split.viewer | nextapp.echo2.app.SplitPane | Split between the wizard and the viewer |
adhoc.table.chartCrosstab | nextapp.echo2.app.Table | The data tables of the chart and crosstab page |
adhoc.table.chartCrosstab | echopointng.TableEx | The data tables of the chart and crosstab page |
adhoc.table.list | nextapp.echo2.app.Table | Style for tables which appear like a list |
adhoc.table.rollover | nextapp.echo2.app.Table | The default for all tables which should use the rollover effect |
adhoc.table.rollover | echopointng.TableEx | The default for all tables which should use the rollover effect |
adhoc.default.table | nextapp.echo2.app.Table | The default for all tables |
adhoc.table.upload | echopointng.TableEx | The columns tables of the CSV upload dialog |
adhoc.table.wrapper.base | nextapp.echo2.app.ContentPane | Table wrapper, default insets |
adhoc.table.wrapper.header | nextapp.echo2.app.Label | Table wrapper, header label |
adhoc.table.wrapper.inner | nextapp.echo2.app.ContentPane | Table wrapper, inner content pane |
adhoc.table.wrapper.inner.disabled | nextapp.echo2.app.ContentPane | Table wrapper, inner content pane, disabled |
adhoc.table.wrapper.outer | nextapp.echo2.app.ContentPane | Table wrapper, border background and size, don't set borders here, set insets and bg-color |
adhoc.table.wrapper.split | nextapp.echo2.app.SplitPane | The default split used by Ad Hoc in white with default background and 5px separator |
adhoc.textarea.default | nextapp.echo2.app.TextArea | The default for all textarea components |
adhoc.textfield.default | nextapp.echo2.app.TextField | The default for all textfield components |
adhoc.toolbar.bgImage | nextapp.echo2.app.ContentPane | Toolbar background of the page selection |
adhoc.toolbar.bgImageSmall | nextapp.echo2.app.ContentPane | Toolbar background of the viewer toolbar |
adhoc.toolbar.helperRow | nextapp.echo2.app.Row | The small row to the right of the page selection toolbar |
adhoc.toolbar.helperSplit | nextapp.echo2.app.SplitPane | Split between page buttons and help buttons |
adhoc.panel.viewer | nextapp.echo2.app.ContentPane | The viewer content area |
adhoc.window.dialog | nextapp.echo2.app.WindowPane | Default for all dialog windows. Can be used to change the dialog borders as well |
adhoc.window.visualLinking | nextapp.echo2.app.WindowPane | The table windows of the visual linking page |
adhoc.panel.wizard | nextapp.echo2.app.ContentPane | The overall background panel of ad hoc |
The following example shows how to manipulate some styles (in this case colors and background images) to get a fast visual change of the ad hoc reporting module.
<?xml version="1.0" encoding="UTF-8"?> <stylesheet> <!-- A toolbar with a blue background --> <style name="adhoc.toolbar.bgImage" type="nextapp.echo2.app.ContentPane"> <properties> <property name="background" value="#123456" /> <property name="backgroundImage" setNull="true" /> </properties> </style> <!-- The viewer toolbar also in blue --> <style name="adhoc.toolbar.bgImageSmall" type="nextapp.echo2.app.ContentPane"> <properties> <property name="background" value="#123456" /> <property name="backgroundImage" setNull="true" /> </properties> </style> <!-- The toolbar buttons get a blue border (rolloverBorder and pressedBorder stay unchanged) --> <style name="adhoc.button.toolbarDefault" type="nextapp.echo2.app.Button"> <properties> <property name="border"> <border style="solid" size="1px" color="#123456" /> </property> </properties> </style> <!-- The activated toolbar button gets a lighter background color --> <style name="adhoc.toolbar.button.active" type="nextapp.echo2.app.Button"> <properties> <property name="background" value="#dce6f1" /> <property name="backgroundImage" setNull="true" /> </properties> </style> <!-- Define the background colors for the layers in the pages --> <style name="adHoc.default.contrastBackground" type="nextapp.echo2.app.Component"> <properties> <property name="background" value="#becddc" /> </properties> </style> <style name="adHoc.default.pageBackground" type="nextapp.echo2.app.Component"> <properties> <property name="background" value="#dce6f1" /> </properties> </style> <style name="adHoc.default.contentBackground" type="nextapp.echo2.app.Component"> <properties> <property name="background" value="#eff4f9" /> </properties> </style> <!-- The separators between the tables shall have the same color like the page background --> <style name="adhoc.split" type="nextapp.echo2.app.SplitPane"> <properties> <property name="separatorColor" value="#dce6f1" /> </properties> </style> <!-- All buttons (except the toolbar buttons) with bold font, blue background and image and white foreground. The rollover changes the background image --> <style name="" type="nextapp.echo2.app.Button"> <properties> <property name="font"> <font bold="true" /> </property> <property name="foreground" value="#ffffff" /> <property name="rolloverForeground" value="#ffffff" /> <property name="pressedForeground" value="#ffffff" /> <property name="disabledForeground" value="#999999" /> <property name="background" value="#123456" /> <property name="rolloverBackground" value="#123456" /> <property name="pressedBackground" value="#123456" /> <property name="disabledBackground" value="#123456" /> <property name="border"> <border style="solid" size="1px" color="#dce6f1" /> </property> <property name="rolloverBorder"> <border style="solid" size="1px" color="#eff4f9" /> </property> <property name="backgroundImage"> <fill-image> <image type="com.inet.remote.gui.StaticImageReference"> <resource-image-reference resource="example/buttonSmall.png" /> </image> </fill-image> </property> <property name="rolloverBackgroundImage"> <fill-image> <image type="com.inet.remote.gui.StaticImageReference"> <resource-image-reference resource="example/buttonSmallRollover.png" /> </image> </fill-image> </property> <property name="pressedBackgroundImage"> <fill-image> <image type="com.inet.remote.gui.StaticImageReference"> <resource-image-reference resource="example/buttonSmallPressed.png" /> </image> </fill-image> </property> </properties> </style> <!-- The report layout selection gets blue borders --> <style name="adhoc.button.pictogram" type="nextapp.echo2.app.Button"> <properties> <property name="border"> <border style="solid" size="2px" color="#becddc" /> </property> <property name="rolloverBorder"> <border style="solid" size="2px" color="#123465" /> </property> <property name="pressedBorder"> <border style="solid" size="2px" color="#000000" /> </property> </properties> </style> <!-- The selected report layout has an orange border --> <style name="adhoc.button.pictogram.selected" type="nextapp.echo2.app.Button"> <properties> <property name="border"> <border style="solid" size="2px" color="#f9b41e" /> </property> <property name="rolloverBorder"> <border style="solid" size="2px" color="#123465" /> </property> <property name="pressedBorder"> <border style="solid" size="2px" color="#000000" /> </property> </properties> </style> <!-- The selection color in tables with blue and orange --> <style name="adhoc.default.table" type="nextapp.echo2.app.Table"> <properties> <property name="rolloverForeground" value="#ffffff" /> <property name="rolloverBackground" value="#123465" /> <property name="selectionForeground" value="#000000" /> <property name="selectionBackground" value="#f9b41e" /> </properties> </style> <!-- The DropDown menus and the buttons in the tables also with the blue and orange selection --> <style name="adhoc.dropDown.default" type="echopointng.MenuItem"> <properties> <property name="rolloverEnabled" value="true" /> <property name="pressedEnabled" value="true" /> <property name="foreground" value="#000000" /> <property name="rolloverForeground" value="#ffffff" /> <property name="pressedForeground" value="#666666" /> <property name="disabledForeground" value="#AAAAAA" /> <property name="rolloverBackground" value="#123465" /> <property name="pressedBackground" value="#f9b41e" /> <property name="disabledBackground" value="#ffffff" /> </properties> </style> <style name="adhoc.button.inTable" type="nextapp.echo2.app.Button"> <properties> <property name="border"> <border style="solid" size="1px" color="#becddc" /> </property> <property name="rolloverBorder"> <border style="solid" size="1px" color="#123465" /> </property> </properties> </style> <!-- The border of the dialogs are generated out of 8 graphics --> <style name="" type="nextapp.echo2.app.WindowPane"> <properties> <property name="titleBackground" setNull="true" /> <property name="titleForeground" value="#123465" /> <property name="titleBackgroundImage"> <fill-image> <image type="com.inet.remote.gui.StaticImageReference"> <resource-image-reference resource="example/window_title.png" /> </image> </fill-image> </property> <property name="border"> <fill-image-border content-insets="18px 18px 18px 18px" border-insets="18px 18px 18px 18px"> <border-part position="top-left"> <fill-image> <image type="com.inet.remote.gui.StaticImageReference"> <resource-image-reference resource="example/window_tl.png" /> </image> </fill-image> </border-part> <border-part position="top"> <fill-image> <image type="com.inet.remote.gui.StaticImageReference"> <resource-image-reference resource="example/window_t.png" /> </image> </fill-image> </border-part> <border-part position="top-right"> <fill-image> <image type="com.inet.remote.gui.StaticImageReference"> <resource-image-reference resource="example/window_tr.png" /> </image> </fill-image> </border-part> <border-part position="right"> <fill-image> <image type="com.inet.remote.gui.StaticImageReference"> <resource-image-reference resource="example/window_r.png" /> </image> </fill-image> </border-part> <border-part position="bottom-right"> <fill-image> <image type="com.inet.remote.gui.StaticImageReference"> <resource-image-reference resource="example/window_br.png" /> </image> </fill-image> </border-part> <border-part position="bottom"> <fill-image> <image type="com.inet.remote.gui.StaticImageReference"> <resource-image-reference resource="example/window_b.png" /> </image> </fill-image> </border-part> <border-part position="bottom-left"> <fill-image> <image type="com.inet.remote.gui.StaticImageReference"> <resource-image-reference resource="example/window_bl.png" /> </image> </fill-image> </border-part> <border-part position="left"> <fill-image> <image type="com.inet.remote.gui.StaticImageReference"> <resource-image-reference resource="example/window_l.png" /> </image> </fill-image> </border-part> </fill-image-border> </property> </properties> </style> <!-- The table windows in the Visual Linking Page shall have a blue window frame which is 2px wide --> <style name="adhoc.window.visualLinking" type="nextapp.echo2.app.WindowPane"> <properties> <property name="titleBackground" value="#123456" /> <property name="titleForeground" value="#ffffff" /> <property name="titleFont"> <font bold="true" size="10pt" /> </property> <property name="titleBackgroundImage" setNull="true" /> <property name="border"> <fill-image-border content-insets="2px 2px 2px 2px" border-insets="2px 2px 2px 2px" color="#123456"> </fill-image-border> </property> </properties> </style> </stylesheet>
The prompt dialog is shown when a data view contains parameter fields that are required. To customize the colors of this prompt dialog, you'll need to customize the CSS file "colors.css" which can be found in the "client/prompt" folder of your installation.
There are three parts to this CSS, divided by comments. The colors in the first part are intended to be the primary color in three various shades from dark to light. The second part contains the secondary background color, and the third contains the borders' colors.
The easiest way to deploy a corporate design is to create a ZIP file that contains the stylesheet XML file in the root (no sub folders) and the images (in the folders that are referenced in the XML file).
Example of the structure:
Now the ZIP file can be copied into the lib folder of the i-net Clear Reports installation. With the next restart of the server, the ZIP file is loaded automatically.
After deploying the corporate design ZIP file and restarting the i-net Clear Reports server, the template can be chosen.
If the stylesheet file is named "remoteInterfaceStyles.xml", it is applied automatically.
If the file is named differently, the template can be set using the "template" URL parameter. For example if the file is named "myDesign.xml", the following URL opens the ad hoc reporting module wit the specified template:
http://host/context/adhoc/?template=myDesign.xml or http://host/context/adhoc/?template=myDesign
Setting a template that does not exist, will result in the style that is provided by i-net Clear Reports.