Apply dashboard paramaters

Pass various paramaters into a dashboard.

HTML

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

<br/>
<button disabled>Apply params</button>
<br/><br/>

<div id="dashboard">
  <div><p>Loading...</p></div>
</div>

CSS

#container {
    width: 800px;
    height: 600px;
}

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

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

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

JavaScript

function handleError(e) {
    alert(e);
}

visualize({
    auth: {
        name: "joeuser",
        password: "joeuser",
        organization: "organization_1"
    }
}, function (v) {
    var initialParams = {};
    
    var dashboard = v.dashboard({
        resource: "/public/Samples/Dashboards/2._Performance_Summary_Dashboard",
        container: "#dashboard",
        error: handleError,
        success: function() {
            $("button").prop("disabled", false);
            buildParamsInput();
        }
    });
    
    function buildParamsInput() {
        var params = dashboard.data().parameters;
        
        for (var i = params.length-1; i >= 0; i--) {
            var $el = $("<div>" + params[i].id + ": <input type='text' data-paramId='" + params[i].id + "'/></div>");
            
            $("body").prepend($el);
            
            $el.find("input").val(initialParams[params[i].id]);
        }
    }
    
    $("button").on("click", function() {
        var params = {};
        
        $("[data-paramId]").each(function() {
            params[$(this).attr("data-paramId")] = $(this).val().indexOf("[") > -1 ? JSON.parse($(this).val()) : [$(this).val()];    
        });
        
        $("button").prop("disabled", true);
        
        dashboard.params(params).run()
            .fail(handleError)
            .always(function() { $("button").prop("disabled", false); });
    });
});