Articles in this section
Category / Section

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

image_1.png

After configuring filterDataConnectors

image_4.png

You can download a sample Angular application demonstrating the filterDataConnectors configuration from the link below.

Download Sample Application

See Also

Was this article useful?
Like
Dislike
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied