How to add Web API custom data-extension for Web Report Designer

2 mins read

The Syncfusion Web Report Designer has a support to access the custom data extension.

You can find the below steps to add the WebAPI DataExtension sample in our WebReportDesigner sample.

Step1: Add the WebAPI Extension project reference to our Web ReportDesigner sample as shown in below snap:

references

Step2: Add the Configuration section in WebConfig file as shown in below code example.

Web.config

  <configSections>
<section name="ReportingExtensions" type="Syncfusion.Reporting.Extensions.Configuration.Extensions, Syncfusion.Reporting.Web" allowLocation="true" allowDefinition="Everywhere" />
  <ReportingExtensions>
    <DataExtension>
      <Extension Name="WebAPI" Assembly="Syncfusion.Reporting.DataExtensions.WebAPI" Type="Syncfusion.Reporting.DataExtensions.WebAPI.WebAPIExtension">
        <Properties>
          <Add Key="QueryDesignerEnabled" Value="true"/>
          <Add Key="QueryFilterEnabled" Value="false"/>
          <Add Key="QueryExpressionEnabled" Value="false"/>
         <Add Key="QueryJoinerEnabled" Value="false"/>
          <Add Key="QueryColumnEdit" Value="false"/>
        </Properties>
      </Extension>
    </DataExtension>
  </ReportingExtensions>

Step3: Add ReportDataExtensions in our index.cshtml file as shown in below code example.

Index.cshtml:

    <div style="width:100%; height:100%; position:absolute;">
        @{Html.SF().ReportDesigner("designer").ServiceUrl("/api/DesignerAPI").ReportDataExtensions(ext => { ext.ClassName("WebAPIDataSource").Name("WebAPI").ImageClass("e-reportdesigner-datasource-webapi").DisplayName("WebAPI").Add(); }).Render();}
    </div>
    @(Html.SF().ScriptManager())

Using the above sample, you can pull the data from WebAPI datasource with query parameter to limit the data based on tenant name. Please find the below documentation to connect WebAPI datasource with query parameter,

https://help.syncfusion.com/report-platform/reportdesigner/web/how-to/web-api-datasource

https://help.syncfusion.com/js/reportdesigner/transforming-data/query-parameter

output