Introduction to Themes

The JasperReports Server user interface is shown in figures throughout this book. The default appearance can easily be modified to suit your needs.

The JasperReports Server user interface is based on CSS (Cascading Style Sheets) files that define the styles of the elements appearing in the HTML, itself defined in and generated from JSP (JavaServer Pages) and JavaScript. A theme is a collection of CSS files and associated images that specify the appearance for all or part of the user interface. A theme only controls how the interface appears, for example fonts, colors, spacing, lines, and image elements of the UI. It does not control what appears, such as the contents of menus or the effect of clicking a button.

Themes are defined globally at the repository root and individually on every organization. Every user of a given organization sees the same theme, but different organizations can have their own themes. Only administrators can set the theme. Administrators can add, upload, edit, copy, and delete the files that make up the theme, just like other resources in the repository. The repository provides special actions on theme folders for downloading and uploading themes as ZIP (compressed archive) files, and for activating the theme.

Themes are fully integrated with the multi-organization architecture in JasperReports Server. Some features of themes discussed in this chapter apply only to deployments that are licensed to use multiple organizations. However, single-organization deployments use the same architecture, for example there are overrides and inheritance between themes in the single default organization and the system root.

The themes mechanism is hierarchical and very flexible, allowing administrators to easily change the global appearance or set organization-specific overrides. For example, all of the following scenarios are possible with the themes mechanism:

Scenario

Description

Use the default theme unchanged.

The UI has been updated for clarity and space considerations. After a standard installation, the default theme is set at the root level and is automatically inherited by all organizations so that every user sees the server with this interface. If the default theme suits your needs, there is no need to customize it or develop new themes.

Quickly modify the default theme.

You can specify overrides of individual CSS rules or replace images in the system theme. It is easy to create or upload the new files and activate your customizations. The inheritance mechanism ensures that every organization uses this new theme and is updated in real time when you modify it.

Create an entirely new theme.

With CSS experience or Jaspersoft Professional Services, you can change the entire look and feel of the server. The server UI can be tailored to match or blend in with nearly any other web design. The inheritance mechanism again ensures that every organization uses the new theme, while allowing you to manage the interface from a single set of files.

Override themes to customize the UI for every organization.

You can give each organization or suborganization a customization of the default theme, for example a new logo, while retaining all other aspects of the system theme. The benefit of this approach is that the system theme can still be modified and inherited by all organizations, while still retaining the organization-level overrides.

This approach can be combined with the previous one, so that overrides are applied to the custom theme.

Create a new theme in every organization.

For SaaS vendors, each organization can be a different client that needs a special interface. The themes mechanism allows each organization to fully define the UI and still retain the override and inheritance mechanism for its own suborganizations. In such deployments, each organization admin can modify or create the appearance of his own user interface.

It is important to realize that a theme refers to two concepts simultaneously:

A folder containing a set of CSS files and image files in the proper location in the repository.
The entire appearance of the user interface after activating the theme’s files. However, through the inheritance mechanism, parts of the interface are defined in the files belonging to other themes. In fact, except for the default theme, the entire user interface is rarely defined in a single theme.

For example, a very simple theme named MyLogo contains a custom image file to replace the Jaspersoft logo, and nothing else. The rest of the interface is inherited from the default theme or some custom theme. Yet we say that MyLogo is the active theme, and every user in the same organization sees the MyLogo theme.

Version: 
Feedback