Query Maximo With Open Source Birt

Sometimes an organisation needs to provide certain users with simple query tools over their key applications rather than complete access to use the application. In this case it may be appropriate to create your query tool using BIRT and format the output to resemble the original application. This is part twoof a two part series.

The full version of this report, including screen shots, in full colour pdf is available for free download at http://www.BIRTReporting.com

INTRODUCTION
============

In the first part of this guide we learned how to format a BIRT report so that the main body of the report resembled the Maximo user interface. However there are a few more things that we need to do to finish off the look completely.

Firstly we need to change the background colour of the tool bar and navigation bar of the BIRT report, so that the colour scheme fits better with the rest of the report. Next we need to provide the user with a search facility so that they can filter the report to a specific record. Finally we need to apply the header image to the top of the report.

Notice in the screenshot below, how the header image and the search box site ABOVE the actual report. In operation, the user is able to enter a PO Number (or select one from a drop down list) and the report refreshes and displays the new data in the lower section of the screen.

This is achieved by embedding the report design in a Java Server Page, giving us enormous control and flexibility over our report designs.

The complete design files and all of the image files that were used in the creation of this report are available free of charge to readers of my book ?BIRT for Beginners? or readers of my ?BIRT for Maximo Self Study Workbook?. Just visit the readers area of my web site:

http://www.birtreporting.com/ReadersEntryPage.html

WHAT YOU WILL NEED
==================

In order to create the ?look and feel? of this report you will need some graphic files. You can create these yourself with any image editing software or if you are a reader of my books then you can download the files from my web site.

The files are as follows:

MXReportHeader.jpg

This is an image I created to sit at the top of all the reports and resembles the Maximo header image. Of course you can create your own image to resemble your corporate reporting style or just use mine.

MXArrow.jpg

This is the arrow that sits to the left of each detail line of the report. In this example we are displaying purchase order lines. In the Maximo application this image would be active and when clicked on it would reveal more details about the parchase order line. In this case it is a static image, but could easily be made into a hyperlink which would run a secondary report to show the line details.

MXFindBG.jpg

This image is the background to the search toolbar, that sits just beneath the main report header. It is a thin sliver of an image and the report design uses standard HTML functionality to repeat it to fill the entire width of the search bar.

MXLookupBtn.gif

This image is the hyperlink that actually runs the report, once the user has selected the PO Number that they want to view.

You will also need a copy of the open source BIRT Report Designer and since this report uses a Java Server Page (JSP), you will need something with which to create and edit one of those. Luckily the BIRT designer is Eclipse based and so forms an excellent choice for JSP editing too.

For details on how to download and intall the BIRT Designer please see my report: The Complete Getting Started Guide to BIRT which is available for free from the members area of www.BIRTReporting.com.

THE TOOLBARS
============

The standard BIRT viewer has three areas which appear at the top of each report. The title area, which contains a title for the viewer session, by default ?BIRT Report Viewer?, the toolbar section which contains a few buttons and the navigation bar which allows users to move between the pages of the report.

You can see that we have removed the title bar completely, changed the background colours of the tool bar and navigation bar and added the search box and main title banner.

To modify the background colours of the toolbars we need to edit the stylesheet that BIRT uses to format these. Of course, there are two style sheets in use, one for when you preview reports in the designer environment and one for when you place your reports into production in the Tomcat server environment. The style sheet we are looking for is in a file called ?style.css?and it is located in the following locations for the designer and for Tomcat respectively. Obviously this path may differ slightly on your computer depending on the BIRT version and preferences you selected at installation.

Designer Preview Viewer

C:\BIRT\plugins\org.eclipse.birt.report.viewer_2.6.1.v20100913\birt\webcontent\birt\styles

Tomcat Production Viewer

C:\Program Files\Apache Software Foundation\Tomcat 6.0\webapps\BIRT-Viewer\webcontent\birt\styles

In the BIRT designer, select File / Open File and open up the CSS file that you wish to work on. With the file open, scroll down until you find the following section:

/******************************************************************************
* Toolbar
******************************************************************************/
.birtviewer_toolbar
{
height:26px;
background-color:#999999;
font-family:Verdana;
font-size:8pt;
border-top-width:1px;
border-top-style:solid;
border-top-color:#808080;
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:#808080;
}

/******************************************************************************
* Navigation bar
******************************************************************************/
.birtviewer_navbar
{
height:26px;
background-color:#CCCCCC;
font-family:Verdana;
font-size:8pt;
border-left-color:#808080;
border-left-style:solid;
border-left-width:1px;
}

THE JAVA SERVER PAGE
====================

The Java Server Page (JSP) acts as a container for our report and allows us to add the parameter requester and a page header, plus it allows us to tinker with the styling to create the effect we are after.

Start by creating a new file, I called mine ?POList.jsp? and open it up in Eclipse. Then enter the following structure:

This provides us with two main sections in which to enter our code, the style section, which will contain information about how the elements of the body section are displayed and the body section which will contain the functional components.

THE STYLE SECTION
=================

Here is the entire style section:

.class1
{
height:45px;
width:1117px;
background: url('FadeBG.jpg') center no-repeat;
color: #000000;
position:absolute;
top: 0px;
left: 0px;
}
.class2
{
height:45px;
width:1116px;
background-image: url('MXFindBG.jpg');
background-repeat:repeat-x;
position: relative;
top: 29px;
left: -9px;
font-family:"Arial";
font-size: 12px;
}
.class4
{
position: absolute;
top: 5px;
left: 20px;
}
.class5
{
position: absolute;
top: 76px;
left: 1px;
width:1116px;
}

When we add elements to the body section we will reference one of the styles from the style section for each element we add, this will cause the added element to adopt the style defined in the style section. Lets take a look at the style elements to see what they do:

height:45px;
Sets the height of the item being defined
width:1117px;
Sets the width of the item being defined
background: url('FadeBG.jpg') center no-repeat;
Sets the background image of the item being defined, also sets it to centre on the page and not to repeat.
color: #000000;
Sets the foreground colour of the item being defined
position:absolute;
Sets the item to respect the positions defined below relative to the top left of the browser window. You can also specify ?relative? which will set the position relative to the containing object.
top: 0px;
Sets the top position of the item being defined
left: 0px;
Sets the left position of the item being defined
background-repeat:repeat-x;
Sets the image to repeat on the x axis only
font-family:"Arial";
Sets the font
font-size: 12px;
Sets the font size

THE BODY SECTION
=================









Find:










The first thing to notice about this is that the body is broken down into divisions, a division (indicated by the and tags is typically a region on the eventual output.

In our output we have three main regions, the header banner, the parameter requester and the main body of the report. We also provide the parameters to the BIRT report and these are contained in another division.

Notice also that each division has the name of a class built right into it, this is how we cause the content of the division to be styled based on the style section.

So, where we have

and the class1 style set to pull in the FadeBG.jpg image

background: url('FadeBG.jpg') center no-repeat;

That causes the image to be displayed at the top of our jsp.

THE BIRT PARAMETER PAGE
=======================

id="report1" Creates and ID for the report
name="page1" Creates a name for the report
target="ReportFrame" Sets the area of the page where the report will display
reportDesign="MaximoReports/
POList.rptdesign" Sets the report design to use
isCustom="true" Tells the report to use a custom parameter page (this page)
showTitle="false" Sets the report title to not display
showToolBar="true" Sets the toolbar to display
showNavigationBar="true" Sets the navigation bar to display
frameborder="false" Sets the border for the report to not display
forceOverwriteDocument="true" Sets the report to overwrite the temporary copy on the server which each run
pattern="frameset" Sets the report to appear inside a frame.

Using these parameters we are essentially telling BIRT that this page is going to replace the default parameter page and we are setting a few display controls.

THE REPORT PARAMETER
====================

Rather cleverly, we can reference the parameter inside the BIRT report that we are about to call.



This will cause the jsp to pick up the parameter definition from the report design and display it on the screen. So if, as in our case, you have created a parameter which provides a drop down selection of records from the database, this will automatically be passed into the jsp and displayed as a drop down select list.

The key thing you need to do to ensure this works is to use the same ID and Name as the report parameter definition in your BIRT report.

Highlight the report parameter within BIRT and look at the properties ? the Name and ID will be revealed!

THE LOOKUP BUTTON
=================

After entering the parameter value the user will press the ?lookup? button to run the report and display the content. The following code creates the button and links it to the appropriate image.

THE REPORT FRAME
================

You will recall that, in the report parameters section we defined the target for the report as follows:

target="ReportFrame"

The following piece of code creates an iframe on our page which is where the report content will be displayed.



PUTTING IT ALL TOGETHER
=======================

Now all you need to do is deploy the jsp, the rptdesign and the image files to your Tomcat web server directory and load the jsp into a browser with a URL like this:

http://localhost:8888/BIRT-Viewer/MaximoReports/POList.jsp

At first the jsp appears, with no report content so just select or enter your parameter value and hit the run button. You should be rewarded with a rather nice looking report, which you can re-run for different parameters simply by selecting or entering another and hitting the button again.

ABOUT THE AUTHOR
================

Paul Bappoo is the author of BIRT for Beginners (which is available in paperback from BIRTReporting.com, Amazon and Barnes and Noble amongst others) and the BIRT for Maximo Self Study Workbook, also available from BIRTReporting.com. He has been an international technical software consultant and involved with computers for over 30 years. Paul has an interest in BIRT reporting, enterprise application integration, automated software testing, computer based training and enterprise system implementation. Paul runs the BIRT User Group UK and is a member of the BIRT-Exchange Advisory Council. He would be delighted to hear from you with your tips, tricks and stories about your usage of BIRT. If you have a question, a need for training or consulting or great tip to share with the community then drop him a line.

HOW TO CONTACT THE AUTHOR
=========================

Email: Paul@BirtReporting.com

Web Site: http://www.BirtReporting.com

The full version of this report, including screen shots, in full colour pdf is available for free download at http://www.BirtReporting.com