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.

Authentication

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.

<ReportServerProvider
serviceBaseUrl="https://reportserver.devexpress.com"
username="Guest"
password=""
>

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.

3 comment(s)
Larry Pope
Larry Pope
Oliver,

Thank you for the sample project.  I'd really like to at using this in a production environment.  I have two issues I'd like your help with.


I downloaded the zip package from codesandbox.io and running if via the standalone Node.js application.  In IE 11, I get the following errors in the console.  If I run it in Chrome, it works as expected.

SCRIPT1002: Syntax error
1.chunk.js (64819,34)
SCRIPT1002: Syntax error
main.chunk.js (131,16)

 

If I run it from Chrome and replace serviceBaseUrl with the value of my internal R&D server, I get the following error in the console: 

Access to fetch at 'http://XXXXXXXXXX:83//oauth/token' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.


My R&D server is on the default port of 83, only http (internal only server).   Any ideas how to deal with the CORS issue?


15 July, 2019
Larry Pope
Larry Pope

I did enable CORS from the R&D settings.  After enabling that and recycling the IIS server, I get this error.


Access to fetch at 'http://XXXXXXXX:83/ServerError/NotFound?aspxerrorpath=/oauth/token' (redirected from 'http://XXXXXXXX:83//oauth/token') from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

15 July, 2019
Dmitry Tok (DevExpress Support)
Dmitry Tok (DevExpress Support)

Hi Larry,

The OAuth token can not be retrieved from the server using HTTP, it requires HTTPS. Please review the HTTP or what? paragraph from the previous Oliver's post to get the details. 

 

If you require technical assistance, do not hesitate to reach out to the team directly via reportingteam@devexpress.com or via Support Center.

 

 

 

16 July, 2019

Please login or register to post comments.