Adding tabs to a landing page in JasperReports Server

Introduction

In this article, we show how to set up a multi-tab landing page for users based on their roles and organizations, so that when a user logs in, we get something like the screenshot below:

To get this example working, we assume that you have installed the sample Foodmart database. If you are not using the sample database, you can easily adapt this solution to your own test environment. This procedure works for JasperReports Server v4.5.

Installation Procedure

Download the resource package

FilesForTabstest.zip -

• commonJSTLScripts.jsp goes to the /jasperserver-pro/WEB-INF/jsp/modules directory
• home.jsp and homeForTabs.jsp go to the /jasperserver-pro/WEB-INF/jsp/modules/home directory
• ViewReport.jsp goes to the /jasperserver-pro/WEB-INF/jsp/modules/viewReport directory
• control_tabSet.jsp goes to the /jasperserver-pro/WEB-INF/jsp/templates directory

, which contains these files:

Place them in a working directory.

Make backups

The first thing is to back up the files we're about to overwrite. In a backups directory, copy these files over from the the web application's root directory:

• /jasperserver-pro/WEB-INF/jsp/modules/home/home.jsp
• /jasperserver-pro/WEB-INF/jsp/modules/commonJSTLScripts.jsp
• /jasperserver-pro/WEB-INF/jsp/modules/viewReport/ViewReport.jsp
• /jasperserver-pro/WEB-INF/jsp/templates/control_tabSet.jsp

Create sample user with sample role

For this example, you'll need to create a test user with the right role:

• Login as the superuser
• Go to "Manage -> Roles"
• Make sure that "Organization" is selected on the left-hand side
• Add the role, and label it ROLE_TABTEST; make sure it's this and that it's uppercase - it needs to match what we see in the home.jsp file
• Go to "Manage -> Users"
• Make sure that "Organization" is selected on the left-hand side
• Add a new user
• Assign the role "ROLE_TABTEST" to that new user

Upload the sample theme

Still as the superuser, go to the repository, and browse to the organization's Themes folder, which you can find under /Organizations/Organization/Themes. Right-click on the Themes folder and choose the "Upload Theme" option, and upload the tabstest.zip file. Make sure to name that theme tabstest. The ViewReport.jsp file depends on that value to hide the back button.

Stop the Tomcat server

Now you'll need to stop the Tomcat server do properly replace the JSP files and do some cleanup on the server-side files.

Replace the JSP files

You previously backed up some files we're going to overwrite, so now we're ready to put in our custom files.

• commonJSTLScripts.jsp goes to the /jasperserver-pro/WEB-INF/jsp/modules directory
• home.jsp and homeForTabs.jsp go to the /jasperserver-pro/WEB-INF/jsp/modules/home directory
• ViewReport.jsp goes to the /jasperserver-pro/WEB-INF/jsp/modules/viewReport directory
• control_tabSet.jsp goes to the /jasperserver-pro/WEB-INF/jsp/templates directory

Clear Cached JSPs

We'll also need to do a bit of clean-up on some server-side files. Tomcat processes JSP files first into JAVA files and then compiles them to CLASS files, which it stores in a working directory that it uses as a cache; this is a normal server optimization that saves Tomcat the trouble of having to compile a JSP file for every single request. So that we're sure that it's taking the latest JSP, we're going to have to clear out those files from the cache directory before we re-start Tomcat. Browse to the Tomcat root directory, and then find this subdirectory: /apache-tomcat/work/Catalina/localhost/jasperserver-proorgapachejsp. Under that directory, you'll find another subdirectory typically called WEB_002dINF; it may vary in your particular situation. Under that directory, you will find the JAVA and CLASS files that correspond to each JSP file; find them and then delete them. For example, under the /WEB_002dINF/jsp/modules/home directory, you'll find home_jsp.java and home_jsp.class; go ahead and delete these two files as well as all the other JSP files that you overwrote.

Restart the server

You are now ready to restart the server! If you've followed the instructions up to now, you should be able to restart the server and login as the test user you created earlier. When you login, you should also find that you've landed in the multi-tab landing page.

Explanation of the different files

The home.jsp file

When a user logs in, the server will process the home.jsp file (which is found in the /jasperserver-pro/WEB-INF/jsp/modules/home directory) to decide which JSP to serve up as the landing page for the user.

<!-- ~ Copyright (C) 2005 - 2011 Jaspersoft Corporation. All rights reserved. ~ http://www.jaspersoft.com. ~
       Licensed under commercial Jaspersoft Subscription License Agreement --%>;
<%@ page contentType=&quot;text/html&quot; %>;
<%@ taglib uri=&quot;/spring&quot; prefix=&quot;spring&quot;%>;
<%@ taglib uri=&quot;http://www.springframework.org/security/tags&quot; prefix=&quot;authz&quot;%>
<authz:authorize ifallgranted="ROLE_DEMO">
  <jsp:include page="homeForDemo.jsp"> </jsp:include>
</authz:authorize>
<authz:authorize ifallgranted="ROLE_TABTEST|organization_1">
  <jsp:include page="homeForTabs.jsp"> </jsp:include>
</authz:authorize>
<authz:authorize ifnotgranted="ROLE_DEMO">
  <authz:authorize ifnotgranted="ROLE_TABTEST|organization_1">
    <jsp:include page="homeForNonDemo.jsp"> </jsp:include>
  </authz:authorize>
</authz:authorize>

If you compare it with the home.jsp that the product ships with, you'll notice the extra entries for the ROLE_TABTEST role; the entry is a rule that will serve up the homeForTest.jsp if the user has the "ROLE_TABTEST|organization_1" role assigned to them. This means that the role is specific to the organization, and is not a global role, like ROLE_SUPERUSER and ROLE_PORTLET. When creating the role, make sure to have the organization you want to create this role for properly selected!

The homeForTabs.jsp

This file will contain the references to the three reports or dashboards that show up in the three different tabs. If you are not working with the the sample reports and dashboards, all you have to do is replace the URL's parameter values with the ones that reference your own report or dashboard. You can define the three reports or dashboards to view here, within this Javascript function. All you have to do is replace the URL references that start with "˜flow.html' with the references to your own reports and dashboards.

<script>
function myFunct(var1) {
    var ifrm = document.getElementById('ifrm');
    if (var1 == "opt1") {
        ifrm.setAttribute('src', 'flow.html?_flowId=dashboardRuntimeFlow&dashboardResource=/supermart/SupermartDashboard30&viewAsDashboardFrame=true');
    }
    else if (var1 == "opt2") {
        ifrm.setAttribute('src', 'flow.html?_flowId=viewReportFlow&standAlone=true&_flowId=viewReportFlow&ParentFolderUri=%2Freports%2Fsamples&reportUnit=%2Freports%2Fsamples%2FEmployees&viewAsDashboardFrame=true');
    }
    else if (var1 == "opt3") {
        ifrm.setAttribute('src', 'flow.html?_flowId=viewReportFlow&standAlone=true&_flowId=viewReportFlow&ParentFolderUri=%2Freports%2Fsamples&reportUnit=%2Freports%2Fsamples%2FAllAccounts&viewAsDashboardFrame=true');
    }
}
</script>

Further down, you'll find this JSP code that defines the tab labels and tab attribute names that the Javascript code above will use:

<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">
        <t:addlistattribute>
          <t:addattribute>opt1</t:addattribute>
          <t:addattribute>Dashboard 1</t:addattribute>
          <t:addattribute>selected</t:addattribute>
        </t:addlistattribute>
        <t:addlistattribute>
          <t:addattribute>opt2</t:addattribute>
          <t:addattribute>Dashboard 2</t:addattribute>
        </t:addlistattribute>
        <t:addlistattribute>
          <t:addattribute>opt3</t:addattribute>
          <t:addattribute>Dashboard 3</t:addattribute>
        </t:addlistattribute>
      </t:putlistattribute>
    </t:putattribute>
  </t:putattribute>
</t:inserttemplate>

At the very bottom, you'll find the iframe tag, where you can populate the default tab to load in the src attribute:

<t:putattribute name="bodyContent">
<iframe frameborder="0" height="99%" hspace="0" id="ifrm" marginheight="0" marginwidth="0" scrolling="auto"
        src="flow.html?_flowId=dashboardRuntimeFlow&amp;dashboardResource=/supermart/SupermartDashboard30&amp;viewAsDashboardFrame=true"
        vspace="0" width="100%"></iframe>
</t:putattribute>

The ViewReport.jsp file

The customized ViewReport.jsp file contains extra code to hide the back button when the embed theme ("˜tabstest') is turned on.

Notes 

• This article was originally published for version 4.5, this continues to work in version 5.0 (except for the optional ViewReport.jsp, this wasn't tested). The theme won't work with 5.0 either
• In the homeForTabs.jsp page you might get a security error if you sue the /path/like/this, you'll need to encode it with this tool to %2Fpath%2Flike%2Fthis
• You might consider modifying the theme (file container.css) to remove extra space at top of margin:

.column.decorated.tabbed.showingToolBar > .content > .body {
    margin-top: 64px;
}

filesfortabstest.zip