Use the Report and Dashboard Server as a Backend

Jan 06, 2024
5 minutes to read

This document describes how to integrate the Web Document Viewer to JavaScript and display documents that are created remotely with the DevExpress Report and Dashboard Server. The Report and Dashboard Server acts as a server (backend) part and you should create a client (frontend) part with all the necessary styles, scripts, and HTML-templates.

You can use a Bearer token to access the protected API that the Report and Dashboard Server provides to access its documents. This topic demonstrates how to obtain this token based on the resource owner password credentials grant.

Tip

See the following online examples:

Configure the Report and Dashboard Server

Create a Server account (with Server authentication) that the Web Document Viewer uses in your application.
Give this account at least read permissions to all the required documents.
Enable Cross-Origin Resource Sharing (CORS) on the screen with the Server settings and restart the Report and Dashboard Server to apply the changes.
Configure SSL on IIS to access the Report and Dashboard Server web site using SSL.

Integrate the Document Viewer to JavaScript

Create a new folder to store all the files related to the client-side functionality (for instance, name it ClientSide).

Add the package.json configuration file to the created folder and list the following third-party packages the Web Document Viewer requires:

JSON

{
    "name": "web-document-viewer",
    "version": "1.0.0",
    "dependencies": {
    "devextreme": "24.1.*",
        "@devexpress/analytics-core": "24.1.*",
        "devexpress-reporting": "24.1.*"
    },
    "devDependencies": {
        "webpack": "~4.10.1",
        "html-loader": "~0.5.4"
    }
}

Note

Frontend and backend applications should use the same version of DevExpress controls.

Install Node.js and npm if they do not exist on your machine.
Navigate to your folder, open the console and run the command below to install packages:
```
npm install
```
You can find all the libraries in the node_modules folder after installation is completed.
In the console window, execute the following commands to install the Webpack CLI globally:
```
npm install -g webpack

npm install -g webpack-cli
```

Create a new webpack.config.js file and specify configuration settings as shown below. Define the index.js file as the bundle’s entry point (this file is created later) and the bundle.js file as the output file.

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: './index.js',
    output: {
        filename: 'bundle.js'
    },
    mode: "development",
    module: {
        rules: [
            {
                test: /\.html$/,
                loader: "html-loader" 
            },
            {
                test: /\.css$/,
                loader: "style-loader" 
            }
        ]
    }
};

Create a View file (the index.html file in this example) and specify this View’s HTML template. Do the following in the body section:

display the drop-down list with all the available reports;
use the dxReportViewer binding with the viewerOptions parameter;
link the bundle script file specified at the previous step.

HTML

<!DOCTYPE html>
<html>
    <head>
         <!-- ... -->
    </head>

    <body>
        <select name="reports" data-bind="value: reportUrl">
        <!-- ko foreach: reports -->
            <option data-bind="value: Key, text: Value"></option>
        <!-- /ko -->
        </select>
        <!-- ko if: reportUrl -->
        <div style="width:100%; height: 1000px" data-bind="dxReportViewer: viewerOptions"></div>
        <!-- /ko -->
        <!-- Include the bundle script -->
        <script type="text/javascript" src="dist\bundle.js" charset="utf-8"></script>
    </body>
</html>

Add a new JavaScript file (index.js) to perform the nessesary actions and provide data to the View:

link all the required modules;
send the POST request to the Report and Dashboard Server with the following required parameters: grant_type (with the password value) and your username and password to exchange for an access token;
send the GET request to the Report and Dashboard Server and use the obtained Bearer token to get all the available documents;
filter the obtained documents to return only reports;
create the viewerOptions variable and activate the Knockout bindings.

var $ = require('jquery');
var ko = require('knockout');

require('devexpress-reporting/dx-webdocumentviewer')

var reportUrl = ko.observable();
var reports = ko.observableArray();
$.ajax("{report_server_uri}/oauth/token", {
    data: {
        username: 'MyUsername',
        password: 'MyPassword',
        grant_type: 'password'
    },
    method: "POST"
}).done(function(result) {
    var token = result.access_token;
    $.ajax("{report_server_uri}/api/documents", {
        headers:  { Authorization: 'Bearer ' + token }
    }).done(function(result) {
        reports(result.filter(function(item) { return item.documentType === "Report" }).map(function(item) {
            return {
                Key: "report/" + item.id,
                Value: item.name
            }
        }));
    })
    ko.applyBindings({
        reports,
        reportUrl,
        viewerOptions: {
            reportUrl: reportUrl,// The URL of a report to open in the Document Viewer when the application starts. 
            remoteSettings: { // Options to display documents from the Report and Dashboard Server.    
                serverUri: "{report_server_uri}/", // The Report and Dashboard Server URI.
                authToken: token // The Bearer token used to access documents on the Report and Dashboard Server. 
            },
        }
    });
});

Create a new style.css file and link the required styles.

@import url("node_modules/devextreme/dist/css/dx.light.css");
@import url("node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css");
@import url("node_modules/@devexpress/analytics-core/dist/css/dx-analytics.light.css");
@import url("node_modules/devexpress-reporting/dist/css/dx-webdocumentviewer.css");

Link this file in the index.html file’s head section.

HTML

...
<head>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
...

Run the following command in the console to create the bundle:
```
webpack
```
Host your client-side part on the web server.

For instance, start the Internet Information Services (IIS) Manager, right-click the Sites item in the Connections section and select Add Website. In the invoked dialog, specify the site name, path to the folder with the client-side functionality, and the website’s IP address.

View the Result

For the example to work correctly, you should first open your Report and Dashboard Server web site, and then run a client part. Select a report in the drop-down list to open it in the Web Document Viewer.

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Configure the Report and Dashboard Server

Integrate the Document Viewer to JavaScript

View the Result