Articles in this section
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: 

 

extension  

 

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:

output

 

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

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied