ActiveReports 8: HTML5 Viewer and AngularJS
With the launch of ActiveReports 8, a cool feature was added to the long list of features offered by it. This is the HTML5 Viewer which meets the demands of the developers who want to have a pure client side component that can be used in web applications to preview reports. The documentation provides the complete list of API available for the HTML5 viewer and can be checked here.
Download Sample
Being a client-side component, you can work with JavaScript or jQuery to make any modifications to the HTML5 viewer. However with the ever changing technology, AngularJS is gaining popularity and is becoming the preferred approach for client side implementations. The reason is simple, AngularJS is basically an MVVM framework and lets you extend HTML vocabulary for your application. So it is very much expected that developers working with the HTML5 viewer would also like to use it with AngualrJS. The purpose of writing this blog is to provide users a quick idea about using them together. Let us see what our final output will look like:
So to set up the HTML5 viewer using AngularJS, we will first need to add a separate script file where we will define the controller and create a Directive to be used for the HTML5 viewer DOM element. This is how we will set it up:
angular.module("reportViewerExample", [])
.controller("Controller", ["$scope", function ($scope) {
$scope.reportsButtons = null;
$scope.reportViewer = null;
$scope.reportOptions = [{ "Name": "FPL", "Location": "Reports/BillingInvoice.rdlx" }, { "Name": "Map Report", "Location": "Reports/OilProducingCountries.rdlx" }, { "Name": "XML Based", "Location": "Reports/Invoice.rpx" }, { "Name": "Code Based", "Location": "HTML5Viewer.Reports.rpt2DBar"}];
$scope.viewerModel = {
element: '#viewerContainer',
reportService: {
url: '/ActiveReports.ReportService.asmx'
},
uiType: 'desktop',
reportLoaded: null
};
$scope.setViewerButtons = function (obj) {
$scope.reportsButtons = obj;
$scope.viewerModel.reportLoaded = function () {
$scope.reportsButtons.prop('disabled', false);
}
};
$scope.LoadReport = function (rptLocation) {
$scope.reportsButtons.removeClass('active');
var reportOption = {
id: rptLocation
};
$scope.reportsButtons.prop('disabled', true);
$scope.reportViewer.option('report', reportOption);
}
} ])
.directive("myDirective", function () {
return {
template: '<div id="btnReport"><button type="button" ng-click=LoadReport(option.Location) ng-repeat="option in reportOptions">{{option.Name}}</button></div><div id="viewerContainer"></div>',
link: function (scope, element, attrs, ctrl) {
var reportsButtons = angular.element(document.querySelector('#btnReport button'));
scope.setViewerButtons(reportsButtons);
scope.reportViewer = GrapeCity.ActiveReports.Viewer(scope.viewerModel);
}
};
});
In this sample we have provided different buttons to load different types of reports and you can notice that all the layout has been set up on the template option of the custom directive. So we are almost done. All we need to do now is to add the reference to this Script file to the HTML page along with the other script references. This is how it will look:
<body ng-app="reportViewerExample">
<div ng-controller="Controller">
<img src="images/C1Logo.png" style="float: right; top: 0px; right: 0px; position: absolute" />
<div my-directive>
</div>
</div>
</body>
A sample application demonstrating this implementation can be downloaded from the link below. I hope this was helpful to anyone looking to work with the HTML5 viewer using AngularJS.
Download Sample
MESCIUS inc.