Jump to content

BIRT Developer Center Download


Submitter

File Information

  • Submitted: Sep 02 2015 11:59 PM
  • Last Updated: Sep 03 2015 12:01 AM
  • File Size: 32.09KB
  • Views: 8001
  • Downloads: 89
  • Approved by: Clement Wong
  • Approved on: 03 September 2015 - 12:01 AM
  • Summary: Include jQuery into OS BIRT
  • Content Type: Designs & Code
  • BIRT Version: 4.4, 4.3

Download jQuery and Open Source BIRT

* * * * * 1 Votes
jquery birt and jquery highlight external javascript library external javascript libraries load JS external js



Screenshots
We've seen that commercial BIRT includes jQuery so calling functions to highlight rows or creating mouse-overs are easy to do. Reference samples include this forum post with an attached example or this DevShare with an extensive example.

So how can jQuery be used in OS BIRT?

With the release of BIRT 4.3, we've included the ability to use head.js (see release notes for more info) to load external JavaScript libraries. If you're using an older version, you still can load external JavaScript libraries via the dynamic library loader -- see this DevShare for an example.

The attached example was tested in OS BIRT 4.5.0, but should be able to run in OS BIRT 4.3 or higher.

In the clientInitialize event, we load jQuery with a callback once the library is loaded. Because the OS BIRT viewer uses prototype.js, which defines the $ JavaScript function, we need to move the jQuery $ to another name.

head.js("https://ajax.googlea...jquery.min.js",function() {
window.jq191 = jQuery.noConflict();

// OS BIRT Viewer uses prototype.js so we'll need to move the jQuery default $ to something else

});



In the table, we place a simple <DIV> placeholder in the table so that we can find this DOM element with jQuery.

<div id="here"></div>

Now, we can use jQuery to find all the <TR>s to highlight the row colors, and also apply a mouse over and mouse out to the row. You will notice that I'm using jq191 instead of the default jQuery $.

<script>
allCells = jq191("#here").closest("table").find( "td" );

allCells.parent().parent().parent().find("tr:odd").css("background-color", "#EEEEEE");
allCells.parent().parent().parent().find("tr:even").css("background-color", "");

allCells
.on("mouseover", function() {
var el = jq191(this);
el.parent().css("background","#DDDDDD");
})
.on("mouseout", function() {
allCells.parent().parent().parent().find("tr:odd").css("background-color", "#EEEEEE")
allCells.parent().parent().parent().find("tr:even").css("background-color", "")
});
</script>




Photo
DGI Systems
May 06 2016 01:31 AM
Hi Clement,
 
Firstly, thank you very much for posting this it is a very helpful guide to using head.js and js libs.
 
I have tested the report in OS viewer (birt.runtime_4.3.1.v20130918-1142) and can see that there are issues when the TOC is engaged and contains entries. It seems to break something. I have found this loading jQuery and Google charts.
 
With no entries in the TOC, everything is fine but when I add some TOC entries via ProductName (Element ID: 474), I see the following issues:
 
1. Open and close the the TOC then use page nav buttons 
    - highlights remain until I use the page forward/back buttons
    - no more highlights after they are used
2. Open the TOC and select a link (I added some entries on Product Name)
    - hyperlink works
    - no more highlights
 
I have tried tracing how the TOC build is breaking things but the event dispatchers are getting hard to work with so I thought it time to ask the expert.
 
Are you aware of any bugs with TOC and head.js?
 
If so do you know of any workarounds as I am keen to get jQuery working in the reports. We promote TOC usage to end users so unless I can get this working without error I can not include jQuery or HTML5 charts in my reports.
 
Thanks,
David

Works relatively well, good implementation.  The Initialize does not seem to highlight the rows as I needed to page forward to get the Highlights to work.  Maybe use standard Highlight rules, and use only the mouseOut to maintain the highlights?   I would also like to see some JQuery where a "Read more..." for a given cell exists. A question coming up in the Forum. 




0 user(s) are online (in the past 1 minutes)

0 members, 0 guests, 0 anonymous users