# ReportViewer 101

This page shows how to get started with Wijmo's ReportViewer control for Angular.

## Getting Started

Steps for getting started with the ReportViewer control in AngularJS applications:

1. Set up the C1 Web API Report Services. Please refer to How to Set Up C1 Web API Report Services.
2. Add references to AngularJS, Wijmo, and Wijmo's AngularJS directives.
3. Add a component to provide data and logic.
4. 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:

1. serviceUrl: The url of C1 Web API Report Services. For example, 'http://demos.componentone.com/ASPNET/c1webapi/4.0.20172.105/api/report'.
2. 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.

3. reportName: The report name defined in the FlexReport definition file. For example, 'AlternateBackground', for the report named 'AlternateBackground' in the AlternateBackground.flxr file.

#### Result (live):

HTML
<!DOCTYPE html> <html> <head> <!-- Supporting libraries --> <!-- 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> <!-- Bootstrap --> <link rel="stylesheet" type="text/css" href="bin/Devel/external/bootstrap/css/bootstrap.css" /> <!-- Wijmo --> <link href="bin/Devel/sources/styles/wijmo.css" rel="stylesheet" /> <!-- Configure and load application --> <link href="src/styles/app.css" rel="stylesheet" /> <!-- Load the root application module --> <script> System.import('./src/app'); </script> </head> <body> <!-- Add root application component --> <app-cmp></app-cmp> </body> </html> <!-- Root application component's template (app.html) --> <wj-report-viewer [serviceUrl]="serviceUrl" [filePath]="filePath" [reportName]="reportName"> </wj-report-viewer>
TS
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.20172.105/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:

1. serviceUrl: The url of C1 Web API Report Services. For example, 'http://demos.componentone.com/ASPNET/c1webapi/4.0.20172.105/api/report'.
2. 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.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.

#### Result (live):

HTML
<wj-report-viewer #ssrsReportViewer [serviceUrl]="serviceUrl" [filePath]="ssrsFilePath"></wj-report-viewer>
TS
export class AppCmp { serviceUrl = 'http://demos.componentone.com/ASPNET/c1webapi/4.0.20172.105/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.
- 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.

#### Result (live):

Continuous View Mode?
SelectTool MoveTool RubberbandTool MagnifierTool
Full Screen?
Zoom Factor
HTML
<wj-report-viewer #reportViewer [serviceUrl]="serviceUrl" [filePath]="filePath" [reportName]="reportName" [fullScreen]="fullScreen" [mouseMode]="mouseMode" [(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"> <wj-menu [(value)]="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" [(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>
TS
export class AppCmp { serviceUrl = 'http://demos.componentone.com/ASPNET/c1webapi/4.0.20172.105/api/report'; filePath = 'ReportsRoot/Formatting/AlternateBackground.flxr'; reportName = 'AlternateBackground'; fullScreen = false; mouseMode = wjcViewer.MouseMode.SelectTool; 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.

#### Result (live):

Report Path
HTML
<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>
TS
export class AppCmp { serviceUrl = 'http://demos.componentone.com/ASPNET/c1webapi/4.0.20172.105/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; } }