JSFiddle - React, Tailwind, and code Playground

by Pavel Savushchyk

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type='text/javascript' src="http://infra-platforms-phase2-4592-psavushc.pfa.jaspersoft.com:8080/jasperserver-pro/client/visualize.js"></script>
<!--Provide container to render your visualization-->
<div>
    <h4>Bookmarks</h4>
    <div id="bookmarksContainer"></div>
</div>
<div id="container"></div>

CSS

#bookmarksContainer {
    min-height: 10px;
    max-height: 150px;
    border: 1px dotted #E0DBDB;
    overflow: scroll;
}
.jr_bookmark {
    cursor: pointer;
}

JavaScript

visualize({
    auth: {
        name: "jasperadmin",
        password: "jasperadmin",
        organization: "Organization_1"
    }
}, function (v) {

    //render report from provided resource
    var report = v.report({
        // resource: "/public/Samples/Reports/AllAccounts",
        resource: "/reports/interactive/TableReport",
        error: handleError,
        container: "#container",
        events: {
			bookmarksReady: handleBookmarks
		}
    });
     
    //show error
    function handleError(err){
        alert(err.message);
    }
    
    $("#bookmarksContainer").on("click", ".jr_bookmark", function(evt) {
        report.pages({
            anchor: $(this).data("anchor")
        }).run();
    });
    
    // handle bookmarks
    function handleBookmarks(bookmarks, container) {
        var li, ul = $("<ul/>");
        !container && $("#bookmarksContainer").empty();   
        container = container || $("#bookmarksContainer");
        
        $.each(bookmarks, function(i, bookmark) {
        	li = $("<li><span class='jr_bookmark' title='Anchor: " + bookmark.anchor + ", page: " + bookmark.page + "' data-anchor='" + bookmark.anchor + "' data-page='" + bookmark.page + "'>" + bookmark.anchor + "</span></li>");
            bookmark.bookmarks && handleBookmarks(bookmark.bookmarks, li);
            ul.append(li);
        });
        
        container.append(ul);
    }
});