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.
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.
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.