Jump to content
Changes to the Jaspersoft community edition download ×
  • Executing JavaScript functions from JasperReports from within JasperReports Server


    A feature released in version 5.6 of JasperReports Server is the ability to create your own custom link types in reports. These link types can be anything you like and the code the fires also can be anything you want. You may be familiar with the ReportExecution link type available from with in JasperReports. This function tells JasperReports Server to execute a report and is passed some parameters to help make this happen. Well, how cool would it be if you could actually write your own functions and pass any parameters you want into it? Pretty Cool I think and this is what I’ll show you how to do! Let’s layout the steps involved to pull this off.




    1. Create a report in Jaspersoft Studio. Currently (as of this article) the only way to place a link inside a report is via Jaspersoft Studio.
    2. Find the section(s) of the report you want to offer this link functionality and add a hyperlink. I’ll show you some examples below.
    3. In the hyperlink(s) you will pass in your new custom link name. This really is the function that will run when this link is clicked.
    4. Create a javascript file that will handle the link when clicked.
    5. Place this file in the proper location of your JasperReports Server install



    That’s pretty much it! It’s really not complicated at all and works very well. So let’s start looking at these steps in detail one at a time.



    Here is an example of a report created in JasperSoft Studio. This is a very simple report that opens up dialog boxes from 3 different locations.

    http://postachio-images.s3-website-us-east-1.amazonaws.com/3f1ef816feedd505c340ba2802faee96.png



    Dialog 1 - This is an image placed on the report. It has nothing to do with the data that this report is bound to. Though it may look like a button, again, it really is just an image placed on the report. Now just about everything placed on a report has the option to be a hyperlink. This image is no exception to the rule and has hyperlink properties. See below that the Link Type is called open_dialog. This link type is referencing a javascript function that I built and added to the JasperReports Server. When a user clicks on the image it will call this function. What’s really cool about this is it will also pass any parameters I want to the function. See the image below and notice that I’m passing some specific parameters to my function that will have it react in a certain way. The types of parameters passed to a function is limited only by the function you create. My open_dialog function takes a handful of parameters to have it work correctly. You functions can do the same.

    http://postachio-images.s3-website-us-east-1.amazonaws.com/75c57d12807dad8b7914540f3a14a2d9.png

    http://postachio-images.s3-website-us-east-1.amazonaws.com/5031631cf627292f8f039f8d13bf02ba.png



    Here is a picture of the content being presented in the dialog. Report parameters and even Java code are all good.

    http://postachio-images.s3-website-us-east-1.amazonaws.com/e780bbefbd3b62160c4c85016db1dcb0.png



    Dialogs 2 and 3 - Both of these links open up dialog boxes that show actual data from the report. Notice how each link is within a row of data. This means that each link can pass parameters specific to that row! Very cool indeed :) So the links you see here are actually going to be passing report parameters and are completely dynamic. See the images below and how the Employee Details dialog boxes both render different data.



    http://postachio-images.s3-website-us-east-1.amazonaws.com/89a5b70107e359ce80ec1f231b44a512.png

    http://postachio-images.s3-website-us-east-1.amazonaws.com/ba1c84e08b467f81ede268dd452540c8.png




    Here is a picture of the content parameter that is being passed into the open_dialog function. Notice how report fields are being passed in. This will allow each link to be unique and have it’s own set of values for the provided parameters.

    http://postachio-images.s3-website-us-east-1.amazonaws.com/a87302ff833ce89ffef65a8360f867bf.png






    Once this report has been uploaded into JasperReports Server it will look like the below image. By clicking on the links different dialog boxes will open. You can look into the code I’m providing to see how this works and how you can open multiple dialog boxes as well as have multiple links update/change the content in the same dialog box.

    http://postachio-images.s3-website-us-east-1.amazonaws.com/2076ed449a1b00fb3aeb61768e9abd2e.png



    Besides just uploading the report into JasperReports Server you will need to add my javascript code into your application. This code is contained in a file called jr.open_dialog.js. Both the jr and .js are removed during the process of calling the function so the part in the middle is the actual name of your function hence the reason that you saw open_dialog as my function name in the link type of JasperStudio. You place this file inside your optimized-scripts folder as you can see in the picture below. I realize that this script is not optimized but by placing it here you can run JasperReports Server in non-optimized mode and still have the function available.



    http://postachio-images.s3-website-us-east-1.amazonaws.com/e5f94a8d1cfa0718eeee5981e4cb404b.png



    To test out this example and see how the code works please download the example from the link below.




    I hope you have fun with this feature and create some really cool reports with JasperSoft!!!



    BlogId - 0f15151c-4b21-4b87-9d1a-61f4fe11e74f



    User Feedback

    Recommended Comments

    There are no comments to display.



    Guest
    This is now closed for further comments

×
×
  • Create New...