Visualize: render report and input controls

Test plugins

by Yuriy Bablyukh

HTML

<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://localhost:8081/jasperserver-pro/client/visualize.js?_opt=true"></script>
<form id="controls"></form>
<button id="Apply">Apply</button>
<div id="container"></div>

JavaScript

var reportUri = "/public/Samples/Reports/ProfitDetailReport";
var select = $("#productFamilySelector"); 
visualize({
    auth: {
        name: "superuser",
        password: "superuser"
    }
}, function (v) {
    var inputControls = v.inputControls({
        container: "#"
        resource: reportUri,
        success: renderInputControls
    });
    
    var report = v.report({ resource: reportUri, container: "#container" });
    
    $("#Apply").on("click", function() {
    	console.log(select.val());
        report.params({ "ProductFamily": select.val() }).run();
    });
});

function renderInputControls(data) {
    var productFamilyInputControl = _.findWhere(data, {id: "ProductFamily"});
 
    _.each(productFamilyInputControl.state.options, function(option) {
        select.append("<option " + (option.selected ? "selected" : "") + " value='" + option.value + "'>" + option.label + "</option>");
    });
}