How to customize the color of the Parameter Title Bar of the BIRT Reports Web Viewer

Proof of concept (i.e - the long way):

Step 1: Open up any old report and click “VIEW REPORT” to run the report in a web browser.

Step 2: In the web browser, somewhere within the white space of the report, right click and select properties.

Step 3: Copy the address (URL):

 

It should look something like this:

http://000.0.0.1:60085/viewer/frameset?__report=M%3A%5CBA%5CProject+FMAX+Core+Team%5CAiM_BIRT%5CAiM_BIRT_3_7_1%5
CAiM_BIRT_3_7_1_PROD%5C180+-
+Work+Order+Phase+Listing+Print.rptdesign&__format=html&__svg=false&__locale=en_US&__timezon
e=America%2FNew_York&__masterpage=true&__rtl=false&__cubememsize=10&__resourceFolder=M
%3A%5CBA%5CProject+FMAX+Core+Team%5CAiM_BIRT%5CAiM_BIRT_3_7_1%5CAiM_BIRT
_3_7_1_PROD&__dpi=96&1121054324

Step 4: Open up Chrome and paste that URL into the URL bar.

Chrome has quick access to some developer functionality that other browsers do not. These make it easy to make changes to webpages on the fly.

Step 5: Open up another chrome browser and go to http://www.learningjquery.com/2006/12/jquerify-bookmarklet

Follow the steps on that page to drag  and drop the jQuerify bookmarklet to your bookmarks toolbar.

You can show your bookmarks toolbar by going to:

1.       Chrome Settings/Customization

2.       Hover over Bookmarks

3.       Click “Show bookmarks toolbar”

Step 6:  On your report’s Chrome webpage, open up the javascript console.

You can open the console by going to:

1.       Chrome Settings/Customization

2.       Hover over Tools

3.       Click “Javascript console”

Step 7:  Click on the jQuerify Bookmarklet

You should receive some sort of message within the javascript console that says “Thanks for using

jQuerify”

You may get an error message depending on your settings, if so, just ignore it.

Step 8:  Copy and paste the following code into the javascript console:

$("div").each(function(i){ if($(this).hasClass("dialogTitleBar")){ $(this).css("background-color","red"); } });

Then hit ENTER on your keyboard.

This is some quick javascript using the jQuery library. If you’d like to learn jQuery, I recommend going through the Javascript, Web Fundamentals, and jQuery lessons located here – it’s free!

http://www.codecademy.com/learn

Essentially, what this script is doing is finding any “div” HTML element that has the CSS class .dialogTitleBar . Then changing the background-color within that class to “red”

I found the CSS files by clicking “view source” on the report’s webpage – it’s in the same Chrome tools section that you found “JavaScript Console”

All of the classes for the dialog boxes for the reports are located under the css file:

http://”yourlocalhostIPaddress”/viewer/webcontent/birt/styles/dialogbase.css

You can find the rest of the report’s styles here:

http:// ”yourlocalhostIPaddress”//viewer/webcontent/birt/styles/style.css

Limitations:

1.       Unfortunately, was only a proof of concept and will not change your titlebar on every report you generate, this only works once. But! This shouldn’t be too hard to actually change if you have a web developer on hand. S/he would need to figure a way to force all reports to open up into webpage hosted by your institution.

That webpage would either:

·         Need to be linked to a .js file on your server that held this script plus a link to the latest version of JQuery (currently http://code.jquery.com/jquery-1.9.1.min.js).

·         Have that script inserted into the webpage along with a link to jQuery latest

So don’t do all of that, just simply use:

Method  2 – the quick(er) way:

I noticed that the css files were referring to an IP address, at first I thought that these were hosted by Eclipse, but that just didn’t make much sense. What if the Internet was down? I know I’ve run a report while the Internet was down before, so there must be another way that BIRT is accessing these files.

And then it hit me, these were files that we were hosting within BIRT locally. Sure enough an IP address lookup revealed that the IP addresses were from “localhost” in other words, me (or the local server if you are running the report directly from AiM). AH HA!

So after some searching in the BIRT program files, I found the css files that were being linked to by the report viewer.

Step 1: Find the folder that houses the reports viewer css files:

C:\”DIRECTORY TO YOUR BIRT FOLDER (Example: C:\Program Files\BIRT 3_7_1)”\eclipse\plugins\org.eclipse.birt.report.viewer_3.7.1.v20110905\birt\webcontent\birt\styles

If you are using BIRT 2.5.1 you’ll need to change the link accordingly.

Step 2: Make a backup of the files that you need to customize.

Since you are changing a program file and there is the potential to really mess up the CSS on the reports, you should make a backup of each file so that you can revert back to them in case a hard-to-troubleshoot squiggly or semicolon accidentally gets deleted.

You should backup both of these:

·         dialogbase.css

·         dialogbase_rtl.css

Once you have backed them up, open the original files.

Step 3: Do a FIND and locate the class and change the background color

·         On the first file, if you are opening it up in notepad, click on the first position within the file (before the commented out Copyright section).

·         Hit Ctrl + F

·         Do a search for “.dialogTitleBar”

The class should look like this:

.dialogTitleBar {

                height: 20px;

                background-color: #4E6DA4;

                cursor: move;   

}

·         You only need to change the hexadecimal number after background color. If you do not have a color number in mind, you can use this simple color picker here: http://www.w3schools.com/tags/ref_colorpicker.asp

o   Example: background-color: #FFD700;

·         You can also use specific color names, just be sure to put them within quotations. Here’s a good list of named colors:
http://www.w3schools.com/tags/ref_colornames.asp

o   Example: background-color: “red”;

Save and close the files.

Step 4: Close and reopen BIRT

BIRT creates an instance of the program from the files each time you open it. Because of this, it essentially caches the old css files until you close and reopen the program.

Once you have done that, you can choose a report that has parameters, click “VIEW REPORT” and voila! Now your parameter title has been changed to the color of your choice!

Limitations:

·         Because BIRT is running off of your local machine, this only changes the title bar color on your computer. To change them for all clients using a program that utilizes the BIRT viewer – (e.g. AssetWorks AiM) You will have to locate the BIRT css files from within that program. For consistency’s sake, they should be named the same as the local files on your computer, so a quick search for “dialogbase.css” and “dialogbase_rtl.css” on the server should bring them up!