Visualize.js: Bind Input Control to Report

Bind embedded JRS input control to embedded report on the page.

by Stas_P

HTML

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

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

CSS

.hiddenControl {
  display: none;
}

#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;
  
  a

JavaScript

/* function  hideInputControl() {
  document.getElementById("loader").style.display = "none";
  var divs = document.getElementsByTagName('div');
  for (var i=0; i<divs.length; i++) {
    if (divs[i].innerHTML.indexOf("Product Category") > -1 &&
        divs[i].className.indexOf("jr-mInputControlSingleSelect") > -1) {
      divs[i].addClass('hiddenControl');
    }
  }
} */

visualize({
    auth: {
        name: "joeuser",
        password: "joeuser"
    }
}, function (v) {

    var resourceUri = "/public/Samples/Reports/Cascading_Report_2_Updated";

    var inputControls = v.inputControls({
        resource: resourceUri,
        container: "#ic",
        events: {
          change: function(params, error){
            if (!error){
              report.params(params).run();  
            } 
          }
        }
    });

    var report = v.report({
        resource: resourceUri, 
        container: "#report",
        events: {
            reportCompleted: function(status) {
              var divs = document.getElementsByTagName('div');
              for (var i=0; i<divs.length; i++) {
                if (divs[i].innerHTML.indexOf("Product Family") > -1 &&
                    divs[i].className.indexOf("jr-mInputControlSingleSelect") > -1) {
                  divs[i].addClass('hiddenControl');
                }
              }
            }
        }
    });
});