Reporting for Angular

• Jul 18, 2024
• 6 minutes to read

The topics in this section describe how to create reporting applications based on the Angular framework.

Tip

Review the following topic for code samples: Angular and ASP.NET Core Reporting Best Practices.

DevExpress Web Reporting controls are composed of DevExtreme UI components. Angular versions supported by the DevExtreme Component Suite are listed in the following help topic: Supported Versions.

Document Viewer and Report Designer for Angular require Angular v16 or later.

Document Viewer

The native Angular Document (Report) Viewer does not rely on the Knockout.js library. This allows for easier extensibility, better typing, and the capability to work with Angular templates. You can register your own Angular components as Report Viewer templates. Review the following topic for an example of Angular template usage for customization: A Custom Editor for a Custom Parameter Type.

Quick Start

• Use Visual Studio Templates to Create an Angular Application with a Document Viewer
• Create an Angular Front-End Application with a Document Viewer

Customization

• Document Viewer Client-Side Configuration in an Angular Application
• Customize the Document Viewer Toolbar in an Angular Application
• Customize the Document Viewer Tab Panel in Angular Application
• Specify Parameter Values in an Angular Reporting Application
• ASP.NET Core Reporting Best Practices (Angular Front-End)
• Tasks and Solutions for ASP.NET Core Applications
• A Custom Editor for a Custom Parameter Type

• A general technique that allows you to customize the UI elements in Reporting components: Use Custom HTML Templates.

Client-Side API

Client Object

Use the JSReportViewer class to access the client-side API in Angular applications.

Events

Client-side events in Angular are handled with callbacks.

Event names and data in event arguments passed to the Angular callback handler functions are the same as events in an ASP.NET Core application specified by WebDocumentViewerClientSideEventsBuilder methods.

The following code demonstrates how to use the dx-report-viewer component in a View. The code hides the Print and PrintPage commands in the toolbar, disables asynchronous search, and creates a Print button.

app.component.html

<div>  
  <button (click)="print()"><span>Print</span></button>  
</div> 

 <div>
    <dx-report-viewer [reportUrl]="reportUrl" height="800px" cssClass='myViewer'>
        <dxrv-request-options [invokeAction]="invokeAction" [host]="hostUrl"></dxrv-request-options>
        <dxrv-tabpanel-settings width="500" position="Left"></dxrv-tabpanel-settings>
        <dxrv-export-settings [useSameTab]="false" [useAsynchronousExport]="false"></dxrv-export-settings>
        <dxrv-search-settings [useAsyncSearch]="false"></dxrv-search-settings>
        <dxrv-callbacks 
        (CustomizeMenuActions)="CustomizeMenuActions($event)">
        </dxrv-callbacks>
    </dx-report-viewer>
</div>

app.component.ts

import { ActionId } from 'devexpress-reporting/dx-webdocumentviewer'
import { Component, Inject, ViewEncapsulation, ViewChild } from '@angular/core';
import { DxReportViewerComponent } from 'devexpress-reporting-angular';

@Component({
  selector: 'report-viewer',
  encapsulation: ViewEncapsulation.None,
  templateUrl: './report-viewer.html',
  styleUrls: [
    // ...
  ]
})
export class ReportViewerComponent {
    @ViewChild(DxReportViewerComponent, { static: false }) viewer: DxReportViewerComponent;
    reportUrl: string = "TestReport";
    // The built-in controller in the back-end ASP.NET Core Reporting application.
    invokeAction: string = '/DXXRDV';

    CustomizeMenuActions(event) {
        // Hide the "Print" and "PrintPage" actions. 
        var printAction = event.args.GetById(ActionId.Print);
        if (printAction)
            printAction.visible = false;
        var printPageAction = event.args.GetById(ActionId.PrintPage);
        if (printPageAction)
            printPageAction.visible = false;
    }

    print() {
        this.viewer.bindingSender.Print();
    }  


  constructor(@Inject('BASE_URL') public hostUrl: string) { }
}

Templates

You can customize Document Viewer appearance and functionality with Angular templates. Refer to the following help topic for an example: A Custom Editor for a Custom Parameter Type.

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:

• Document Viewer: devexpress-reporting/dx-webdocumentviewer
• Report Designer: devexpress-reporting/dx-reportdesigner

Report Designer

Quick Start

• Use Visual Studio Templates to Create an Angular Application with a Report Designer
• Create an Angular Front-End Application with a Report Designer

Customization

• Report Designer Client-Side Configuration in an Angular Application
• Custom Functions in the Expression Editor (Angular)
• ASP.NET Core Reporting Best Practices (Angular Front-End)
• Tasks and Solutions for ASP.NET Core Applications

• A general technique that allows you to customize the UI elements in Reporting components: Use Custom HTML Templates.

Client-Side API

Client Object

Use the JSReportDesigner class to access client-side API in Angular applications.

Events

Client-side events in Angular are handled with callbacks specified in Knockout bindings. For more information on Knockout bindings, review the following help topic: Report Designer Client-Side Configuration (Knockout Bindings)

Event names and data in event arguments passed to the Angular callback handler functions are the same as events in an ASP.NET Core application specified by ReportDesignerClientSideEventsBuilder methods.

The following code snippets demonstrate how to configure the Report Designer component in the client application:

report-designer.html

<div>
    <button (click)="open()"><span>Open</span></button>
</div>
<div>
    <dx-report-designer [reportUrl]="reportUrl" height="700px">
        <dxrd-request-options [getDesignerModelAction]="getDesignerModelAction" [host]="hostUrl"></dxrd-request-options>
        <dxrd-callbacks (CustomizeMenuActions)="CustomizeMenuActions($event)">
        </dxrd-callbacks>
        <dxrd-designer-model-settings [allowMDI]="true">
            <dxrd-datasource-settings [allowAddDataSource]="false" [allowRemoveDataSource]="false"></dxrd-datasource-settings>
            <dxrd-preview-settings>
                <dxrv-export-settings [useSameTab]="false"></dxrv-export-settings>
                <dxrv-progressbar-settings position="TopRight"></dxrv-progressbar-settings>
                <dxrv-search-settings [useAsyncSearch]="false"></dxrv-search-settings>
            </dxrd-preview-settings>
            <dxrd-wizard-settings [useFullscreenWizard]="false" [enableSqlDataSource]="false"></dxrd-wizard-settings>
        </dxrd-designer-model-settings>
    </dx-report-designer>
</div>

report-designer.ts

import { Component, Inject, ViewEncapsulation, ViewChild } from '@angular/core';
import { DxReportDesignerComponent } from 'devexpress-reporting-angular';
import { ActionId } from 'devexpress-reporting/dx-reportdesigner'

@Component({
  selector: 'report-designer',
  encapsulation: ViewEncapsulation.None,
  templateUrl: './report-designer.html',
  styleUrls: [
    // ...
  ]
})

export class ReportDesignerComponent {
    @ViewChild(DxReportDesignerComponent, { static: false }) designer: DxReportDesignerComponent;
    getDesignerModelAction = "DXXRD/GetDesignerModel";
    hostUrl = 'https://localhost:5001/';
    reportUrl = "TestReport";

    CustomizeMenuActions(event) {
        // Hide the "NewReport" and "OpenReport" actions. 
        var newreportAction = event.args.GetById(ActionId.NewReport);
        if (newreportAction)
            newreportAction.visible = false;
        var openAction = event.args.GetById(ActionId.OpenReport);
        if (openAction)
            openAction.visible = false;
    }

    open() {
        this.designer.bindingSender.OpenReport("TestReport");
    } 

}

Standalone Report Parameters Panel

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 part of the DevExpress Document Viewer component. Public properties and events are similar to the properties and events implemented in the Web Document Viewer component.

Quick Start

• Standalone Report Parameters Panel in Angular Applications

Client-Side API

Client Object

Use the JSReportParametersPanel class to access client-side API in Angular applications.

Events

Client-side events in Angular are handled with callbacks specified in Knockout bindings.

Event names and data in event arguments passed to the Angular callback handler functions are defined in the following classes:

• ReportParametersPanelClientSideEventsBuilder
• WebDocumentViewerClientSideEventsBuilderBase

The following code snippets demonstrate how to configure the Standalone Report Parameters Panel component in the client application:

parameters-panel.html

<dx-report-parameters-panel class="parametersPanel" [reportUrl]="reportUrl" height="100%" width="400px">
    <dxrpp-request-options [invokeAction]="invokeAction" [host]="host"></dxrpp-request-options>
    <dxrpp-callbacks (BeforeRender)="onBeforeRender($event)"></dxrpp-callbacks>
</dx-report-parameters-panel>

parameters-panel.ts

import { Component, Inject, ViewEncapsulation } from '@angular/core';
import * as $ from 'jquery';

@Component({
  selector: 'parameters-panel',
  encapsulation: ViewEncapsulation.None,
  templateUrl: './parameters-panel.html',
  styleUrls: [
    "../../../node_modules/devextreme/dist/css/dx.light.css",
    "../../../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css",
    "../../../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.light.css",
    "../../../node_modules/devexpress-reporting/dist/css/dx-webdocumentviewer.css"
  ]
})
export class ReportParametersPanelComponent {
  host = 'https://localhost:5001/';
  invokeAction = 'DXXRDV';
  reportUrl = 'ParameterPanelReport';

  onBeforeRender(event) {
      const sender = event.sender;
      const panel = sender.GetParametersModel();
      window['parametersPanel'] = panel;
      panel.buttons.push({
          text: 'Export',
          onClick: () => {
              const data = sender.SerializeParametersState();
              $.ajax({
                  url: `${this.host}Home/ExportWithParameters`,
                  method: 'POST',
                  data: { serializedParameters: data, reportUrl: this.reportUrl }
              }).then(result => {
                  alert(result.message)
              });
          }
      });
      panel.showButtons = true;
  }
}