API Usage - Report Hyperlinks

Many reports include hyperlinks (URLs) that link to websites or other reports. The report function gives you access to the links generated in the report, so that you can customize both the appearance and the container where they are displayed.

This chapter contains the following sections:

• Customizing Links
• Drill-Down in Separate Containers
• Accessing Data In Links

Customizing Links

You can customize the appearance of link elements in a generated report in two ways:

• The linkOptionsexposes the beforeRender event to which you can add a listener that has access to the links in the document as element pairs.
• The normal click event lets your add a listener that has access to a link when it is clicked. 
visualize({
    auth: {
        name: "jasperadmin",
        password: "jasperadmin",
        organization: "organization_1"
    }
},function (v) {
    v("#container1").report({
        resource: "/AdditionalResourcesForTesting/Drill_Reports_with_Controls/main_report",
        linkOptions: {
            beforeRender: function (linkToElemPairs) {
                linkToElemPairs.forEach(function (pair) {
                    var el = pair.element;
                    el.style.backgroundColor = "red";
                });
            },
            events: {
                "click": function(ev, link){
                    if (confirm("Change color of link id " + link.id + " to green?")){
                        ev.currentTarget.style.backgroundColor = "green";
                        ev.target.style.color = "#FF0";
 
                    }
                }
            }    
        },
        error: function (err) {
            alert(err.message);
        }
    });
});

Drill-Down in Separate Containers

By using the method of listing for clicks on hyperlinks, you can write a visualize.js script that sets the destination of drill-down report links to another container. This way, you can create display layouts or overlays for viewing drill-down links embedded in your reports.

visualize({
    auth: {
        name: "jasperadmin",
        password: "jasperadmin",
        organization: "organization_1"
    }
}, function (v) {
 
    v("#main").report({
        resource: "/MyReports/Drill_Reports_with_Controls/main_report",
        linkOptions: {
            beforeRender: function (linkToElemPairs) {
                linkToElemPairs.forEach(showCursor);
            },
            events: {
                "click": function(ev, link){
                   if (link.type == "ReportExecution"){
                        v("#drill-down").report({
                            resource: link.parameters._report,
                            params: {
                                city: [link.parameters.city],
                                country: link.parameters.country,
                                state: link.parameters.state
                            }, 
                        });     
                    }
                     console.log(link);
                }
            }    
        },
        error: function (err) {
            alert(err.message);
        }
    });
 
    function showCursor(pair){
           var el = pair.element;
               el.style.cursor = "pointer";
    }
 
});

Associated HTML:

<script src="http://underscorejs.org/underscore.js"></script>
<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<!-- Provide the URL to visualize.js -->
<script src="http://bi.example.com:8080/jasperserver-pro/client/visualize.js"></script>
<!-- Provide a container for the main report and one for the drill-down -->
<div>
    <div  id="main"></div>
    <div  id="drill-down"></div>
</div>

Associated CSS:

#main{
   float: left; 
}
 
#drill-down{
    float: left; 
}

Accessing Data In Links

In this example, we access the hyperlinks through the data.links structure after the report has successfully rendered. From this structure, we can read the tooltips that were set in the JRXML of the report. The script uses the information in the tooltips of all links in the report to create a drop-down selector of city name options.

By using link tooltips, your JRXML can create reports that pass runtime information to the display logic in your JavaScripts.

visualize({
    auth: {
        name: "jasperadmin",
        password: "jasperadmin",
        organization: "organization_1"
    }
}, function (v) {
 
    var $select = $("#selectCity"),
        report = v.report({
            resource: "/MyReports/Drill_Reports_with_Controls/main_report",  
            container: "#main",
            success: refreshSelect,
            error: showError
    });
 
    function refreshSelect(data){
        console.log(data);
        var options = data.links.reduce(function(memo, link){
                console.log(link);
                return memo + "<option>"+link.tooltip+"</option>";
            },"");
        $select.html(options);
    }
 
    $("#previousPage").click(function() {
        var currentPage = report.pages() || 1;
        goToPage(--currentPage);     
    });
 
    $("#nextPage").click(function() {
        var currentPage = report.pages() || 1;
        goToPage(++currentPage);
    });
 
    function goToPage(numder){ 
        report
            .pages(numder)
            .run()
                .done(refreshSelect)
                .fail(showError);
    }   
 
    function showError(err){
        alert(err.message);
    }
 
});

Associated HTML:

<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<!-- Provide the URL to visualize.js -->
<script src="http://bi.example.com:8080/jasperserver-pro/client/visualize.js"></script>
<select id="selectCity"></select>
<button id="previousPage">Previous Page</button>
<button id="nextPage">Next Page</button>
<!-- Provide a container for the main report -->
<div>
    <div ></div>
    <div  id="main"></div>  
</div>

Associated CSS:

#main{
   float: left; 
}
Version: 
v6.0.0
v6.0.1
Feedback
randomness