Report Designer Client-Side Configuration in an Angular Application

• Jun 03, 2024
• 5 minutes to read

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

For information on how to create the Angular Single-Page Application (SPA) with an ASP.NET Core project that works as an API backend, review the following help topic: Use .NET CLI Template to Create a Reporting Angular App with Report Designer.

dx-report-designer

The following table lists dx-report-designer 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.

dxrd-request-options

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.

dxrd-callbacks

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

Tip

The tag name is dxrv-callbacks for the Viewer, dxrd-callbacks for the Designer. The name of the Designer Preview callback is the name of the Viewer callback prefixed with “Preview”:

<dx-report-designer [reportUrl]="reportUrl" height="calc(100vh - 90px)">
    <dxrd-callbacks (PreviewCustomizeExportOptions)="OnCustomizeExportOptions($event)">
    </dxrd-callbacks>
</dx-report-designer>

For a complete list of available events and details on how to use each event, refer to the following help topic: Report Designer’s Client-Side API.

Note

• The Report Designer passes only one argument (the $event object) to callback handlers. This argument contains sender and args properties.

• The sender object is the Report Designer’s JavaScript equivalent. It provides access to all available client-side methods.

dxrd-designer-model-settings

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.

The following code snippet specifies the AllowMDI Report Designer setting, and the UseFullscreenWizard and EnableSqlDataSource Report Wizard settings:

report-designer.html

<dx-report-designer [reportUrl]="reportUrl" height="700px" cssClass='myDesigner'>
    <dxrd-request-options [getDesignerModelAction]="getDesignerModelAction" [host]="hostUrl"></dxrd-request-options>
    <dxrd-designer-model-settings [allowMDI]="true">
        <dxrd-wizard-settings [useFullscreenWizard]="false" [enableSqlDataSource]="false"></dxrd-wizard-settings>
    </dxrd-designer-model-settings>
</dx-report-designer>

The following code is a sample controller in the ASP.NET Core backend application. For more information, review the following help topic: Report Designer Server-Side Configuration (ASP.NET Core).

ReportingControllers.cs

using DevExpress.AspNetCore.Reporting.QueryBuilder;
using DevExpress.AspNetCore.Reporting.QueryBuilder.Native.Services;
using DevExpress.AspNetCore.Reporting.ReportDesigner;
using DevExpress.AspNetCore.Reporting.ReportDesigner.Native.Services;
using DevExpress.AspNetCore.Reporting.WebDocumentViewer;
using DevExpress.AspNetCore.Reporting.WebDocumentViewer.Native.Services;
using DevExpress.DataAccess.Sql;
using DevExpress.XtraReports.Web.ReportDesigner.Services;
using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;
using System.Threading.Tasks;

namespace  ServerSideAspNetCoreReportingApp.Controllers {
    public class CustomReportDesignerController : ReportDesignerController {
        public CustomReportDesignerController(IReportDesignerMvcControllerService controllerService) : base(controllerService) {
        }
        [HttpPost("[action]")]
        public async Task<IActionResult> GetDesignerModel(
            [FromForm] string reportName,
            [FromServices] IReportDesignerModelBuilder reportDesignerModelBuilder) {
            var dataSources = new Dictionary<string, object>();
            var ds = new SqlDataSource("NWindConnectionString");

            // Create a SQL query to access the Products data table.
            SelectQuery query = SelectQueryFluentBuilder.AddTable("Products").SelectAllColumnsFromTable().Build("Products");
            ds.Queries.Add(query);
            ds.RebuildResultSchema();
            dataSources.Add("Northwind", ds);

            reportName = string.IsNullOrEmpty(reportName) ? "TestReport" : reportName;
            var designerModel = await reportDesignerModelBuilder
                .Report(reportName)
                .DataSources(dataSources)
                .BuildModelAsync();

            return DesignerModel(designerModel);
        }
    }

    public class CustomQueryBuilderController : QueryBuilderController {
        public CustomQueryBuilderController(IQueryBuilderMvcControllerService controllerService) : base(controllerService) {
        }
    }

    public class CustomWebDocumentViewerController : WebDocumentViewerController {
        public CustomWebDocumentViewerController(IWebDocumentViewerMvcControllerService controllerService) : base(controllerService) {
        }
    }
}

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 dxrd-designer-model-settings is a nested component that includes the settings listed below:

dxrd-data-source-settings

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.

dxrd-preview-settings

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

dxrd-wizard-settings

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

dxrd-parameter-editing-settings

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

Start with an Angular Single-Page Application (SPA) with an ASP.NET Core backend created as described in the following help topic: Use .NET CLI Template to Create a Reporting Angular App with Report Designer.

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");
    } 

}

Run the application to see the results: