Jump to content
We've recently updated our Privacy Statement, available here ×

Embedding Html/Javascript code in Jasper report


selbag

Recommended Posts

Hi,

Is it possible to embed Html/Javascript code with in jasper report developed using ireport, this option is available in Pentaho report designer, I am new to Jasper and didn't find this option, please let me know if its possible or not.

Thanks

Selva

Link to comment
Share on other sites

  • 1 month later...
  • Replies 8
  • Created
  • Last Reply

Top Posters In This Topic

Hi,

 

JasperReports let's you embed Javascript into the report exported to HTML in various ways.

But you need to tell what kind of Javascript it is and what exactly it does, in order to tell you how to go about it?

 

There must be somthing else you did not like in Pentaho that made you give us a try. What was that?

 

Thank you,

Teodor

 

Link to comment
Share on other sites

  • 3 months later...
  • 1 year later...
  • 8 months later...

Hi Svenn,

Previously, I have used TCPDF to generate PDF reports from html files. But now I wish to make use of jasper reports  and reuse those html files. Some of these files contain tables tags created dynamically. Is it even possible for me to make a switch over?

Please advice. Thanks.

Regards,
Shiva

 

 

Link to comment
Share on other sites

  • 2 months later...

I'll start by saying that it is possible to use HTML, Javascript, jQuery, VBScript and even AJAX in a Jasper Report. 

In at least one report, I am creating an <input type="hidden"> and a <input type="checkbox"> for each row, and am calling a javascript function from the onclick of the checkbox which triggers an AJAX call, which stores the returned value in the hidden field for that row.  It works flawlessly!

Limitations - it will only work when the report is exported to HTML and presented in a browser - kinda obvious. 

My own use looks something like the following...

I have a Servlet that handles JasperReport calls (i.e. URLs that end with /JasperReports.

I have 2 HTML files that present a shared reports interface - One is the top portion of the report page (everything up to but not including the report content itself), which I will call header.html, the second is the bottom portion of the page (everything after the report content), which I will call footer.html.

Based on the report I include different .js files in the <head> section of header.html.

The servlet will output a jasper report by first outputting header.html, then the report content via JrHtmlExporter, and finally footer.html.  All of these are output directly to the response.getOutputStream()/getWriter().

I use iReport 4.5.1 to create and modify my report templates (.jrxml).  To enable the above, I have used 2 HTML components in my report definition.  Again, one for a hidden input and one for a checkbox which calls a javascript function for its onclick, passing the hidden value as one of the parameters – both of these inputs are created for every row.

Here is the HTML expression (use this in the HTML component) for the hidden input. 

"<input type=\"hidden\" id=\"orderid_" + $F{ORDERID} + "\" name=\"orderid_" + $F{ORDERID} + "\" value=\"" + $F{STATUS} + "\"/>"

Two things to note in the above – the id and name for the hidden input are unique for each row.  Also, I am setting its initial value to the status column of the report.

Following is the HTML expression for the checkbox input.

"<input type=\"checkbox\" name=\"test\" value=\"" + $F{STATUS} + "\"" + (($F{EXCLUDED}.intValue() > 0) ? "" : " checked ") + " onclick=\"handleClick(this, '" + $F{ORDERID} + "', '" + $F{STATUS} + "')\"/>"

Things to note in the above – the name doesn't matter.  I am using a report field to set the initial value and I am checking a report field to determine if the checkbox should initially be checked.  I am using 2 report fields as parameters to the handleClick() function.  Both of these parameters are received as strings in handleClick() because they are enclosed in single quotes – the handleClick() call looks like this after the above has been evaluated – handleClick(this, 'someorderid', 'somestatus').

The actual code for the handleClick() function is, again, included in the <head> section of header.html – it is not part of the report definition.  Part of the magic is that by the time all of this gets to the browser, it doesn't matter where it came from as long as it is there.  The browser just sees a valid page with javascript.

Anyway, to finish, I have included the code for handleClick() in the code section of this post (and a bonus function that commits the work done by the handleClick() function)...  If I didn't mention it above, I am now – the html files are actually freemarker templates hence the $('#control').val() syntax.  Whatever the case may be, use whatever syntax is valid in your environment to reference the input controls.

Things to note in the javascript code – I am referencing the hidden input for the selected row via the expression $("#orderid_" + orderid).val(); (see the HTML expression for the hidden input above to correlate).  My servlet looks at the ac request parameter to determine what to do.  The above javascript/jQuery functions merely provide the glue to pass the request down to the server and execute the named method on the report object (which I have stored in the users session).  The servlet uses reflection in order to call the named method.

And that, as they say, is that.  Hope this helps.

Regards,

 

Rodney Barbati

Code:
function handleClick(cb, orderid, status){    var test = $("#orderid_" + orderid).val();     $.ajax    (        {            url: "/JasperReports?ac=executeMethod&reportName=YourReportNameHere&methodName=toggleInclude&orderid=" + orderid + "&status=" + test,             success: function(result)            {                if (result == null || result == "error")                {                    alert("An Error has been encountered - close the page and try again");                }                else if (result == "included")                {                    cb.checked = true;                    // Update the value of the hidden for this row                    $('#orderid_' + orderid).val("Included");                }                else                {                    cb.checked = false;                    // Update the value of the hidden for this row                    $('#orderid_' + orderid).val("Excluded");                }            }        }    )} function onCommitButton(){    $.ajax    (        {            url: "/JasperReports?ac=executeMethod&reportName=YourReportNameHere&methodName=commit",             success: function(result)            {                if (result == null || !result)                {                    alert("An Error has been encountered - Your latest changes may not have been saved!");                }                else if (result)                {                    alert("Changes have been saved...");                }            }        }    )} 
Link to comment
Share on other sites

  • 6 years later...

I was looking for something or some how to introduce javascript code in the report, which runs when compiled in html. 
So I did not see this being mentioned anywhere in this thread, maybe the properties was added at later stage. 
Anaways, if there are future people looking for something like this. 
These following 2 properties exist : 
net.sf.jasperreports.export.html.header
net.sf.jasperreports.export.html.footer

You can add this propertes to the files and in the properties define the script you want to run. 
Example: 
• Property name : net.sf.jasperreports.export.html.header
• Use as Expression is ticked
• Evaluation time is left empty
• Expression = "<script>console.log('tester')</script>"    

So when the report runs, you can use the browser developer tool and view console feedback and you will see the tester print out to console. 
So script then will work.  

Now you can then make use of net.sf.jasperreports.export.html.id or class to be assigned to elements in your report and you can make use of these to link actions to etc where required and to be reference in the css files. 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...