Sample with Local Input Controls

This sample fetches the input controls information from the report and renders local input controls for the same. It also captures the values selected locally and then sends that as parameters to the report to update.

by Kishoreajey

HTML

<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<!--Provide URL to visualize.js-->
<!----- JQuery is required for this code, has been included from external resources in jsfiddle--->
<script src="http://jaspersoft.healthcareit.net/jasperserver-pro/client/visualize.js"></script>

<div id="container"> Main report Appears here</div>
<div id="container2">Drilldown Appears here</div>

JavaScript

var reportUri = "/public/Samples/Reports/SalesByMonthReport"
visualize({
    auth: {
    name: "jasperadmin",
    password: "jasperadmin"
    }
}, function (v) {
   var report = v.report({ 
        resource: reportUri, 
        container: "#container", 
        params:{"startMonth": ['1'],"endMonth": ['12']},  //defaults
        linkOptions: {
       	   beforeRender: function (linkToElemPairs) {
                linkToElemPairs.forEach(showCursor);
            },
            events: {
                "click": function(ev, link){
                    console.log(link);
                  if(link.type == 'ReportExecution'){
                  		v("#container2").report({
                            resource: link.parameters._report,
                            params: {
                                monthNumber: [link.parameters.monthNumber]
                            }, 
                        });     
                  }
                  else if(link.type == 'Reference'){
                  	window.open(link.href);
                  }
                }
            }    
        },
        success:function () {
            alert('Report rendered successfully');
        },
        error: function (err) {
            alert(err.message);
        }  
    });
    
   function showCursor(pair){
           var elink = pair.element;
               elink.style.cursor = "pointer";
    }
});