Category / Section
How to add PostGreSQL custom data-extension for Web Report Designer
1 min read
The Syncfusion Web Report Designer has a support to access the custom data extension.
You can the below steps to add the PostGreSQL DataExtension sample in our WebReportDesigner sample using Angular application.
1.Add Report Data Extension in html file as shown in below code example.
<ej-reportdesigner id="designer" [serviceUrl] = "serviceUrl" [reportDataExtensions]="reportDataExtension" style="width: 100%;height: 600px"> </ej-reportdesigner>
2.Add the PostGreSQL extension in component.ts file as shown in below code example.
import { Component } from '@angular/core'; import {PSQLDataSource } from './extension/psql.data'; const PSQL = 'PSQLDataSource'; window[PSQL] = PSQLDataSource; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'reportdesignerapp'; public serviceUrl: string; public reportDataExtension: any; constructor() { this.serviceUrl = 'http://localhost:53803/api/Home'; this.reportDataExtension =[{ className: 'PSQLDataSource', name: 'PostgreSQL', imageClass: 'e-reportdesigner-datasource-psql', displayName: 'PostgreSQL' }]; } }
2. Step3: Add the PostGreSQL Extension project reference to our Core API sample as shown in below snap:
Step4: Add the Configuration section in AppConfig file as shown in below code example.
App.config
<?xml version="1.0" encoding="utf-8"?> <configuration> <configSections> <section name="ReportingExtensions" type="Syncfusion.Reporting.Extensions.Configuration.Extensions, Syncfusion.Reporting.Web" allowLocation="true" allowDefinition="Everywhere" /> </configSections> <ReportingExtensions> <DataExtension> <Extension Name="PostgreSQL" Assembly="Syncfusion.Reporting.DataExtensions.PostgreSQL" Type="Syncfusion.Reporting.DataExtensions.PostgreSQL.PostgreSQLDataExtension"/> </DataExtension> </ReportingExtensions> </configuration>
Output snap:
Samples:
Angular: https://www.syncfusion.com/downloads/support/directtrac/general/ze/reportdesignerapp1125487940.zip
Core API: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ReportSample_core128964247.zip