Javascript / jQuery in BIRT Report

Hi,

Are there any resources for using javascript with BIRT reports... can't seem to find much through google, and the word javascript is not allowed on the forum search.

I am trying to include and use external javascript files in my BIRT reports for html rendering... but seem to have difficulty initializing elements when using it with HTML / Text elements (ie, what I'd do on a document ready in a web page).

Where is the best place to do this initialization? In one of the onPrepare / onCreate / onReady, or in the <html> tags within the text box itself?

Also - has anyone modified jQuery to work with BIRT? It seems like jQuery expects a browser environment and doesn't work with BIRT - and I suspect the selectors of jQuery would be pretty useless with a BIRT report.

Find more posts tagged with

Comments

johnw

Yes, I use Dojo and similar Javascript libraries in BIRT reports all the time, or I'll write specific items in GWT and just import the resulting bootstrap javascript. The trick is to drop a TEXT element in the report, set the type to HTML, and use a script tag in there.

If you have access to your deployment environment, you can also modify components of the web viewer or the HTML emitter to include these tags for you, but it will be specific to your environment only, and would need to be done to both the designer and deployment environment.

Be careful though, BIRT HTML file results force their own ID's names, and its not always easy to know which element your working with unless you set the Bookmark tag yourself, which makes the ID tag set to something you want.

amorris

Thanks - I found the <a class='bbc_url' href='http://www.birt-exchange.org/org/devshare/designing-birt-reports/343-birt-web-2-0-image-example/'>birt web 2.0 image example</a> which changes an image URL by using document.getElementById... however, I can't seem to get this to work in an html text object.<br />
<br />
Is it possible to select an ID within a text/html object, or do I need to stick to the ID's in the birt report?<br />
<br />
Here's what I've been trying:<br />
<br />
<br />
In the BIRT Report text / html object:<br />
<br />
<pre class='_prettyXprint _lang-auto _linenums:0'><html>
<script type="text/javascript" src="Test_Reports/jstest/jstest.js"></script>
<script type="text/javascript">
jslib.test.init();
</script>
<body>
<div id="testid">Original Text</div>
Or print directly: <script type="text/javascript"> jslib.test.print5(); </script>
</body>
</html></pre>
<br />
Then in my jstest.js javascript file:<br />
<pre class='_prettyXprint _lang-auto _linenums:0'>var jslib = {
test:{
print5: function(){
return "Five";
},
init: function(){
document.getElementById('testid').innerHTML = 'Changed text';
}
}
}</pre>
<br />
But neither javascript calls work... am I missing something?

johnw

<blockquote class='ipsBlockquote' data-author="'amorris'" data-cid="73004" data-time="1297086392" data-date="07 February 2011 - 06:46 AM"><p>
Thanks - I found the <a class='bbc_url' href='http://www.birt-exchange.org/org/devshare/designing-birt-reports/343-birt-web-2-0-image-example/'>birt web 2.0 image example</a> which changes an image URL by using document.getElementById... however, I can't seem to get this to work in an html text object.<br />
<br />
Is it possible to select an ID within a text/html object, or do I need to stick to the ID's in the birt report?<br />
<br />
Here's what I've been trying:<br />
<br />
<br />
In the BIRT Report text / html object:<br />
<br />
<pre class='_prettyXprint _lang-auto _linenums:0'><html>
<script type="text/javascript" src="Test_Reports/jstest/jstest.js"></script>
<script type="text/javascript">
jslib.test.init();
</script>
<body>
<div id="testid">Original Text</div>
Or print directly: <script type="text/javascript"> jslib.test.print5(); </script>
</body>
</html></pre>
<br />
Then in my jstest.js javascript file:<br />
<pre class='_prettyXprint _lang-auto _linenums:0'>var jslib = {
test:{
print5: function(){
return "Five";
},
init: function(){
document.getElementById('testid').innerHTML = 'Changed text';
}
}
}</pre>
<br />
But neither javascript calls work... am I missing something?<br /></p></blockquote>
<br />
The thing is, the HTML renderer will already have put in the the opening HTML and HEAD tags, your HTML include statement is pretty much useless, it wont include the script tags like that. You should place it in the top of the birt report, and it should be: <br />
<br />
<pre class='_prettyXprint _lang-auto _linenums:0'>
<script type="text/javascript" src="Test_Reports/jstest/jstest.js"></script>
<div id="testid">Original Text</div>
<script type="text/javascript">
jslib.test.init();
</script>
Or print directly: <script type="text/javascript"> jslib.test.print5(); </script>
</pre>
<br />
Remember, since you are pretty much limited to having it already in the BODY tag, it gets run as soon as it is processed. That, or you modify the web app or HTML emitter to include the jstest in the HEAD tag.