JSFiddle - React, Tailwind, and code Playground

by NesterOne

HTML

<script type='text/javascript' src="http://visualizejs-preview.eng.jaspersoft.com:8080/jasperserver-pro-branch/client/visualize.js"></script>
<div>
    <div  id="container"></div>
       <div  id="hint" >
        <span>Selection: </span>
        <strong id='output'></strong>
    </div>

</div>

CSS

#container {
    width:200px;
    float: left;
}

#hint {
    width:200px;
    float: right;
}

JavaScript

visualize({
    auth: {
        name: "superuser",
        password: "superuser"
    }
}, function (v) {
    v.inputControls({
        container: "#container",
        resource: "/public/Samples/Reports/16g.InteractiveSalesReport",
        success: function(){
            console.log("resource "+ this.resource() +" loaded");
        },
        error: function(err) {
            console.error(err + "in cascade from " + this.resource());
        },
        events: {
            change: function (params) {
                console.log("Changes in cascade from "+ this.resource() +" " + params);
            }
        }
    });
    
});