Dashboard hyperlinks

Select values from a report within a dashboard to update a secondary report.

HTML

<script src="https://underscorejs.org/underscore.js"></script>

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

<h5>Select from "Top Fives" report dashlet to render an additional drilldown dashboard under the original.</h5>

<div>
    <div id="main">
        <div><p>Loading...</p></div>
</div><div id="drill-down"></div>
</div>

CSS

#main{
   float: left;
   height: 600px;
   width: 830px;
}

#drill-down{
    float: left;
    width: 500px;
}

/* 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

visualize({
    auth: {
        name: "joeuser",
        password: "joeuser",
        organization: "organization_1"
    }
}, function (v) {
    var $tooltip = $("<div></div>").css({
        "position": "absolute",
        "height": "25px",
        "background-color": "grey",
        "border": "1px solid black",
        "color": "white",
        "display": "none"
    });
    
    $("body").append($tooltip);
    
    v("#main").dashboard({
        resource: "/public/Samples/Dashboards/1._Supermart_Dashboard",
        linkOptions: {
            beforeRender: function (linkToElemPairs) {
                linkToElemPairs.forEach(showCursor);
            },
            events: {
                "mouseover": function(event, link) {
                    $tooltip.css({
                        top: "42px",
                        left: $(event.target).position().left
                    }).text(link.tooltip).show();
                },
                "mouseout": function(event, link) {
                    $tooltip.hide();
                },
                "click": function(ev, link){
                    if (link.type == "ReportExecution") {
                        var params = {};
                        
                        for (var key in link.parameters) {
                            if (key !== "_report") {
                                params[key] = Object.prototype.toString.call(link.parameters[key]) !== "[object Array]"
                                    ? [link.parameters[key]]
                                    : link.parameters[key];
                            }
                        }
                        
                        v("#drill-down").report({
                            resource: link.parameters._report,
                            params: params
                        });     
                    }
                }
            }    
        },
        error: function (err) {
            alert(err.message);
        }
    });
    
   ...