Reporting for React - Customize Parameter Editor in the Web Document Viewer

This example demonstrates two ways to customize a parameter editor:

• Specify editor options for a default parameter editor.
• Use a template to replace a default editor for a specific parameter type.

Quick Start

Server

In the backend folder, run the following command:

dotnet run

The server uses http://localhost:5000. To debug the server, run the application within Visual Studio.

Client

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

npm install
npm run dev

Enter the following URL in your browser to view results: http://localhost:3000/.

Implementation Details

Use a Custom Editor Template

Use the DevExtreme TreeList component as a template for the Employee ID parameter's value editor:

const CustomParameterEditor = ({data}: {data: IEditorViewModel}) => {
    const dataSource = `${BACKEND_URL}/Home/ListEmployees`;
    const columns = [{ dataField: "name", caption: "Name" }, { dataField: "title", caption: "Title" }];

    const onSelectionChanged = (e: any) => {
      if (e.selectedRowsData.length > 0) {
        var selectedEmployeeID = e.selectedRowsData[0].id;
        parametersModel.p_employeeID = selectedEmployeeID;
      }
    }

  return (
      <TreeList
          dataSource={dataSource}
          columns={columns}
          showBorders={true}
          selection={{ mode: 'single' }}
          selectedRowKeys={data.value}
          onSelectionChanged={onSelectionChanged}
      />
  );
};

To register the template, pass the template name and the template itself to the templateEngine.setTemplate method:

templateEngine.setTemplate('employeeID-custom-editor', CustomParameterEditor);

In the CustomizeParameterEditors event handler, set the header property to the template name for the p_employeeID parameter:

const onCustomizeParameterEditors = React.useCallback(({ args }: { args: any }): void => {
      if (args.parameter.name == "p_employeeID") {
          args.info.editor = { header: 'employeeID-custom-editor' };
      };
  }, []);

Customize a Standard Editor

Use the CustomizeParameterEditors event to change the display format and set validation rules for parameters. Check the parameter type and update settings accordingly:

• Use the extendedOptions property to specify display format in the value editor.
• Use the validationRules property to set rules to validate the value entered in the editor.

const onCustomizeParameterEditors = React.useCallback(({ args }: { args: any }): void => {
    if (args.parameter.type === 'System.DateTime') {
        args.info.editor = {...args.info.editor};
        args.info.editor.extendedOptions = {
            ...args.info.editor.extendedOptions,
            type: 'date',
            displayFormat: 'dd-MMM-yyyy'
        };
        args.info.validationRules = [{
            type: "range",
            min: new Date(1990, 0, 1),
            message: "No data available prior to the year 1990."
        }];
    };
}, []);

Files to Review

• page.tsx
• HomeController.cs

Documentation

• Reporting for React

More Examples

• Reporting for React - Add a Web Document Viewer to a React App
• Reporting for React - Customize Viewer Toolbar

Does this example address your development requirements/objectives?

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