Example T1272860
Visible to All Users

Reporting for React - Customize a Web Document Viewer in a React App (Next.js)

This example incorporates the Web Document Viewer into a client-side app built with React. The example consists of two parts:

This project contains code snippets used for client-side customization and reflected in our online help topics. Each code snippet is enclosed in a page.tsx file in a separate folder. After running the project, open the following folders to see the result:

Location Description
/custom-export-to-button Hides the Export Options panel, adds a button to export the report to a file in XLSX format, and specifies the Author export option.
/custom-parameter-lookup-source Populates parameter editors with values obtained on the client.
/customize-export-options Specifies the "|" symbol as a separator for CSV data export, hides specified export options.
/customize-export-toolbar-item Adds a new Image: JPEG item in the Export drop-down menu and binds it to the ExportTo action.
/customize-parameter-editor-options Removes time part from a calendar editor in the Parameters panel.
/export-options-hide-format Removes the XLS format from the Export To drop-down list and from the Export Options panel.
/get-parameters-model Obtains values that the user selects in the multi-value parameter editor.
/get-preview-model Collapses the tab panel when the user clicks Reset in the Parameters tab.
/get-report-preview Sets the report preview's zoom level to 25%.
/goto-next-page Automatically navigates through the document pages.
/on-server-error Logs error details and displays an alert box when a server error occurs.
/open-report Loads the specified report.
/parameters-events Handles report parameter events.
/predefined-date-ranges Removes built-in predefined ranges in the DateTime editor and adds two custom predefined ranges.
/print-document Creates a button that prints the Document Viewer's report.
/property-changes-processing Sets the zoom level to 25%, enables multi-page mode, and indicates the moment when the first page is loaded.
/submit-parameters Passes a parameter to the report and rebuilds the document.

Quick Start

Server

In the ServerSideApp/ServerSideApp folder, run the following command:

Code
dotnet run

The server starts at http://localhost:5000. To debug the server, run the application in Visual Studio.

Client

In the react-document-viewer folder, run the following commands:

Code
npm install npm run dev

Open http://localhost:3000/ in your browser to view the result. The application displays the Web Document Viewer with the TestReport report.

Document Viewer in JavaScript with React

Files to Review

Documentation

More Examples

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)

Example Code

react-document-viewer/app/page.tsx
Code
'use client'; import ReportViewer, { RequestOptions } from 'devexpress-reporting-react/dx-report-viewer'; function App() { return ( <ReportViewer reportUrl="TestReport"> <RequestOptions host="http://localhost:5000/" invokeAction="DXXRDV" /> </ReportViewer> ) } export default App
ServerSideApp/ServerSideApp/Program.cs
C#
using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Threading.Tasks; using Microsoft.AspNetCore; using Microsoft.AspNetCore.Hosting; using Microsoft.Extensions.Configuration; using Microsoft.Extensions.Logging; using DevExpress.AspNetCore; using DevExpress.AspNetCore.Reporting; using DevExpress.Security.Resources; using DevExpress.XtraReports.Web.Extensions; using DevExpress.XtraReports.Web.WebDocumentViewer; using Microsoft.AspNetCore.Builder; using Microsoft.EntityFrameworkCore; using Microsoft.Extensions.DependencyInjection; using Microsoft.Extensions.Hosting; using ServerSideApp.Services; using ServerSideApp.Data; var builder = WebApplication.CreateBuilder(args); builder.Services.AddDevExpressControls(); builder.Services.AddScoped<ReportStorageWebExtension, CustomReportStorageWebExtension>(); // Uncomment the following line if you run the Custom Export example. builder.Services.AddSingleton<WebDocumentViewerOperationLogger, MyOperationLogger>(); builder.Services.AddMvc(); builder.Services.ConfigureReportingServices(configurator => { if(builder.Environment.IsDevelopment()) { configurator.UseDevelopmentMode(); } configurator.ConfigureReportDesigner(designerConfigurator => { }); configurator.ConfigureWebDocumentViewer(viewerConfigurator => { viewerConfigurator.UseCachedReportSourceBuilder(); viewerConfigurator.RegisterConnectionProviderFactory<CustomSqlDataConnectionProviderFactory>(); }); }); builder.Services.AddDbContext<ReportDbContext>(options => options.UseSqlite(builder.Configuration.GetConnectionString("ReportsDataConnectionString"))); builder.Services.AddCors(options => { options.AddPolicy("AllowCorsPolicy", builder => { // Allow all ports on local host. builder.SetIsOriginAllowed(origin => new Uri(origin).Host == "localhost"); builder.AllowAnyHeader(); builder.AllowAnyMethod(); }); }); var app = builder.Build(); using(var scope = app.Services.CreateScope()) { var services = scope.ServiceProvider; services.GetService<ReportDbContext>().InitializeDatabase(); } var contentDirectoryAllowRule = DirectoryAccessRule.Allow(new DirectoryInfo(Path.Combine(builder.Environment.ContentRootPath, "Content")).FullName); AccessSettings.ReportingSpecificResources.TrySetRules(contentDirectoryAllowRule, UrlAccessRule.Allow()); app.UseDevExpressControls(); System.Net.ServicePointManager.SecurityProtocol |= System.Net.SecurityProtocolType.Tls12; if(app.Environment.IsDevelopment()) { app.UseDeveloperExceptionPage(); } else { app.UseExceptionHandler("/Home/Error"); // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts. app.UseHsts(); } app.UseHttpsRedirection(); app.UseStaticFiles(); app.UseRouting(); app.UseCors("AllowCorsPolicy"); app.UseAuthorization(); app.MapControllerRoute( name: "default", pattern: "{controller=Home}/{action=Index}/{id?}"); app.Run();
ServerSideApp/ServerSideApp/Controllers/ReportingControllers.cs
C#
using DevExpress.AspNetCore.Reporting.WebDocumentViewer; using DevExpress.AspNetCore.Reporting.WebDocumentViewer.Native.Services; namespace ServerSideApp.Controllers { public class CustomWebDocumentViewerController : WebDocumentViewerController { public CustomWebDocumentViewerController(IWebDocumentViewerMvcControllerService controllerService) : base(controllerService) { } } }

Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.