Embedding a jasper report in an application using jasper visualize.js and Angular JS
Make data easy with Helical Insight.
Helical Insight is the world’s best open source business intelligence tool.
Prerequisites:
Jasper Server
Angular Js CDN
Steps:
1. Create a HTML page and include jasper visualize url, angular js url
Angular Js url
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
Jasper visualize url
<script type="text/javascript" src="http://<host>:<portNumber>/jasperserver-pro/client/visualize.js"></script>
2. Create angular app in html body, add containers and directives
<body ng-app="app"> <div ng-controller="ReportController"> <visualize id='report' resource='report.resource'></visualize> </div> </body>
ng-app=”app”:
ng-app directive initializes an AngularJS application.
ng-controller=”ReportController”:
The ng-controller directive defines the application controller. A controller is a JavaScript Object, created by a standard JavaScript object constructor.
visualize:
In addition to all the built-in AngularJS directives, you can create your own directives. New directives are created by using the .directive function. To invoke the new directive, make an HTML element with the same tag name as the new directive.
*Resource* will receive the jasper report path from the controller module
3. Create a javascript file and include the same file in html
<script src="filename.js"></script>
4. In filename.js file add angular js app module and directive module
i. create a module is by using the AngularJS function angular.module
angular.module('app', [])
The “app” parameter refers to an HTML element in which the application will run.
Make data easy with Helical Insight.
Helical Insight is the world’s best open source business intelligence tool.
ii. Add a controller to your application, and refer to the controller with the ng-controller directive
.controller('ReportController', ['$scope', function($scope) {
$scope.report = {
resource: '/public/Samples/Reports/ProfitDetailReport'
};
}])
Inside controller add a scope and provide the specific jasper report path
iii. In html we have created our own directive i.e visualize. Configure our Jasper Server connection and render the jasper report inside the directive
Inside this directive we will authenticate jasper server using credentials and it will load jasper report which had specified in controller and render to the id which had mentioned in html
.directive('visualize', function() {
return {
restrict: 'E',
transclude: true,
scope: {
resource: '='
},
template: '<div ng-transclude></div>',
link: function (scope, element, attrs) {
if (angular.isDefined(scope.resource)) {
/* Configure your jasperserver connection */
visualize(
{
auth: {
name: "jasperuser",
password: "jasperuser"
}
},
//render report
function (v) {
var report = v.report({
resource: scope.resource, //report path
container: "#"+element[0].id, //id assigned in html
error: function(){ //TODO handle error creating report
}
});
report.refresh()
.done(function(){
console.log("report loaded");
})
.fail(function(){
console.log("report error")
})
},
function (err) {
alert("Auth error! Server said: " + err.message);
});
}
}
}
});
Make data easy with Helical Insight.
Helical Insight is the world’s best open source business intelligence tool.
Please add the code mentioned in steps i,ii and iii in js file and run the html file. Jasper Report will render
Best Open Source Business Intelligence Software Helical Insight is Here
A Business Intelligence Framework
Thanks,
Ramu Vudugula
BI Developer