Getting Started
Steps for getting started with the ReportViewer control in AngularJS applications:
- Set up the C1 Web API Report Services. Please refer to How to Set Up C1 Web API Report Services.
- Add references to AngularJS, Wijmo, and Wijmo's AngularJS directives.
-
Include the Wijmo directives in the app module:
var app = angular.module('app', ['wj']);
- Add a controller to provide data and logic.
- Add a ReportViewer to the page and set its serviceUrl, filePath, and reportName properties.
The C1 Web API Report Services use C1FlexReport to render and export report.
Please refer to How to Set Up C1 Web API Report Services for details.
To show the content of FlexReport from C1 Web API Report Services, set the following basic properties:
-
serviceUrl: The url of C1 Web API Report Services.
For example, 'https://demos.componentone.com/ASPNET/c1webapi/4.0.20172.105/api/report'.
-
filePath: The full path to the FlexReport definition file.
For example, 'ReportsRoot/Formatting/AlternateBackground.flxr'.
The 'ReportsRoot' is the key of the report provider which is registered at server for locating specified report.
The 'Formatting/AlternateBackground.flxr' is the relative path of the FlexReport definition file which can be located by the report provider.
-
reportName: The report name defined in the FlexReport definition file.
For example, 'AlternateBackground', for the report named 'AlternateBackground' in the AlternateBackground.flxr file.
HTML
<head>
<title>ReportViewer Introduction</title>
<!-- ensure IE uses the latest version of IE (yes, yes...) -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Angular/Bootstrap -->
<script src="bin/Devel/external/angular.js"></script>
<link rel="stylesheet" type="text/css" href="bin/devel/external/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" />
<!-- Wijmo -->
<script wj-src="wijmo" src="bin/Devel/loaders/wijmo.load.module.js"></script>
<script wj-src="wijmo.input" src="bin/Devel/loaders/wijmo.load.module.js"></script>
<script wj-src="wijmo.grid" src="bin/Devel/loaders/wijmo.load.module.js"></script>
<script wj-src="wijmo.viewer" src="bin/Devel/loaders/wijmo.load.module.js"></script>
<link href="bin/Devel/sources/styles/wijmo.css" rel="stylesheet" />
<!-- Wijmo-Angular interop -->
<script wj-src="wijmo.angular" src="bin/Devel/loaders/wijmo.load.module.js"></script>
<!-- app styles/scripts -->
<link href="styles/app.css" rel="stylesheet" />
<script src="scripts/app.js"></script>
</head>
<body ng-app="app" ng-controller="appCtrl">
<wj-report-viewer service-url="{{viewerProps.serviceUrl}}" file-path="{{viewerProps.filePath}}" report-name="{{viewerProps.reportName}}"></wj-report-viewer>
</body>
JS
'use strict';
// get reference to app module
var app = angular.module('app');
// add controller to app module
app.controller('appCtrl', function appCtrl($scope) {
$scope.viewerProps = {
serviceUrl: 'https://demos.componentone.com/ASPNET/c1webapi/4.0.20172.105/api/report',
filePath: 'ReportsRoot/Formatting/AlternateBackground.flxr',
reportName: 'AlternateBackground'
};
})
SSRS Reports
The ReportViewer control can also show SSRS report.
The C1 Web API Report Services use C1SSRSDocumentSource to connect with SSRS server and render the SSRS report.
It first fetches data from SSRS server, and then converts to the expected formats (normally HTML5 SVG).
Please see How to Set Up C1 Web API Report Services for details.
To show the content of SSRS report from C1 Web API Report Services, set the following basic properties:
-
serviceUrl: The url of C1 Web API Report Services.
For example, 'https://demos.componentone.com/ASPNET/c1webapi/4.0.20172.105/api/report'.
-
filePath: The full path to the SSRS report on the server.
For example, 'c1ssrs/AdventureWorks/Company Sales'.
The 'c1ssrs' is the key of the report provider which is registered at server for specified report (for
'https://demos.componentone.com/ASPNET/c1webapi/4.0.20172.105/api/report',
the 'c1ssrs' is the key of the report provider which links to the SSRS server 'http://ssrs.componentone.com:8000/ReportServer').
The 'AdventureWorks/Company Sales' is the full path to the report which can be located in the SSRS server.
HTML
<wj-report-viewer service-url="{{viewerProps.serviceUrl}}" file-path="{{viewerProps.ssrsFilePath}}"></wj-report-viewer>
JS
app.controller('appCtrl', function appCtrl($scope) {
$scope.viewerProps = {
serviceUrl: 'https://demos.componentone.com/ASPNET/c1webapi/4.0.20172.105/api/report',
ssrsFilePath : 'c1ssrs/AdventureWorks/Company Sales'
};
})
Basic Features
The ReportViewer control has the following four basic properties, which allow you to customize its appearance and behavior:
-
fullScreen: Indicates whether viewer is under full screen mode.
-
mouseMode: Indicates the mouse behavior.
-
viewMode: Indicates how to show the document pages.
-
zoomFactor: Indicates the current zoom factor to show the document pages.
The example below allows you to see what happens when you change these properties.
HTML
<div class="row">
<wj-report-viewer control="reportViewer" service-url="{{viewerProps.serviceUrl}}" file-path="{{viewerProps.filePath}}" report-name="{{viewerProps.reportName}}"
full-screen="viewerProps.fullScreen" mouse-mode="viewerProps.mouseMode" zoom-factor="viewerProps.zoomFactor">
</wj-report-viewer>
</div>
<br />
<div class="row">
<div class="form-horizontal">
<div class="form-group">
<div class="col-md-3">
<div class="checkbox">
<label>
<input id="basicContinuousViewMode" type="checkbox" ng-model="viewerProps.continuousViewMode"/> Continuous View Mode?
</label>
</div>
</div>
<div class="col-md-3">
<wj-menu value="viewerProps.mouseMode" header="Mouse Mode">
<wj-menu-item value="0">SelectTool</wj-menu-item>
<wj-menu-item value="1">MoveTool</wj-menu-item>
<wj-menu-item value="2">RubberbandTool</wj-menu-item>
<wj-menu-item value="3">MagnifierTool</wj-menu-item>
</wj-menu>
</div>
<div class="col-md-2">
<div class="checkbox">
<label>
<input id="basicFullScreen" type="checkbox" ng-model="viewerProps.fullScreen"/> Full Screen?
</label>
</div>
</div>
<div class="col-mod-4">
<label class="col-md-2 control-label">Zoom Factor</label>
<div class="col-md-2">
<wj-input-number value="viewerProps.zoomFactor"
min="0.05"
max="10"
step=".1"
format="'n2'">
</wj-input-number>
</div>
</div>
</div>
</div>
</div>
JS
app.controller('appCtrl', function appCtrl($scope) {
$scope.viewerProps = {
serviceUrl: 'https://demos.componentone.com/ASPNET/c1webapi/4.0.20172.105/api/report',
filePath: 'ReportsRoot/Formatting/AlternateBackground.flxr',
reportName: 'AlternateBackground',
fullScreen : false,
mouseMode: 'SelectTool',
zoomFactor: 1,
continuousViewMode: false
};
$scope.reportViewer = null;
$scope.$watch('viewerProps.continuousViewMode', function () {
var continuousViewMode = $scope.viewerProps.continuousViewMode;
if ($scope.reportViewer) {
$scope.reportViewer.viewMode = continuousViewMode ? wijmo.viewer.ViewMode.Continuous : wijmo.viewer.ViewMode.Single;
}
});
});
Report Names
ReportViewer rerenders the report if
filePath and
reportName properties are changed.
HTML
<div class="row">
<div class="col-md-12">
<h4>Result (live):</h4>
<wj-report-viewer control="nameReportViewer" service-url="{{viewerProps.serviceUrl}}" file-path="{{viewerProps.chgFilePath}}" report-name="{{viewerProps.chgReportName}}">
</wj-report-viewer>
<br />
<div class="form-horizontal">
<div class="form-group">
<label class="col-md-3 control-label">Report Path</label>
<div class="col-md-9">
<wj-combo-box control="reportCmb"
items-source="viewerProps.reports"
is-editable="false"
display-member-path="name"
selected-value-path="path"
selected-index-changed="changeReportPath(reportCmb.selectedValue)">
</wj-combo-box>
</div>
</div>
</div>
</div>
</div>
JS
app.controller('appCtrl', function appCtrl($scope) {
$scope.viewerProps = {
serviceUrl: 'https://demos.componentone.com/ASPNET/c1webapi/4.0.20172.105/api/report',
chgFilePath: '',
chgReportName: '',
reports : [
{ name: 'Alternating Background', path: 'ReportsRoot/Formatting/AlternateBackground.flxr/AlternateBackground' },
{ name: 'All Charts', path: 'ReportsRoot/Controls/AllCharts.flxr/AllCharts' },
{ name: 'Check Box', path: 'ReportsRoot/Controls/CheckBox.flxr/CheckBox' },
{ name: 'Shapes', path: 'ReportsRoot/Controls/Shapes.flxr/Shapes' }
]
};
$scope.nameReportViewer = null;
$scope.changeReportPath = function (path) {
var index = path.lastIndexOf('/');
var filePath = path.substr(0, index);
var reportName = path.substr(index + 1);
if ($scope.nameReportViewer) {
$scope.viewerProps.chgFilePath = filePath;
$scope.viewerProps.chgReportName = reportName;
}
}
});
