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.
-
Add a component 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 uses 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, 'http://demos.componentone.com/ASPNET/c1webapi/4.0.20171.91/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.
<!DOCTYPE html>
<html>
<head>
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- Configure SystemJS -->
<script src="systemjs.config.js"></script>
<!-- Load the root application module -->
<script>
System.import('./src/app');
</script>
</head>
<body>
<!-- Add root application component -->
<app-cmp>
<wj-report-viewer [serviceUrl]="serviceUrl" [filePath]="filePath" [reportName]="reportName"> </wj-report-viewer>
</app-cmp>
</body>
</html>
import * as wjcViewer from 'wijmo/wijmo.viewer';
// Angular
import { Component, EventEmitter, Input, Inject, enableProdMode} from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { BrowserModule } from '@angular/platform-browser';
import { WjGridModule } from 'wijmo/wijmo.angular2.grid';
import { WjInputModule } from 'wijmo/wijmo.angular2.input';
import { WjViewerModule } from 'wijmo/wijmo.angular2.viewer';
'use strict';
// The Explorer application root component.
@Component({
selector: 'app-cmp',
templateUrl: 'src/app.html'
})
export class AppCmp {
serviceUrl = 'http://demos.componentone.com/ASPNET/c1webapi/4.0.20171.91/api/report';
filePath = 'ReportsRoot/Formatting/AlternateBackground.flxr';
reportName = 'AlternateBackground';
constructor() {
}
}
@NgModule({
imports: [WjInputModule, WjGridModule, WjViewerModule, BrowserModule],
declarations: [AppCmp],
bootstrap: [AppCmp]
})
export class AppModule {
}
enableProdMode();
// Bootstrap application with hash style navigation and global services.
platformBrowserDynamic().bootstrapModule(AppModule);
SSRS Reports
The ReportViewer control can also show SSRS report.
The C1 Web API Report Services uses 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, 'http://demos.componentone.com/ASPNET/c1webapi/4.0.20171.91/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 'http://demos.componentone.com/ASPNET/c1webapi/4.0.20171.91/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.
<wj-report-viewer #ssrsReportViewer [serviceUrl]="serviceUrl" [filePath]="ssrsFilePath"></wj-report-viewer>
export class AppCmp {
serviceUrl = 'http://demos.componentone.com/ASPNET/c1webapi/4.0.20171.91/api/report';
ssrsFilePath = 'c1ssrs/AdventureWorks/Company Sales';
constructor() {
}
}
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.
-
selectMouseMode: Indicates whether clicking and dragging with the mouse in the view panel selects text.
-
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.
<wj-report-viewer #reportViewer [serviceUrl]="serviceUrl" [filePath]="filePath" [reportName]="reportName"
[fullScreen]="fullScreen" [selectMouseMode]="selectMouseMode" [zoomFactor]="zoomFactor">
</wj-report-viewer>
<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" [(ngModel)]="continuousViewMode" /> Continuous View Mode?
</label>
</div>
</div>
<div class="col-md-3">
<div class="checkbox">
<label>
<input id="basicSelectMouseMode" type="checkbox" [(ngModel)]="selectMouseMode" /> Select Mouse Mode?
</label>
</div>
</div>
<div class="col-md-2">
<div class="checkbox">
<label>
<input id="basicFullScreen" type="checkbox" [(ngModel)]="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)]="zoomFactor"
[min]="0.05"
[max]="10"
[step]=".1"
[format]="'n2'">
</wj-input-number>
</div>
</div>
</div>
</div>
</div>
export class AppCmp {
serviceUrl = 'http://demos.componentone.com/ASPNET/c1webapi/4.0.20171.91/api/report';
filePath = 'ReportsRoot/Formatting/AlternateBackground.flxr';
reportName = 'AlternateBackground';
fullScreen = false;
selectMouseMode = true;
zoomFactor = 1;
@ViewChild('reportViewer') reportViewer: wjcViewer.ReportViewer;
private _continuousViewMode = false;
constructor() {
}
get continuousViewMode(): boolean {
return this._continuousViewMode;
}
set continuousViewMode(value: boolean) {
if (this._continuousViewMode != value) {
this._continuousViewMode = value;
this.reportViewer.viewMode = value ? wjcViewer.ViewMode.Continuous : wjcViewer.ViewMode.Single;
}
}
}
Report Names
ReportViewer rerenders the report if
filePath and
reportName properties are changed.
<wj-report-viewer [serviceUrl]="serviceUrl" [serviceUrl]="serviceUrl" [filePath]="chgFilePath" [reportName]="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 #reportCmb
[itemsSource]="reports"
[isEditable]="false"
[displayMemberPath]="'name'"
[selectedValuePath]="'path'"
(selectedIndexChanged)="changeReportPath(reportCmb.selectedValue)">
</wj-combo-box>
</div>
</div>
</div>
</div>
export class AppCmp {
serviceUrl = 'http://demos.componentone.com/ASPNET/c1webapi/4.0.20171.91/api/report';
chgReportName = '';
chgFilePath = '';
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' }
];
constructor(){
}
changeReportPath(path: string){
var index = path.lastIndexOf('/');
var filePath = path.substr(0, index);
var reportName = path.substr(index + 1);
this.chgFilePath = filePath;
this.chgReportName = reportName;
}
}
