Reporting for Angular - Create a Custom Editor for a Custom Parameter Type

This example creates a custom type for report parameters, implements serialization/deserialization logic, and implements a custom parameter editor. In this example, a custom email parameter type is implemented with email validation using the DevExtreme dxTextBox component.

Run the Project

Navigate to the CustomParameterEditor.Server folder and use the following command to restore dependencies and run the application:

cd CustomParameterEditor.Server
dotnet run

Two command prompts appear:

• The ASP.NET Core API project running
• The Angular CLI running the ng start command

Open your browser and navigate to the URL specified in the command output to see the result.

Implementation Details

1. Create a CustomParameterType class with a Value property. This class represents a custom parameter type that will be used in the report.

   using System;
   
   [TypeConverter(typeof(CustomParameterTypeConverter))]
   public class CustomParameterType {
       public string Value { get; set; }
       public override string ToString() {
           return Value;
       }
   }

   File to review: CustomParameterType.cs

2. Implement a CustomParameterTypeConverter converter to display a parameter value in a document.

   For the sample implementation, refer to the following file: CustomParameterType.cs

3. Implement a custom parameter serializer. A serializer is necessary to pass data from the client to the controller on the server and store the parameter value in report definition files.

   For the sample implementation, refer to the following file: CustomDataSerializer.cs

4. In the Program.cs file, register the CustomParameterType, an array of CustomParameterType, and the CustomDataSerializer:

   DevExpress.Utils.DeserializationSettings.RegisterTrustedClass(typeof(CustomParameterType));
   DevExpress.Utils.DeserializationSettings.RegisterTrustedClass(typeof(CustomParameterType[]));
   SerializationService.RegisterSerializer(CustomDataSerializer.Name, new CustomDataSerializer());

5. Add a parameter of a custom type to the report.

   //...
   Parameter customMailParameter = new Parameter {
       Description = "Custom Email Parameter",
       Name = "customMailParameter",
       ValueInfo = "SampleMail@example.com",
       Type = typeof(CustomParameterType),
       Visible = true
   };
   this.Parameters.Add(customMailParameter);
   // ....

   File to review: CustomParameterReport.cs

6. Configure the custom parameter editor in the CustomizeParameterEditors callback. Specify the custom editor template name and add validation rules:

   onCustomizeParameterEditors(event): void {
       const parameter = event.args.parameter;
       const info = event.args.info;
       if (parameter.type === 'CustomParameterType') {
           info.validationRules = info.validationRules || [];
           info.validationRules.push(
               { type: 'email', message: 'Email parameter value has invalid format.' });
           info.editor.header = "custom-parameter-text-editor";
       }
   }

   Files to review:

   • report-viewer.html
   • report-viewer.ts

7. Create a custom input component based on the DevExtreme dxTextBox component.

   Files to review:

   • custom-input-component.html
   • custom-input-component.ts

8. Define an ng-template and register it using the TemplateEngine service in the ngAfterViewInit method to make the custom editor available as custom-parameter-text-editor.

   report-viewer.html:

   <ng-template #myCustomInput let-data="data">
       <custom-input-component [data]="data"></custom-input-component>
   </ng-template>

   report-viewer.ts:

   @ViewChild('myCustomInput') myCustomInput!: TemplateRef<{ data: any }>;
   
   ngAfterViewInit(): void {
       this._templateEngine.register('custom-parameter-text-editor', this.myCustomInput);
   }

   Files to review:

   • report-viewer.html
   • report-viewer.ts

Files to Review

• CustomParameterType.cs
• CustomDataSerializer.cs
• CustomParameterReport.cs
• Program.cs
• report-viewer.html
• report-viewer.ts
• custom-input-component.html
• custom-input-component.ts

Documentation

• Custom Editor for Custom Parameter Type
• Use Report Parameters
• Tasks and Solutions for ASP.NET Core Applications

Does This Example Address Your Development Requirements/Objectives?

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