How to Use React Report Viewer with Report Server for .NET

This tutorial demonstrates how to add the React Report Viewer component to a new React application and display a report coming from the Telerik Report Server.

Prerequisites

The following list describes the prerequisites for this tutorial:

The article explains how to set up the HTML5 Report Viewer to work with the Telerik Report Server for .NET. The user account that will authenticate with the Report Server may be any User, including the Guest User, provided there is an enabled Token in its Tokens collection.

Prerequisites

Review the React Report Viewer Requirements.
Installed and running Telerik Report Server for .NET.
Report Server for .NET's User that will connect from the viewer should have at least one enabled Token.
Report Server for .NET should contain at least one report that can be accessed by the User account.

Steps

Install the @progress/telerik-react-report-viewer NPM package by running:
```
npm install @progress/telerik-react-report-viewer
```
Style the viewer using the desired Kendo UI Sass-Based Theme by adding references to the Sass-based CSS files in the <head> element of public/index.html:
```
<link href="https://kendo.cdn.telerik.com/themes/10.2.0/default/default-ocean-blue.css" rel="stylesheet" />
```
To get the Sass-based Kendo UI themes, you can use either the pre-built CSS files, the Kendo UI CDN, or the NPM packages (Getting the Sass-Based Themes).
In the .JSX file where the report viewer will be used, create a reportSource object specifying the category and the name of the report that will be displayed. For example, if the category is Samples and the report is Dashboard, the syntax will look as follows:
```
const reportSource = {
    report: 'Samples/Dashboard',
    parameters: {}
}
```
In the same file, define a viewerContainerStyle object with the CSS styles that must be applied to the viewer's container, such as size, position, etc.
```
const viewerContainerStyle = {
    position: 'absolute',
    inset: '5px'
}
```
In the same file, define a reportServer object with a url string pointing to the Report Server for .NET, and a getPersonalAccessToken callback, which will be executed when the report viewer requests from the server to render the report.
```
const reportServer = { 
    url: 'http://dnikolovlap:81/',
    getPersonalAccessToken: () => fetch('/rs-token').then(response => response.text())
}
```
In this example, the getPersonalAccessToken callback makes a request to a /rs-token endpoint that returns the token used to authorize access to using the Report Server for .NET REST API.

This is the recommended approach, but if an endpoint cannot be exposed, the token can be hardcoded in the callback: getPersonalAccessToken: () => Promise.resolve('TOKEN_STRING')

In the same file, import the TelerikReportViewer component from @progress/telerik-react-report-viewer so that the objects that we defined above can be passed to the viewer:

import { TelerikReportViewer } from '@progress/telerik-react-report-viewer';

export function ReportViewer() {

    const reportServer = { 
        url: 'http://reportServerUrl:port/',
        getPersonalAccessToken: () => fetch('/rs-token').then(response => response.text())
    }

    const reportSource = {
        report: 'Samples/Dashboard',
        parameters: {}
    }

    const viewerContainerStyle = {
        position: 'absolute',
        inset: '5px'
    }

    return (
            <TelerikReportViewer
                reportServer={reportServer}
                reportSource={reportSource}
                viewerContainerStyle={viewerContainerStyle} />
    )
}

Run the application:
```
npm run start
```

How to Use React Report Viewer with Report Server for .NET

Prerequisites

Prerequisites

Steps

See Also

Getting Started

Support Resources

Community