<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>ReportViewer Introduction | Wijmo</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="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" />

    <!-- Wijmo -->
    <script src="scripts/vendor/wijmo.min.js"></script>
    <script src="scripts/vendor/wijmo.input.min.js"></script>
    <script src="scripts/vendor/wijmo.grid.min.js"></script>
    <script src="scripts/vendor/wijmo.viewer.min.js"></script>
    <script src="scripts/vendor/wijmo.nav.min.js" type="text/javascript"></script>
    <link href="styles/vendor/wijmo.min.css" rel="stylesheet" />

    <!-- Wijmo-Angular interop -->
    <script src="scripts/vendor/wijmo.angular.min.js"></script>

    <!-- app styles/scripts -->
    <link href="styles/app.css" rel="stylesheet" />
    <script src="scripts/app.js"></script>
    <script src="scripts/controllers/appCtrl.js"></script>
    <script src="https://cdn.grapecity.com/wijmo/wijmo.sample.toolbar.js" type="text/javascript"></script>
</head>
<body ng-app="app" ng-controller="appCtrl">
    <div class="header">
        <div class="container">
            <img src="https://grapecitycontentcdn.azureedge.net/gcbrand/samples/wijmo/wijmo-logo.png" alt="Wijmo" />
            <h1>
                ReportViewer 101
            </h1>
            <p>
                This page shows how to get started with Wijmo's ReportViewer control.
            </p>
        </div>
    </div>
    <div class="container">

        <!-- Getting Started -->
        <div>
            <h2>Getting Started</h2>
            <p>
                Steps for getting started with the ReportViewer control in AngularJS applications:
            </p>
            <ol>
                <li>Set up the <a target="_blank" href="http://helpcentral.componentone.com/nethelp/C1WebAPI/ReportServices.html">C1 Web API Report Services</a>. Please refer to <a target="_blank" href="https://grapecity.sharepoint.com/teams/C1/C1Studio/Rhino/_layouts/15/WopiFrame.aspx?sourcedoc=%7BC7E2A01F-5D83-49BD-99AF-A3B60CE43215%7D&file=How%20to%20Set%20Up%20C1%20Report%20Services.docx&action=default">How to Set Up C1 Web API Report Services</a>.</li>
                <li>Add references to AngularJS, Wijmo, and Wijmo's AngularJS directives.</li>
                <li>
                    Include the Wijmo directives in the app module: <br />
                    <code>var app = angular.module('app', ['wj']);</code>
                </li>
                <li>Add a controller to provide data and logic.</li>
                <li>Add a ReportViewer to the page and set its <b>serviceUrl</b>, <b>filePath</b>, and <b>reportName</b> properties.</li>
            </ol>
            <p>
                The <a target="_blank" href="http://helpcentral.componentone.com/nethelp/C1WebAPI/ReportServices.html">C1 Web API Report Services</a> use <a target="_blank" href="http://www.componentone.com/Studio/FlexReport?platform=WinForms">C1FlexReport</a> to render and export report.
                Please refer to <a target="_blank" href="https://grapecity.sharepoint.com/teams/C1/C1Studio/Rhino/_layouts/15/WopiFrame.aspx?sourcedoc=%7BC7E2A01F-5D83-49BD-99AF-A3B60CE43215%7D&file=How%20to%20Set%20Up%20C1%20Report%20Services.docx&action=default">How to Set Up C1 Web API Report Services</a> for details. </p>
            <p>
                To show the content of FlexReport from C1 Web API Report Services, set the following basic properties:
            </p>
            <ol>
                <li>
                    <b>serviceUrl:</b> The url of C1 Web API Report Services.
                    For example, <span style="word-wrap:break-word">'https://demos.componentone.com/ASPNET/c1webapi/4.0.20172.105/api/report'</span>.
                </li>
                <li>
                    <b>filePath:</b> The full path to the FlexReport definition file.
                    For example, <span style="word-wrap:break-word">'ReportsRoot/Formatting/AlternateBackground.flxr'</span>.
                    <p>
                        The 'ReportsRoot' is the key of the report provider which is registered at server for locating specified report.
                        <br />
                        The <span style="word-wrap:break-word">'Formatting/AlternateBackground.flxr'</span> is the relative path of the FlexReport definition file which can be located by the report provider.
                    </p>
                </li>
                <li>
                    <b>reportName:</b> The report name defined in the FlexReport definition file.
                    For example, 'AlternateBackground', for the report named 'AlternateBackground' in the AlternateBackground.flxr file.
                </li>
            </ol>
            <div class="row">
                <div class="col-md-12">
                    <h4>Result (live):</h4>
                    <wj-report-viewer service-url="{{viewerProps.serviceUrl}}" file-path="{{viewerProps.filePath}}" report-name="{{viewerProps.reportName}}"></wj-report-viewer>
                </div>
            </div>
            <br />
            <div class="row">

                <div class="col-md-12">
                    <wj-tab-panel>
                        <wj-tab>
                            <a>HTML</a>
                            <div ng-non-bindable>
&lt;head&gt;
    &lt;title&gt;ReportViewer Introduction&lt;/title&gt;

    &lt;!-- ensure IE uses the latest version of IE (yes, yes...) --&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;

    &lt;!-- Angular/Bootstrap --&gt;
    &lt;script src="bin/Devel/external/angular.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" type="text/css" href="bin/devel/external/bootstrap/css/bootstrap.css" /&gt;
    &lt;link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" /&gt;

    &lt;!-- Wijmo --&gt;
    &lt;script wj-src="wijmo" src="bin/Devel/loaders/wijmo.load.module.js"&gt;&lt;/script&gt;
    &lt;script wj-src="wijmo.input" src="bin/Devel/loaders/wijmo.load.module.js"&gt;&lt;/script&gt;
    &lt;script wj-src="wijmo.grid" src="bin/Devel/loaders/wijmo.load.module.js"&gt;&lt;/script&gt;
    &lt;script wj-src="wijmo.viewer" src="bin/Devel/loaders/wijmo.load.module.js"&gt;&lt;/script&gt;
    &lt;link href="bin/Devel/sources/styles/wijmo.css" rel="stylesheet" /&gt;

    &lt;!-- Wijmo-Angular interop --&gt;
    &lt;script wj-src="wijmo.angular" src="bin/Devel/loaders/wijmo.load.module.js"&gt;&lt;/script&gt;

    &lt;!-- app styles/scripts --&gt;
    &lt;link href="styles/app.css" rel="stylesheet" /&gt;
    &lt;script src="scripts/app.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body ng-app="app" ng-controller="appCtrl"&gt;
    &lt;wj-report-viewer service-url="{{viewerProps.serviceUrl}}" file-path="{{viewerProps.filePath}}" report-name="{{viewerProps.reportName}}"&gt;&lt;/wj-report-viewer&gt;
&lt;/body&gt;
                            </div>
                        </wj-tab>
                        <wj-tab>
                            <a>JS</a>
                            <div>
'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'
    };
})
                            </div>
                        </wj-tab>
                    </wj-tab-panel>
                </div>

            </div>
        </div>

        <!-- SSRS Reports -->
        <div>
            <h2 id="Features">SSRS Reports</h2>
            <p>
                The ReportViewer control can also show <a target="_blank" href="https://msdn.microsoft.com/en-us/library/ms159106.aspx">SSRS</a> report.
            </p>
            <p>
                The <a target="_blank" href="http://helpcentral.componentone.com/nethelp/C1WebAPI/ReportServices.html">C1 Web API Report Services</a> use <a target="_blank" href="http://helpcentral.componentone.com/nethelp/FlexReport/C1.Win.C1Document.4~C1.Win.C1Document.C1SSRSDocumentSource.html">C1SSRSDocumentSource</a> 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 <a target="_blank" href="https://grapecity.sharepoint.com/teams/C1/C1Studio/Rhino/_layouts/15/WopiFrame.aspx?sourcedoc=%7BC7E2A01F-5D83-49BD-99AF-A3B60CE43215%7D&file=How%20to%20Set%20Up%20C1%20Report%20Services.docx&action=default">How to Set Up C1 Web API Report Services</a> for details.
            </p>
            <p>
                To show the content of SSRS report from C1 Web API Report Services, set the following basic properties:
            </p>
            <ol>
                <li>
                    <b>serviceUrl:</b> The url of C1 Web API Report Services.
                    For example, <span style="word-wrap:break-word">'https://demos.componentone.com/ASPNET/c1webapi/4.0.20172.105/api/report'</span>.
                </li>
                <li>
                    <b>filePath:</b> The full path to the SSRS report on the server.
                    For example, <span style="word-wrap:break-word">'c1ssrs/AdventureWorks/Company Sales'</span>.
                    <p>
                        The 'c1ssrs' is the key of the report provider which is registered at server for specified report (for 
                        <span style="word-wrap:break-word">'https://demos.componentone.com/ASPNET/c1webapi/4.0.20172.105/api/report'</span>,
                        the 'c1ssrs' is the key of the report provider which links to the SSRS server <span style="word-wrap:break-word">'http://ssrs.componentone.com:8000/ReportServer'</span>).
                        <br />
                        The 'AdventureWorks/Company Sales' is the full path to the report which can be located in the SSRS server.
                    </p>
                </li>
            </ol>
            <div class="row">
                <div class="col-md-12">
                    <h4>Result (live):</h4>
                    <wj-report-viewer service-url="{{viewerProps.serviceUrl}}" file-path="{{viewerProps.ssrsFilePath}}"></wj-report-viewer>
                </div>
            </div>
            <br />
            <div class="row">
                <div class="col-md-12">
                    <wj-tab-panel>
                        <wj-tab>
                            <a>HTML</a>
                            <div ng-non-bindable>
 &lt;wj-report-viewer service-url="{{viewerProps.serviceUrl}}" file-path="{{viewerProps.ssrsFilePath}}"&gt;&lt;/wj-report-viewer&gt;
                            </div>
                        </wj-tab>
                        <wj-tab>
                            <a>JS</a>
                            <div>
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'
    };
})
                            </div>
                        </wj-tab>
                    </wj-tab-panel>
                </div>

            </div>
        </div>

        <!-- Basic Features -->
        <div>
            <h2 id="Legend">Basic Features</h2>
            <p>
                The ReportViewer control has the following four basic properties, which allow you to customize its appearance and behavior:
            </p>
            <ul>
                <li>
                    <b>fullScreen</b>: Indicates whether viewer is under full screen mode.
                </li>
                <li>
                    <b>mouseMode</b>: Indicates the mouse behavior.
                </li>
                <li>
                    <b>viewMode</b>: Indicates how to show the document pages.
                </li>
                <li>
                    <b>zoomFactor</b>: Indicates the current zoom factor to show the document pages.
                </li>
            </ul>
            <p>
                The example below allows you to see what happens when you change these properties.
            </p>
            <div>
                <div class="col-md-12">
                    <div class="row">
                        <h4>Result (live):</h4>
                        <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>
                </div>
                <div class="col-md-12">
                    <wj-tab-panel>
                        <wj-tab>
                            <a>HTML</a>
                            <div ng-non-bindable>
    &lt;div class="row"&gt;
        &lt;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"&gt;
        &lt;/wj-report-viewer&gt;
    &lt;/div&gt;
    &lt;br /&gt;
    &lt;div class="row"&gt;
        &lt;div class="form-horizontal"&gt;
            &lt;div class="form-group"&gt;
                &lt;div class="col-md-3"&gt;
                    &lt;div class="checkbox"&gt;
                        &lt;label&gt;
                            &lt;input id="basicContinuousViewMode" type="checkbox" ng-model="viewerProps.continuousViewMode"/&gt; Continuous View Mode?
                        &lt;/label&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="col-md-3"&gt;
                    &lt;wj-menu value="viewerProps.mouseMode" header="Mouse Mode"&gt;
                        &lt;wj-menu-item value="0"&gt;SelectTool&lt;/wj-menu-item&gt;
                        &lt;wj-menu-item value="1"&gt;MoveTool&lt;/wj-menu-item&gt;
                        &lt;wj-menu-item value="2"&gt;RubberbandTool&lt;/wj-menu-item&gt;
                        &lt;wj-menu-item value="3"&gt;MagnifierTool&lt;/wj-menu-item&gt;
                    &lt;/wj-menu&gt;
                &lt;/div&gt;
                &lt;div class="col-md-2"&gt;
                    &lt;div class="checkbox"&gt;
                        &lt;label&gt;
                            &lt;input id="basicFullScreen" type="checkbox" ng-model="viewerProps.fullScreen"/&gt; Full Screen?
                        &lt;/label&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="col-mod-4"&gt;
                    &lt;label class="col-md-2 control-label"&gt;Zoom Factor&lt;/label&gt;
                    &lt;div class="col-md-2"&gt;
                        &lt;wj-input-number value="viewerProps.zoomFactor"
                                         min="0.05"
                                         max="10"
                                         step=".1"
                                         format="'n2'"&gt;
                        &lt;/wj-input-number&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
                            </div>
                        </wj-tab>
                        <wj-tab>
                            <a>JS</a>
                            <div>
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;
        }
    });
});
                            </div>
                        </wj-tab>
                    </wj-tab-panel>
                </div>
            </div>

            <!-- Report Names -->
            <div>
                <h2 id="Selection">Report Names</h2>
                ReportViewer rerenders the report if <b>filePath</b> and <b>reportName</b> properties are changed.
                <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>
                <br />
                <div class="row">
                    <div class="col-md-12">
                        <wj-tab-panel>
                            <wj-tab>
                                <a>HTML</a>
                                <div ng-non-bindable>
   &lt;div class="row"&gt;
       &lt;div class="col-md-12"&gt;
           &lt;h4&gt;Result (live):&lt;/h4&gt;
           &lt;wj-report-viewer control="nameReportViewer" service-url="{{viewerProps.serviceUrl}}" file-path="{{viewerProps.chgFilePath}}" report-name="{{viewerProps.chgReportName}}"&gt;
           &lt;/wj-report-viewer&gt;
           &lt;br /&gt;
           &lt;div class="form-horizontal"&gt;
               &lt;div class="form-group"&gt;
                   &lt;label class="col-md-3 control-label"&gt;Report Path&lt;/label&gt;
                   &lt;div class="col-md-9"&gt;
                       &lt;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)"&gt;
                       &lt;/wj-combo-box&gt;
                   &lt;/div&gt;
               &lt;/div&gt;
           &lt;/div&gt;
       &lt;/div&gt;
   &lt;/div&gt;
                                </div>
                            </wj-tab>
                            <wj-tab>
                                <a>JS</a>
                                <div>
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;
        }
    }
});
                                </div>
                            </wj-tab>
                        </wj-tab-panel>
                    </div>

                </div>

            </div>

        </div>
</div>

        <!-- Google analytics -->
        
</body>
</html>
