Report and Dashboard Server - React Viewer Components

Reporting Team Blog
10 July 2019

Last year, we published a post about using React with the Report and Dashboard Server. We have now created an updated sample that includes React components for Report Viewer and Dashboard Control.

The Report and Dashboard Server (short R&D Server from now on) is a powerful turnkey solution. The sample shows how its frontend components can be integrated in a React app — similar approaches can be used for other client platforms, so R&D Server functionality is available to all JavaScript-based solutions.

Here is the demo application. It is configured to use guest access to our demo server. You can run the embedded app below by clicking the Preview button, or use Open in Editor to see a bigger window. Once the app runs, select a report or dashboard document from the list in the top-left corner and a viewer opens to show that document. In the sandbox IDE, you can also see all the code files in the project.

Note: The sandbox environment used for the embedded demo is not compatible with IE 11 at this time (see here). The sample project has been tested with IE 11 and works correctly if you run it locally.

Technical Details

The components written for the sample do not cover the complete feature set of our HTML/JS widgets. However, they have been designed for “real” use cases, and the following sections outline some important technical points and design considerations.

Please note that the components only view documents from the R&D Server, they don’t utilize any of the designer features of the underlying widgets. The R&D Server already implements a web interface for design purposes and it seems unlikely that most applications would replicate this functionality.


Before any documents on an R&D Server can be accessed, an authentication token must be obtained. The component ReportServerProvider does this job in the demo application, and it automatically refreshes the token when it times out. Using a React Context, the current token is provided to those components that need it. For the demo, the Guest account is configured statically.


Both viewer components ReportServerReport and ReportServerDashboard include code that applies a newly refreshed token to a component instance without a content refresh. This is important to make sure that the end user is not disrupted in their work with the viewer component when a token expires.

Note: If you use the sample application to access your own installation of R&D Server, please be aware that a version >= v19.1.5 is required for token-based access to the Guest account. Other versions of R&D Server should work as long as a non-Guest account is used, but the sample has been tested specifically with v19.1.

Viewer Lifecycles

Both viewer components can switch documents without reinitializing. This results in a smooth user experience when a viewer is already visible and a new document of equal type is selected. The dashboard viewer uses the loadDashboard and unloadDashboard API methods, while the report viewer binds to a Knockout observable.

The demo implements a switch component called ReportServerDocumentViewer. This component encapsulates the other two, providing a very small interface with only two props:

<ReportServerDocumentViewer document={{ id: 10, documentType: 'Report' }} />

Globalize and CLDR

The Dashboard Control requires Globalize and CLDR to be available in the application. Details about this configuration are available in the documentation. The approach described on that page uses react-app-rewired to integrate the dependencies into a project created using create-react-app, without ejecting it. Please note that this is the recommended approach.

For the demo, the project has been ejected because the sandbox environment can’t run projects configured with react-app-rewired.

What Do You Think?

Please feel free to comment below if you have any questions or comments on this sample implementation. Alternatively, please create a Support Center ticket if you need to discuss your specific requirements in detail.

Free DevExpress Products - Get Your Copy Today

The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the DevExpress Support Center at your convenience. We'll be happy to follow-up.
No Comments

Please login or register to post comments.