Embedding Input Controls in Visualize.js

In JasperReports Server 6.4 Embedding Input Controls in Visualize.js

In this blog, I am planning to look into the API for the embedded Input Controls, as those are one of the basic building blocks of the reports, and specified the container to embed them.

The following example shows the HTML and JavaScript to displays the input control:

<script src="http://localhost:8080/jasperserver-pro/client/visualize.js"></script>
<div id="inputControl"></div>
 
visualize({
    auth: { ...
    }}, function (v) {
    var inputControls = v.inputControls({
        resource: "/public/Samples/Reports/ProfitDetailReport",
        container: "#inputControl",
        error: function (err) {
            console.error(err);
        }
    });
 
 });

Also displays button to Apply the report after the changed the input controls:

<script src="http://localhost:8080/jasperserver-pro/client/visualize.js"></script>
<script type='text/javascript' src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<div id="inputControl"> </div>
<button id="apply">Apply</button>
<div id="reportContainer"></div>

The JavaScript displays report and the input controls accordingly, then it controls the button click to get the current values of the input controls and apply selected the values to the report

var inputControls="";
visualize({
    auth: { ...
    }}, function(v) {
    var resourceUri = "/public/Samples/Reports/08.UnitSalesDetailReport";
  
    var report = v.report({
        resource: resourceUri, 
        container: "#reportContainer"
    });
 
    inputControls= v.inputControls({
        resource: resourceUri,
        container: "#inputControl",
        error: function(err) {
            console.error(err);
        },
        success: function(data) {
            console.log(data)
        }
    });
 
    
    $("#apply").click(
        function(){
            console.log(inputControls.data().parameters)
            inputControls.run(null, function(e) {         
        });
        var params = inputControls.data().parameters;
        report.params(params).run()
    });});

In case if you have any queries please get us at support@helicaltech.com

Thanks,
Neha Koyalwar
Helical IT Solutions Pvt Ltd

Best Open Source Business Intelligence Software Helical Insight Here

A Business Intelligence Framework

Free
Download

Best Open Source Business Intelligence Software Helical Insight is Here

A Business Intelligence Framework

Free
Download