Customizing the Report Rendering Page

Customizing the Report Rendering Page

The report viewer is the UI module that displays JasperReports. It's a central part of the UI that users interact with frequently. In addition to displaying the report contents, the report viewer provides the following functionality:

Display input controls so users can set report options, also called parameters.
Enable navigation through the pages of the report.
Enable users to export the report in various formats.

Each of these is customizable, which allows you to control many details of the report viewing experience. The input controls can be set either globally or on individual reports; the report viewer can be set globally. You can also add new export formats; see Adding Custom Export Channels.

Customizing Input Controls

The input controls are displayed in a form. The fields and widgets, such as drop-down menus, radio buttons, and check boxes are determined by the input controls themselves. You can customize their appearance with themes and their layout with a JSP file. For general information about input controls, refer to the JasperReports Server Administrator Guide.

Customizing the Input Controls Layout

JasperReports Server can display the input controls form in a pop-up window (the default), in a separate page, in a separate column, or at the top of the report page. Each kind of layout is determined by a JSP file that renders the input control page.

Layout Type

Files To Edit

Pop-up window

<js-webapp>/WEB-INF/jsp/modules/inputControls/DefaultParametersForm.jsp

Separate page

In page (left-hand panel)

<js-webapp>/WEB-INF/jsp/templates/inputControls.jsp

Top of page

<js-webapp>/WEB-INF/jsp/modules/viewReport/viewReport.jsp

You can customize these files in one of two ways:

If you directly modify one or both of the files listed above and save them in the same location in your web application, your changes apply to all reports. The procedure is similar to Customizing the Login Page. After making your changes and redeploying the web app, every user will see your new input controls form. For example, you could modify these files to change the background color of all your input controls.
In the case of the file DefaultParametersForm.jsp, you can create a JSP file with a different name and use it in individual reports, without affecting the default appearance of input controls for other reports.

If you are updating from an earlier version the following changes may affect your input control customizations:

JasperReports Server 5.5: Input controls were modified in 5.5. Custom input controls developed before 5.5 may require modification to work with the new input control design.
JasperReports Server 5.5 and 5.6: You may also need to modify the main report viewer (<js-webapp>/scripts/bower_components/jrs-ui/src/report.viewer.main.js) to listen for controls as shown below. This is not necessary in JasperReports Server 5.6.1 and later:

jQuery(document).trigger('controls_initialized', {});

If you make changes to a JavaScript file, such as report.viewer.main.js, you need to re-optimize the JavaScript files, as described in Customizing JavaScript Files.

Once you've created the file you want, save the file in your server instance. For example, you could create a <js‑webapp>/WEB-INF/jsp/custom directory and save your customizations there, for example as CustomShippingParametersForm.jsp.

JSP files rely on other JSP files to reuse parts of the user interface. In the file you modify, you can either reference the default JSP helper files or make copies of them to modify and reference instead.

To use custom JSP input controls in a report, you need to add the JSP file to the report as a resource. For example, suppose the JSP for the input controls above was saved as <js-webapp>/WEB-INF/jsp/custom/customShippingParametersForm.jsp in your server instance. To attach this file to your shipping report, first locate the report in your repository and right-click to edit the JasperReport resource. Then go to the Controls and Resources page and set the Optional JSP location to the path of your file relative to <js-webapp>/WEB-INF/jsp/. In this example, you would enter custom/CustomShippingParametersForm.jsp.

Specifying a Custom JSP File for Input Controls

 

For information about editing JasperReports in the repository, refer to the JasperReports Server User Guide.

Customizing the Report Viewer

The report viewer creates the page with the controls for paging through a report and exporting its contents in other formats. The main JSP files of the report viewer are:

<js-webapp>/WEB-INF/jsp/modules/viewReport/ViewReport.jsp

<js-webapp>/WEB-INF/jsp/modules/viewReport/DefaultJasperViewer.jsp

To change the report viewer, modify and save the default files without changing their names. The procedure would be similar to Customizing the Login Page. After redeploying the web app, your changes to the report view appear in every report for every user. The following example shows how to modify the ViewReport.jsp file so that the Save and Save As options are only visible to administrators.

To modify the Save and Save As buttons in the report viewer:

1. Add the line to import the Spring authz tag near the beginning of the file. This line is necessary to implement access control in a JSP file:

<%@ taglib uri="http://www.springframework.org/security/tags" prefix="authz"%>

...
<%@ taglib prefix="t" uri="http://tiles.apache.org/tags-tiles" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="js" uri="/WEB-INF/jasperserver.tld" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib  prefix="authz" uri="http://www.springframework.org/security/tags"%>
...
2. Insert authz:authorize tags around the elements that implement the Save and Save As options.
<%-- changes for Ult Guide to remove save buttons --%>
<b><authz:authorize ifAllGranted="ROLE_ADMINISTRATOR"></b>
  <c:if test="${isPro}">
     <li class="leaf"><button id="fileOptions" class="button capsule mutton up first"
          title="<spring:message code="button.save"/>" disabled="true">
          <span class="wrap"><span class="icon"></span> 
          <span class="indicator"></span></span></button></li>
  </c:if>
  <c:if test="${!isPro}">
    <li class="leaf"><button id="fileOptions" class="button capsule mutton up first" 
          title="<spring:message code="button.save"/> 
           - <spring:message code="feature.pro.only"/>" disabled="true">
          <span class="wrap"><span class="icon"></span>
          <span class="indicator"></span></span></button></li>
   </c:if>
</authz:authorize>

The following figure shows that the Save icon at the top left, under the report title, still appears for an administrator:

Administrator's View of Modified Report Viewer

The following figure shows the view for an end user, with the Save icon removed.

User's View of Modified Report Viewer

Version: 
Feedback