JSFiddle - React, Tailwind, and code Playground

by Pavel Savushchyk

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type='text/javascript' src="http://infra-platforms-phase2-4592-psavushc.pfa.jaspersoft.com:8080/jasperserver-pro/client/visualize.js"></script>
<!--Provide container to render your visualization-->
<div>
    <h4>Report parts</h4>
    <div id="reportPartsContainer"></div>
</div>
<div id="container"></div>

JavaScript

visualize({
    auth: {
        name: "jasperadmin",
        password: "jasperadmin",
        organization: "Organization_1"
    }
}, function (v) {

    //render report from provided resource
    var report = v.report({
        resource: "/public/Samples/Reports/17._Report_Workbook",
        error: handleError,
        container: "#container",
        events: {
			reportCompleted: function(status) {
                if ("ready" === status) {
                	handleReportParts(report.data().reportParts);
                }
            }
		}
    });
     
    //show error
    function handleError(err){
        alert(err.message);
    }
    
    $("#reportPartsContainer").on("click", ".jr_part", function(evt) {
        report.pages($(this).data("page")).run();
    });
    
    // handle report parts
    function handleReportParts(parts) {
        var btn, i = 0, partsContainer = $("#reportPartsContainer");
        
        partsContainer.empty();
        for (i; i < parts.length; i++) {
        	btn = $("<button class='jr_part' data-page='" + parts[i].page + "'>" + parts[i].name + "</button>");
            partsContainer.append(btn);
        }
    }
});