Report Designer Client-Side Configuration in React Applications
- 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, DataSourceSettings, WizardSettings, Callbacks } from 'devexpress-reporting-react/dx-report-designer';
import { ActionId } from 'devexpress-reporting/dx-reportdesigner';
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
Use the ReportDesignerSettingsBase class in you application. Add the code that assigns the settings to the model. The controller method returns the model to the client for rendering.
The following code is a custom controller for the Report Designer component. It processes settings passed from the client and assigns them to the model:
using DevExpress.AspNetCore.Reporting.ReportDesigner;
using DevExpress.AspNetCore.Reporting.ReportDesigner.Native.Services;
using DevExpress.XtraReports.Web.ReportDesigner;
using Microsoft.AspNetCore.Mvc
// ...
public class CustomReportDesignerController : ReportDesignerController {
public CustomReportDesignerController(IReportDesignerMvcControllerService controllerService) : base(controllerService) {
}
[HttpPost("[action]")]
public IActionResult GetDesignerModel(
[FromForm] string reportUrl,
[FromForm] ReportDesignerModel designerModelSettings,
[FromServices] IReportDesignerClientSideModelGenerator modelGenerator) {
var model = modelGenerator.GetModel(reportUrl, null, ReportDesignerController.DefaultUri, WebDocumentViewerController.DefaultUri, QueryBuilderController.DefaultUri);
model.Assign(designerModelSettings);
return DesignerModel(model);
}
}
Run the application to see the results: