Apply dashboard paramaters

Pass various paramaters into a dashboard.

HTML

<!--Provide URL to visualize.js-->
<script src="https://infra-platforms-phase2-18418-anshinde.pfa.jaspersoft.com/jasperserver-pro/client/visualize.js"></script>

<!--Provide container to render your visualization-->
<div id="container">
  <div id="loader"><p>Loading...</p></div>
</div>

CSS

#container {
    width: 500px;
    height: 600px;
    font-weight: bold;
}

/* 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) {
    
    v.inputControls({
        resource: "/public/Samples/Reports/9g.CustomerDetailReport",
        success: function (controls) {
            controls.forEach(buildControl);
            //Remove custom loading indicator once data has successfully loaded
            document.getElementById("loader").style.display = "none";
        },
        error: function (err) {
            alert(err);
        }
    });
    
    function buildControl(control) {

        function buildOptions(options) {
            var template = "<option>{value}</option>";
            return options.reduce(function (memo, option) {
                return memo + template.replace("{value}", option.value);
            }, "")
        }

        var template = "<br>&nbsp;<label>{label}</label>&nbsp;<select>{options}</select><br>",
            content = template.replace("{label}", control.label)
                .replace("{options}", buildOptions(control.state.options));

        $("#container").append($(content));
    }
});