Visualize.js: Bind Cascade with Report

Bind a JRS cascade input control with a report.

HTML

<script src="https://mobiledemo.jaspersoft.com/jasperserver-pro/client/visualize.js"></script>

<div id="container">
    <div id="ic">
      <div><p>Loading...</p></div>
</div><div id="report"></div>
</div>

CSS

#container{
    width: 1200px
}

#ic {
    width:300px;
    float:left;
    padding-right: 15px;
}

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

/* You can replace the following with your own custom loading indicator */
@import "compass/css3";

@keyframes fadeIn { 
  from { opacity: 0; } 
}

p {
  position: relative;
  top: 50px;
  
  font: italic bold 1.2em/1 Bodoni, serif;
  color: #555;
  text-align: center;
  
  animation: fadeIn 1s infinite alternate;
}

JavaScript

visualize({
    auth: {
        name: "joeuser",
        password: "joeuser",
        organization: "organization_1"
    }
}, 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();
            }
        }
    });
});