JSFiddle - React, Tailwind, and code Playground

by Daniel Petzold

HTML

<script src="http://localhost:8081/jasperserver-pro/client/visualize.js"></script>
<div id='container'>
    <div  id="ic"></div>
    <div  id="report" ></div>
</div>

CSS

#container{
    width: 1200px
}


#ic {
    width:300px;
    float:left;
}

#report {
  width:800px;
  float:left;
}

JavaScript

visualize({
    auth: {
        name: "superuser",
        password: "superuser"
    }
}, function (v) {
    
    var report = v.report({
        resource: "/public/Samples/Reports/16g.InteractiveSalesReport",
        container: "#report"
    });
    
    v.inputControls({
        container: "#ic",
        resource: "/public/Samples/Reports/16g.InteractiveSalesReport",
        error: function (err) {
            alert(err);
        },
        events: {
            change: function (params) {
                console.log(params);
                report
                    .params(params)
                    .run();
            }
        }
    });
    
});