Report Designer Client-Side Configuration in React Applications

• Jun 03, 2024
• 4 minutes to read

This help topic describes how to configure the ReportDesigner component that integrates the Web Report Designer into your React-based application. Note that Angular Reporting components require an API backend application.

To set the options from the client side, use the ReportDesignerSettingsBase class in you application.

Root Options

The following table lists ReportDesigner component options:

Option	Required / Optional	Description
reportUrl	Required	A string that specifies the initial report’s URL.
width	Optional	A string that defines Report Designer width. The default value is ‘100%’.
height	Optional	A string that defines Report Designer height. The default value is ‘700px’.
developmentMode	Optional	A Boolean value that enables Development mode for extended diagnostics. Review the following help topic for more information: Troubleshooting: Server-Side Libraries Version.
cssClass	Optional	A string that specifies the CSS class name to attach to the root div element.

RequestOptions

Allows you to specify where to send requests from the Report Designer.

Option	Required / Optional	Description
host	Required	A server-side project’s URI.
getDesignerModelAction	Required	The URI path of the controller action that returns the Report Designer model.
getLocalizationAction	Optional	The URI path of the controller action used to customize localization strings.

Callbacks

Allows you to specify a callback to customize the Report Designer. Callbacks correlate to client-side events at the Report Designer control level.

DesignerModelSettings

Allows you to specify various Report Designer settings. Review the ReportDesignerSettingsBase class description for information about available settings.

Settings in this section are passed to the controller and applied to the server-side model. You should add a parameter to the controller action method and assign the passed value to the model property.

Setting	Description
allowMDI	Specifies whether a user can close all reports designed in the Report Designer and leave the designer empty or leave it with only a single report.’
rightToLeft	Enables a right-to-left layout in the Web Report Designer user interface.

The DesignerModelSettings is a nested component that includes the settings listed below:

DataSourceSettings

Allows you to hide data source actions from the Field List panel (part of the Web End-User Report Designer). Review the ReportDesignerDataSourceSettings class description for more information.

PreviewSettings

Allows you to specify Report Preview settings. Review the ReportPreviewSettings class description for more information.

WizardSettings

Specifies Report Wizard settings. Review the ReportDesignerWizardSettings class description for more information.

ParameterEditingSettings

Specifies settings that configure user interface elements related to the editing of parameters, parameter groups, and parameter separators in the Web Report Designer. Review the ReportDesignerParameterEditingSettings class description for more information.

Usage

The following code configures the ReportDesigner component in a React application. The code does the following:

• Uses the CustomizeMenuActions event to hide the New and Open commands from the Main Menu.
• Hides the UI elements used to add and remove data sources.
• Sets the location of the progress bar to top right position.
• Opens another browser tab for print and export operations.
• Hides search actions from the Toolbar and Tab Panel in the Report Preview.
• Uses the Report Wizard in the fullscreen mode.

'use client';
import ReportDesigner, { RequestOptions, DesignerModelSettings, PreviewSettings, DataSourceSetting, WizardSettings, Callbacks  } from 'devexpress-reporting-react/dx-report-designer';
import { ActionId } from 'devexpress-reporting/dx-reportdesigner';
import 'devextreme/dist/css/dx.light.css';
import '@devexpress/analytics-core/dist/css/dx-analytics.common.css';
import '@devexpress/analytics-core/dist/css/dx-analytics.light.css';
import 'devexpress-reporting/dist/css/dx-webdocumentviewer.css';
import 'ace-builds/css/ace.css';  
import 'ace-builds/css/theme/dreamweaver.css';  
import 'ace-builds/css/theme/ambiance.css';  
import '@devexpress/analytics-core/dist/css/dx-querybuilder.css';
import 'devexpress-reporting/dist/css/dx-reportdesigner.css';
import { ExportSettings, ProgressBarSettings, SearchSettings } from 'devexpress-reporting-react/dx-report-viewer';

function App() {
  const onCustomizeMenuActions = ({args }: {args : any}) => {
      // Hide the "NewReport" and "OpenReport" actions. 
      var newReportAction = args.GetById(ActionId.NewReport);
      if (newReportAction)
          newReportAction.visible = false;
      var openAction = args.GetById(ActionId.OpenReport);
      if (openAction)
          openAction.visible = false;
  }
  return (
    <ReportDesigner reportUrl="TestReport">
      <RequestOptions host="http://localhost:5000/" getDesignerModelAction="DXXRD/GetDesignerModel" />
      <Callbacks CustomizeMenuActions={onCustomizeMenuActions} />
      <DesignerModelSettings allowMDI={true}>
        <DataSourceSettings allowAddDataSource={false} allowRemoveDataSource={false}/>
        <PreviewSettings>
          <ExportSettings useSameTab={false}/>
          <ProgressBarSettings position='TopRight'/>
          <SearchSettings searchEnabled={false} />
        </PreviewSettings>
        <WizardSettings useFullscreenWizard={false} />
      </DesignerModelSettings>
    </ReportDesigner>       
  )
}

export default App

Run the application to see the results: