Render input control values

Dynamically render the input control values from the report hosted on the JasperReport Server.

by Kishoreajey

HTML

<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<script src="https://underscorejs.org/underscore-min.js"></script>
<script src="http://jaspersoft.healthcareit.net/jasperserver-pro/client/visualize.js"></script>

<select id="productFamilySelector"></select>
<br>
<div id="container"></div>

JavaScript

// Dynamically load input control values from the JasperReport Server for a selected report

reportUri = "/public/Samples/Reports/IHP_BI/Sample_Report_1";

visualize({
    auth: {
      name: "jasperadmin",
      password: "jasperadmin"
    }

}, function (v) {
    var inputControls = v.inputControls({
        resource: reportUri,
        success: renderInputControls
    });

    var report = v.report({
        resource: reportUri,
        container: "#container"
    });

    $("#productFamilySelector").on("change", function () {
        report.params({
            "vendor_group_nbr": [$(this).val()]
        }).run();
    });
});

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