Dynamic parameter generation in visualize.js links

 The “Report Execution” link normally displays the target report in JasperReports Server’s interactive viewer UI.  If instead you want the target to be displayed in your UI, you can use visualize.js to capture the link event coming from the Studio report and redirect it to the appropriate report.

When implementing drill down reporting in visualize.js, you must map the parameters from the captured event link (link.parameters) to the targeted report’s parameters. These link parameters are defined when creating the hyperlink in Jaspersoft Studio. Typically the mapping of parameters is very specific between  the source-master and target-slave reports. But what if there are different links coming from the report? 

Rather than implementing complex logic in the link event handler, another approach is to draw both the target report url and the parameters from the link and generate the parameter mapping dynamically.

Some assumptions:

• The parameter names in the master parameter mapping (in the Hyperlink properties) match the input parameters of the slave report.
•  

This example uses the following “Sample” reports provided in JasperReports Server deployment.

• “13. Top Fives Report” – this report has links to two different reports:
  • “09. Customer Details Report” – linked to from the “Customers” list, passing the customerId.
  • “12. {Promotions Detail Report” – Linked from the “Promotions” list, passing the promotionId.

Within the embedded-in web page javascript, do the following:

1. Define a “createReport” function, passing in the report path and the report parameters.
   
2. Define a function to format the parameter list based on the passed parameter JSON. The “link.parameters” cannot be used directly, since the visualize.js parameter  requires values be included in an array, and Studio links map content differently depending on the type of parameter passed (string vs collection). That is why a “buildParms” function is required.
   
3. Populate the <div> with the initial report.
   
4. Use the “createReport” function in the link event handler to create the target report, based on the information from the link.

This example provides a simple implementation of a dynamic parameter generation in visualize.js.

Sample drilldown web page is attached below.

drilldownreport.html

drilldownreport.html_0.txt