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 theserviceUrl
andfilterDataConnectors
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
After configuring filterDataConnectors
You can download a sample Angular application demonstrating the filterDataConnectors
configuration from the link below.