Wijmo

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):


HTML
<div id="introReportViewer"></div>
JS
var introReportViewer = new wijmo.viewer.ReportViewer('#introReportViewer', { serviceUrl: serviceUrl, filePath: 'ReportsRoot/Formatting/AlternateBackground.flxr', reportName: 'AlternateBackground' });
CSS
.wj-viewer { width: 100%; display: block; }

SSRS Reports

The ReportViewer control can also show SSRS reports.

The C1 Web API Report Services uses C1SSRSDocumentSource to connect with an SSRS server and render SSRS reports. It first fetches data from the server, then converts the report to the desired format (normally HTML5 SVG). Please see How to Set Up C1 Web API Report Services for details.

To show the content of SSRS reports 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 the server for specified report (for '', 'c1ssrs' is the key of the report provider which links to the SSRS server 'http://ssrs.componentone.com:8000/ReportServer').
    'AdventureWorks/Company Sales' is the full path to the report on the server.

Result (live):


HTML
<div id="ssrsReportViewer"></div>
JS
var ssrsReportViewer = new wijmo.viewer.ReportViewer('#ssrsReportViewer', { serviceUrl: serviceUrl, filePath: 'c1ssrs/AdventureWorks/Company Sales' });

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):



HTML
<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"> <select id="basicMouseMode"> <option value="SelectTool" selected>SelectTool</option> <option value="MoveTool">MoveTool</option> <option value="RubberbandTool">RubberbandTool</option> <option value="MagnifierTool">MagnifierTool</option> </select> </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"/> </div> </div> </div> </div> </div>
JS
var basicReportViewer = new wijmo.viewer.ReportViewer('#basicReportViewer', { serviceUrl: serviceUrl, filePath: 'ReportsRoot/Formatting/AlternateBackground.flxr', reportName: 'AlternateBackground', zoomFactorChanged: function (s, e) { basicZoomFactor.value = s.zoomFactor; } }); // change viewer properties document.getElementById('basicFullScreen').addEventListener('click', function (e) { basicReportViewer.fullScreen = e.target.checked; }); var basicMouseMode = new wijmo.input.Menu('#basicMouseMode', { itemClicked: function (s, e) { basicReportViewer.mouseMode = s.selectedValue; updateMenuHeader(s, 'Mouse Mode'); } }); updateMenuHeader(basicMouseMode, 'Mouse Mode'); var basicZoomFactor = new wijmo.input.InputNumber('#basicZoomFactor', { min: 0.05, max: 10, step: 0.1, format: 'n2', value: basicReportViewer.zoomFactor, valueChanged: function (s, e) { if (s.value >= s.min && s.value <= s.max) { basicReportViewer.zoomFactor = s.value; } } }); document.getElementById('basicContinuousViewMode').addEventListener('click', function (e) { basicReportViewer.viewMode = e.target.checked ? 'Continuous' : 'Single'; });

Report Names

ReportViewer automatically updates the report when the value of the filePath or reportName properties change.

Result (live):



HTML
<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>
JS
var namesReportViewer = new wijmo.viewer.ReportViewer('#namesReportViewer', { serviceUrl: serviceUrl }); // select report to display var namesReportPath = new wijmo.input.ComboBox('#namesReportPath', { selectedIndexChanged: function (s, e) { if (s.selectedValue) { var reportPath = s.selectedValue, index = reportPath.lastIndexOf('/'); filePath = reportPath.substr(0, index); reportName = reportPath.substr(index + 1); namesReportViewer.filePath = filePath; namesReportViewer.reportName = reportName; } }, selectedIndex: 0 // select first report });