xtrareports-400083-web-reporting-knockout-reporting-document-viewer-use-the-report-and-dashboard-server-as-a-backend.md
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:
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.
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:
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:
In the console window, execute the following commands to install the Webpack CLI globally:
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.
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:
Add a new JavaScript file ( index.js ) to perform the nessesary actions and provide data to the View:
Create a new style.css file and link the required styles.
Run the following command in the console to create the bundle:
Host your client-side part on the web server.
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.
See Also