How to Customize Data Connectors in the Bold Reports Report Designer for Angular Applications

Published:

Updated:

In Bold Reports, data connectors act as bridges between the Report Designer and various data sources. This guide explains how to customize these connectors in an Angular application by controlling their visibility to end users. By filtering the available connectors, you can:

Simplify the data source selection process
Enhance usability
Improve security
Optimize performance to suit your application’s specific needs

Step-by-Step Instructions

Step 1: Configure the `filterDataConnectors` Property in `app.component.ts`

Within the <bold-reportdesigner> component, add the serviceUrl and filterDataConnectors properties as shown below:

<bold-reportdesigner
    id="reportDesigner_Control"
     [serviceUrl]="serviceUrl"
     [filterDataConnectors]="filterDataConnectors"
    style="position: absolute;height: 550px; width: 1250px;">
    </bold-reportdesigner>

Step 2: Bind the Report Designer in `app.component.html`

Use the filterDataConnectors property to define which connectors should be shown in the designer.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  public serviceUrl: string;
  public filterDataConnectors: string[];

  constructor() {
    this.serviceUrl = "https://demos.boldreports.com/services/api/ReportingAPI";
    this.filterDataConnectors = ["Csv", "Excel", "JSON", "MariaDB", "MemSQL", "MongoDB", "MySQL", "ODBC", "OData", "ORACLE", "PostgreSQL", "Snowflake", "WebAPI", "XML"];


  }

Step 3: Verify the Output

After applying the changes, the Report Designer will display only the specified data connectors in the UI, excluding any unlisted connectors like Microsoft SQL Server.

Before configuring filterDataConnectors