xtrareports-401915-web-reporting-react-reporting.md
Topics in this section describe how to use Reporting components in applications based on the React framework.
DevExpress Web Reporting controls are composed of DevExtreme UI components. React versions supported by the DevExtreme Component Suite are listed in the following help topic: DevExtreme React - Supported Versions.
Constants and enums in TypeScript code may require the import directive. The following example declares the DevExpress.Reporting.Viewer.ZoomAutoBy enum:
import { ZoomAutoBy } from "devexpress-reporting/viewer/constants";
You can import constants from the following sources:
devexpress-reporting/dx-webdocumentviewerdevexpress-reporting/dx-reportdesignerView Example: Reporting for React - Add a Web Document Viewer to a React App
Use the JSReportViewer class to access the client-side API in React applications.
Client-side events in React are handled with callbacks specified in the Callbacks component.
For a list of event names and their arguments, review WebDocumentViewerClientSideEventsBuilder methods. Although that documentation topic is specific to ASP.NET Core, the API for React callbacks is the same.
The following code snippet uses the CustomizeExportOptions callback to remove the XLS format from the Export To drop-down list and from the Export Options panel:
View Example: Reporting for React - Customize a Web Document Viewer in a React App (Next.js)
'use client';
import ReportViewer, { RequestOptions, Callbacks } from 'devexpress-reporting-react/dx-report-viewer';
import { ExportFormatID } from 'devexpress-reporting/dx-webdocumentviewer';
function App() {
const onCustomizeExportOptions = ({ args }: { args: any }): void => {
args.HideFormat(ExportFormatID.XLS);
};
return (
<ReportViewer reportUrl="TestExportReport">
<RequestOptions host="http://localhost:5000/" invokeAction="DXXRDV" />
<Callbacks CustomizeExportOptions={onCustomizeExportOptions} />
</ReportViewer>
)
}
export default App
View Example: Reporting for React - Add a Web Report Designer to a React App
A general technique that allows you to customize the UI elements in Reporting components: Use Custom HTML Templates.
Use the ReportDesignerSettingsBase class to configure the Web End-User Report Designer on the client. For more information, refer to the following section: ReportDesignerSettingsBase for JavaScript Frameworks.
Use the JSReportDesigner class to access the client-side API in React applications.
Client-side events in React are handled with callbacks specified in the Callbacks component.
For a list of event names and their arguments, review ReportDesignerClientSideEventsBuilder methods. Although that documentation topic is specific to ASP.NET Core, the API for React callbacks is the same.
The following code snippet does the following:
View Example: Reporting for React - Customize a Web Report Designer in a React App (Next.js)
'use client';
import dynamic from 'next/dynamic'
import Callbacks from 'devexpress-reporting-react/dx-report-designer/options/Callbacks'
import RequestOptions from 'devexpress-reporting-react/dx-report-designer/options/RequestOptions';
import {ActionId } from 'devexpress-reporting/viewer/constants';
const ReportDesigner = dynamic(() => import('devexpress-reporting-react/dx-report-designer'), {ssr: false})
function App() {
const onTabChanged = ({ args }: { args: any }): void => {
alert("The tab was changed to " + args.Tab.displayName());
};
const onReportOpened = ({ args }: { args: any }): void => {
args.Report.measureUnit("TenthsOfAMillimeter");
};
const onPreviewCustomizeMenuActions = ({ args }: { args: any }): void => {
var actions = args.Actions;
// Get the "Print Page" action and hide it.
var printPageAction = args.GetById(ActionId.PrintPage);
if (printPageAction)
printPageAction.visible = false;
// Add a new action.
actions.push({
text: "Custom Command",
imageClassName: "customButton",
imageTemplateName: "dxrd-svg-wizard-warning",
hasSeparator: false,
disabled: false,
visible: true,
hotKey: { ctrlKey: true, keyCode: "Z".charCodeAt(0) },
clickAction: function () {
alert('Clicked.');
}
})
};
return (
<ReportDesigner reportUrl="TestReport">
<RequestOptions host="http://localhost:5000/" getDesignerModelAction="DXXRD/GetDesignerModel" />\
<Callbacks TabChanged={onTabChanged}
ReportOpened={onReportOpened}
PreviewCustomizeMenuActions={onPreviewCustomizeMenuActions}/>
</ReportDesigner>
)
}
export default App;
The Standalone Report Parameters Panel is a component that creates a layout with editors for report parameters. It retrieves information on report parameters from a DevExpress report instance passed from the backend.
This component can be used to programmatically create a report on the server without showing a preview to the end user. The Standalone Report Parameters Panel component is based on the Parameters Panel of the DevExpress Document Viewer component. Public properties and events are similar to the properties and events implemented in the Web Document Viewer component.
Search sample projects and learn how to use and customize Reporting components in React applications: