Wijmo 5

ReportViewer 101

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

Getting Started

Steps for getting started with the ReportViewer control in JavaScript 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 Wijmo.
  3. Add markup to serve as the Wijmo control's host.
  4. Initialize the Wijmo control(s) via JavaScript.
  5. (Optional) Add some CSS to customize the report viewer control's appearance.

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, ''.
  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):


<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> <link rel="stylesheet" type="text/css" href="css/wijmo.css" /> <link href="css/app.css" rel="stylesheet" type="text/css" /> <script src="scripts/wijmo.js" type="text/javascript"></script> <script src="scripts/wijmo.input.js" type="text/javascript"></script> <script src="scripts/wijmo.grid.js" type="text/javascript"></script> <script src="scripts/wijmo.viewer.js" type="text/javascript"></script> </head> <body> <!-- ReportViewer --> <div id="introReportViewer"></div> </body> </html>
// create controls var viewer = new wijmo.viewer.ReportViewer('#introReportViewer'); // initialize ReportViewer's properties viewer.serviceUrl = ''; viewer.filePath = 'ReportsRoot/Formatting/AlternateBackground.flxr'; viewer.reportName = 'AlternateBackground';
.wj-viewer{ width: 100%; height: 600px; }

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, ''.
  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 '', 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):


<div id="ssrsReportViewer"></div>
// create controls var viewer = new wijmo.viewer.ReportViewer('#ssrsReportViewer'); // initialize ReportViewer's properties viewer.serviceUrl = ''; viewer.filePath = 'c1ssrs/AdventureWorks/Company Sales';
.wj-viewer{ width: 100%; height: 600px; }

Basic Features

The ReportViewer control has the following four basic properties, which allow you to customize its appearance and behavior:

The example below allows you to see what happens when you change these properties.

Result (live):



<div class="row"> <h4>Result (live):</h4> <div id="basicReportViewer"></div> </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" /> Continuous View Mode? </label> </div> </div> <div class="col-md-3"> <div class="checkbox"> <label> <input id="basicSelectMouseMode" type="checkbox" /> Select Mouse Mode? </label> </div> </div> <div class="col-md-2"> <div class="checkbox"> <label> <input id="basicFullScreen" type="checkbox" /> 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"> <input id="basicZoomFactor" type="text" /> </div> </div> </div> </div> </div>
// create controls var viewer = new wijmo.viewer.ReportViewer('#basicReportViewer'), fullScreen = document.getElementById('basicFullScreen'), selectMouseMode = document.getElementById('basicSelectMouseMode'), zoomFactor = new wijmo.input.InputNumber('#basicZoomFactor'), continuousViewMode = document.getElementById('basicContinuousViewMode'); // initialize ReportViewer's properties viewer.serviceUrl = ''; viewer.filePath = 'ReportsRoot/Formatting/AlternateBackground.flxr'; viewer.reportName = 'AlternateBackground'; // fullScreen fullScreen.checked = viewer.fullScreen; fullScreen.addEventListener('change', function () { viewer.fullScreen = this.checked; }); // selectMouseMode selectMouseMode.checked = viewer.selectMouseMode; selectMouseMode.addEventListener('change', function () { viewer.selectMouseMode = this.checked; }); // continousViewMode continuousViewMode.checked = viewer.viewMode == wijmo.viewer.ViewMode.Continuous; continuousViewMode.addEventListener('change', function () { viewer.viewMode = this.checked ? wijmo.viewer.ViewMode.Continuous : wijmo.viewer.ViewMode.Single; }); // zoomFactor - initialize InputNumber's properties zoomFactor.min = 0.05; zoomFactor.max = 10; zoomFactor.step = 0.1; zoomFactor.format = 'n2'; zoomFactor.value = viewer.zoomFactor; zoomFactor.valueChanged.addHandler(function (sender) { if (sender.value < sender.min || sender.value > sender.max) { return; } viewer.zoomFactor = sender.value; });
.wj-viewer{ width: 100%; height: 600px; }

Report Names

ReportViewer renders the report if filePath and reportName properties are changed.

Result (live):



<div id="namesReportViewer"></div> <br /> <div class="form-horizontal"> <div class="form-group"> <label class="col-md-3 control-label">Report Path</label> <div class="col-md-9"> <select id="namesReportPath"> <option value="ReportsRoot/Formatting/AlternateBackground.flxr/AlternateBackground">Alternating Background</option> <option value="ReportsRoot/Controls/AllCharts.flxr/AllCharts">All Charts</option> <option value="ReportsRoot/Controls/CheckBox.flxr/CheckBox">Check Box</option> <option value="ReportsRoot/Controls/Shapes.flxr/Shapes">Shapes</option> </select> </div> </div> </div>
// create controls var viewer = new wijmo.viewer.ReportViewer('#namesReportViewer'), namesReportPath = new wijmo.input.ComboBox('#namesReportPath'); // initialize ReportViewer's properties viewer.serviceUrl = ''; viewer.filePath = 'ReportsRoot/Formatting/AlternateBackground.flxr'; viewer.reportName = 'AlternateBackground'; // names report path namesReportPath.selectedIndex = 0; namesReportPath.selectedIndexChanged.addHandler(function (sender, args) { if (!sender.selectedValue) return; var reportPath = sender.selectedValue; var index = reportPath.lastIndexOf('/'); var filePath = reportPath.substr(0, index); var reportName = reportPath.substr(index + 1); viewer.filePath = filePath; viewer.reportName = reportName; });
.wj-viewer{ width: 100%; height: 600px; }