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.
Customizing Input Controls
A report can have many input controls, you can group them by some category and display them on different tabs in the Input Controls dialog. This can improve the user experience.
In the following example, input controls are grouped by location and time.
To customize the input controls:
| 1. | Create a report with input controls named Country, Zip, Year, and Month. |
| 2. | Create customParametersForm.jsp and place it in jasperserver-pro/WEB-INF/jsp/modules/inputControls/ folder. |
<%@ taglib prefix="t" uri="http://tiles.apache.org/tags-tiles" %><jsp:include page="InputControlTemplates.jsp" /><!-- styles we want to apply to new tabs on Input Controls dialog --><style type="text/css"> .tabsButtons { margin-bottom: 30px; } #nicPanel { min-width:500px; min-height:400px; } .nicControlsPanel { border: 1px solid #e0e0e0; padding: 20px; } #nicCountrySearch { width: 300px; } #spanCountry { position: relative; top: -7px; } #inputControls { min-width: 550px; min-height: 500px; }</style><!-- adding tabs element from template --><div class="tabs tabsButtons"> <t:insertTemplate template="/WEB-INF/jsp/templates/control_tabSet.jsp"> <t:putAttribute name="type" value="buttons"/> <t:putAttribute name="containerClass" value="horizontal"/> <t:putListAttribute name="tabset"> <!-- tab that will contain input controls related to Shipping Location --> <t:addListAttribute> <t:addAttribute>nicByShippingLocationTab</t:addAttribute> <t:addAttribute>By Shipping Location</t:addAttribute> <t:addAttribute>selected</t:addAttribute> </t:addListAttribute> <!-- tab that will contain input controls related to Shipping Date --> <t:addListAttribute> <t:addAttribute>nicByShippingDateTab</t:addAttribute> <t:addAttribute>By Shipping Date</t:addAttribute> </t:addListAttribute> </t:putListAttribute> </t:insertTemplate></div><div id="nicByShippingLocationPanel" class="nicControlsPanel"></div><div id="nicByShippingDatePanel" class="nicControlsPanel"></div><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script><script type="text/javascript"> document.addEventListener("controls:initialized", function(event) { const controlsViewModel = event.detail; controlsViewModel.draw = function (jsonStructure) { //get and initialize Inptut Controls object const drawControl = function (container, jsonControl) { if (jsonControl.visible) { const control = this.findControl({id: jsonControl.id}); control.render(); document.getElementById(container).append(control.getElem() && control.getElem()[0]); } }; //selecting only input controls named Country or Zip const leftPanelControls = _.filter(jsonStructure, function (controlStructure) { return _.indexOf(["Country", "Zip"], controlStructure.id) >= 0; }); //assigning Country and Zip ICs to the left panel _.each(leftPanelControls, _.bind(drawControl, this, "nicByShippingLocationPanel")); //selecting only input controls named Year or Month const rightPanelControls = _.filter(jsonStructure, function (controlStructure) { return _.indexOf(["Month", "Year"], controlStructure.id) >= 0; }); //assigning Year and Month ICs to the right panel _.each(rightPanelControls, _.bind(drawControl, this, "nicByShippingDatePanel")); }; // tab handlers const nic = { tabByShippingLocationClickHandler: function () { document.getElementById("nicByShippingLocationPanel").hidden = false; document.getElementById("nicByShippingDatePanel").hidden = true; document.querySelector("div.tabs.tabsButtons > ul > li.tab.first"). classList.add("selected"); document.querySelector("div.tabs.tabsButtons > ul > li.tab.last"). classList.remove("selected"); }, tabByShippingDateClickHandler: function () { document.getElementById("nicByShippingLocationPanel").hidden = true; document.getElementById("nicByShippingDatePanel").hidden = false; document.querySelector("div.tabs.tabsButtons > ul > li.tab.last"). classList.add("selected"); document.querySelector("div.tabs.tabsButtons > ul > li.tab.first"). classList.remove("selected"); } }; nic.clickHandlerMap = { 'nicByShippingLocationTab':nic.tabByShippingLocationClickHandler, 'nicByShippingDateTab':nic.tabByShippingDateClickHandler }; // assign handlers _.each(nic.clickHandlerMap, function (handler, selector) { const shippingTabElement = document.getElementById(selector); shippingTabElement.addEventListener('click', handler, false); });});</script>[/code] |
| 3. | Restart JasperReports Server. |
| 4. | Go to View > Repository and click Edit to edit a report. |
| 5. | Select Controls & Resources from the menu and then enter modules/inputControls/customParametersForm.jsp in Optional JSP Location option. |
| 6. | Save and run the report. |
You can see that Input Controls dialog has two tabs “By Shipping Location” and “By Shipping Date” that contain corresponding Input Controls.
| By Shipping Location Tab |
| |
| By Shipping Date Tab |
| |
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"%>...[/code] |
| 2. | Insert authz:authorize tags around the elements that implement the Save and Save As options. |
<%-- changes for Ult Guide to remove save buttons --%><authz:authorize access="hasRole('ROLE_ADMINISTRATOR')"> <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>[/code] |
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 |
| |
Recommended Comments
There are no comments to display.