Error when loading the report using the local Web API service.

[Duong Vinh Binh]

Dear Syncfusion.

I have downloaded the application on Report Platform at the address: https://github.com/syncfusion-reports/angular-docs-samples.

After extracting, installing and rebuilding the application is run well. However, after changing the Online Web API service to Local Web API service, the application issues an error message: 

"main.9bc4c6856d0c0804cdb5.js:1 ERROR TypeError: Cannot read property 'errorInfo' of null

    at Object.success (main.9bc4c6856d0c0804cdb5.js:1)

    at u (polyfills.ccfd83b9a156e9377a70.js:1)

    at Object.fireWith [as resolveWith] (polyfills.ccfd83b9a156e9377a70.js:1)

    at E (polyfills.ccfd83b9a156e9377a70.js:1)

    at XMLHttpRequest.<anonymous> (polyfills.ccfd83b9a156e9377a70.js:1)

    at XMLHttpRequest.D (polyfills.ccfd83b9a156e9377a70.js:1)

    at e.invokeTask (polyfills.ccfd83b9a156e9377a70.js:1)

    at Object.onInvokeTask (main.9bc4c6856d0c0804cdb5.js:1)

    at e.invokeTask (polyfills.ccfd83b9a156e9377a70.js:1)

    at t.runTask (polyfills.ccfd83b9a156e9377a70.js:1)"

Changes in code:

https://reports.syncfusion.com/demos/services/api/ReportViewer --> http://localhost:40986/ReportService/api/Viewer

~/Resources/docs/sales-order-detail.rdl  -->  ~/SampleReports/sales-order-detail.rdl

I have done the host Syncfusion Report Server as website in IIS at port 40986.

Looking forward to receiving Syncfusion support.

Thank you very much.

Illustrating images:

1. Code

2. Public folder structure

3. IIS:

4. Run application 

[Vinoth Srinivasan]

Hi Duong, 

Thanks for your interest in Syncfusion components. 

We suspect that the mentioned issue occurs when your Web API service don’t have access for external application. So, could you please confirm whether you have specified the Enable origin for Web API service application or not. Please find the below help documentation for how to enable the origins for ASP.NET and ASP.NET Core Web API services. 

ASP.NET Web API service: https://reports.syncfusion.com/documentation/angular/report-viewer/create-aspnet-web-api-service/#enable-cross-origin-requests 

ASP.NET Core Web API service: https://reports.syncfusion.com/documentation/angular/report-viewer/create-aspnet-core-web-api-service/#enable-cross-origin-requests 

Regards, 

Vinoth S. 

[Duong Vinh Binh]

Thanks Syncfusion.

Thank you Vinoth Srinivasan,

I will try to find out more about what you have supported.

thank you very much.

[Vinoth Srinivasan]

Hi Duong, 

 

Thanks for you update. If you still face any issue, then could you please confirm whether you are using any customized serialization for your Web API. 

 

Also, Report Viewer component will work properly with default case serializer only. If you are using the camel serializer for your application, then we will have a problem in processing API result. We must use the default resolver for ReportViewer report service API. You can make use of the below to resolve this issue in case if you are having the camel case property serializer.  

 

config.Formatters.JsonFormatter.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver(); 

 

 

 In the below code snippet, we have enabled the default serialization resolve using attribute for ReportViewer API alone, 

 

public class DefaultCaseControllerConfigAttribute : Attribute, System.Web.Http.Controllers.IControllerConfiguration 

    { 

        public void Initialize(System.Web.Http.Controllers.HttpControllerSettings controllerSettings, System.Web.Http.Controllers.HttpControllerDescriptor controllerDescriptor) 

        { 

            var formatter = controllerSettings.Formatters.OfType<System.Net.Http.Formatting.JsonMediaTypeFormatter>().Single(); 

            controllerSettings.Formatters.Remove(formatter); 

 

            formatter = new System.Net.Http.Formatting.JsonMediaTypeFormatter 

            { 

                SerializerSettings = { ContractResolver = new Newtonsoft.Json.Serialization.DefaultContractResolver() } 

            }; 

 

            controllerSettings.Formatters.Add(formatter); 

        } 

    } 

 

[DefaultCaseControllerConfigAttribute] 

public class RreportApiController : ApiController, IReportController 

{ 

 

 

 

Regards, 

Vinoth S. 

[Duong Vinh Binh]

Dear  Vinoth Srinivasan (Syncfusion).

Thank you for your support.

I tried to follow what you instructed, including: reconfiguring the WebApiConfig and adding code in the Controller files. However, when running the application, there is no error message but it does not load the report. Then, I debuged with Fiddler Web, I saw the following information:

Again looking forward to your support.

Best regards

p/s: Send you 2 files that i have updated

Attachment: update_279d47d7.zip

[Vinoth Srinivasan]

Hi Duong, 

In our previous update we have requested details whether you are using customized serialization in your WebAPI, so please confirm on this. We suspect that the default serialization resolve work around has been not reflected properly at your end, so we request you to reconfigure the WebAPI with changes. Also, in your code you are throwing exception from “OnInitReportOptions” and “OnReportLoaded” method, please remove that line to render the report in ReportViewer. 

Regards, 

Vinoth S. 

[Duong Vinh Binh]

Dear  Vinoth Srinivasan (Syncfusion).

Thank you very much for your supports.

I followed the instructions and the application ran successfully.

Wish you and your family a lot of happiness!

Best regards.

[Vinoth Srinivasan]

Hi Duong, 

Thanks for your update. Please let us know if you require further assistance on this. 

Regards, 

Vinoth S. 

[Duong Vinh Binh]

Dear  Vinoth Srinivasan (Syncfusion).

I have 2 errors need to the your support :

1. Load reports connected by the Web API fails, an error "Unhandled exception has occurred during data set 'DataSet1' processing." (but when loading with Syncfusion's Report server, OK.).

2. Report Designer using Web API does not have a datasource "WebAPI" like Syncfusion's Report server.

Send you 2 files to check.

figure 1:

Load report with Web API

figure 2:

Report Designer using Web API 

 Syncfusion's Report server

I hope to receive the your support.

Best regards.

Attachment: code_and_report_90ed84c4.ZIP

[Vinoth Srinivasan]

Hi Duong Vinh Binh, 

Thanks for the update. 

Can you provide more details of your requirement how you are going to use our reporting tools with your development? If you are trying to make use of our component along with Report Server then we can able to provide the solution along with Report Server. 

Regards, 

Vinoth S. 

[Duong Vinh Binh]

Dear  Vinoth Srinivasan (Syncfusion).

I have 2 errors need to the your support :

1.

I have created 2 Web APIs according to your instructions, including: Report Viewer and Repor Designer. Both published APIs go to localhost, port 88.

http://localhost:88/report/api/Viewer

http://localhost:88/report/api/Designer

After that, I created a simple report, only 1 textbox and ran the application OK (report displayed).

Continue, I created a more complex new report (Use Syncfusion's Report server.), including 1 Grid with datasources as a Web API (http: // localhost: 88 / CMIS3 / Api / Test / SelectByID / PB0401) to get the data to fill in the columns of the Grid then the Error Report "Unhandled exception has occurred during data set 'DataSet1' processing. ".

I continue to change the new report downloaded from the report server (Sales Order Detail.rdl), then when I run the application is report another error "Unhandled exception has occurred during 'shared datasource' retrive." Debug sees the following error:

{"inProgress":"completed","isReportLoad":false,"errorInfo":{"Code":"RV0572","Message":"Unhandled exception has occurred during 'shared datasource' retrive.","Detail":"\rObject reference not set to an instance of an object.\r at Syncfusion.Report.Intenal.Server.ServerUtility.GetServiceUrl(String reportServerUrl, String version)\r at Syncfusion.Report.Intenal.Server.ReportService2005.SetReportingServer()\r at Syncfusion.Report.Intenal.Server.ReportService2005.GetSharedDataSourceDefinitions(List`1 references)\r at Syncfusion.Report.Intenal.Server.SqlReportingServer.GetSharedDataSourceDefinitions(List`1 references)\r at Syncfusion.Report.Intenal.Server.ServerReportProcessor.GetSharedDataSourceDefinitions(List`1 references)\r at Syncfusion.RDL.Data.ReportModel.UpdateSharedDataSource()\r at 

2. Report Designer using Web API (http://localhost:88/report/api/Designer) does not have a datasource "WebAPI" like Syncfusion's Report server and datasource connection string instructions with oracle.

I hope to receive the your support.

Thank you very much.

Best regards.

[Duong Vinh Binh]

Send you 2 files to check.

Attachment: Controllers_8b7f087b.zip

[Vinoth Srinivasan]

Hi Duong, 

 

Please find the below response for your queries. 

 

Query	Response
I continue to change the new report downloaded from the report server (Sales Order Detail.rdl), then when I run the application is report another error "Unhandled exception has occurred during 'shared datasource' retrive." Debug sees the following error:	We suspect that you are trying to load the local report which has been downloaded from ReportServer in your application. If the report contains shared datasource or shared dataset the issue will occur. So, we suggest you use intermediate service to render the server report. Please share the platform details in which you have developed your application, we will prepare a sample based on that.
2. Report Designer using Web API (http://localhost:88/report/api/Designer) does not have a datasource "WebAPI" like Syncfusion's Report server and datasource connection string instructions with oracle.	We don’t have option to show the Web API Datasoure in standalone Report Designer application but we can able to add the Web API Datasource in standalone Report Designer application using the custom data extension. We have prepared the WebReportDesigner sample with local WebAPI datasource and it can be downloaded from below location.  Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/MVCWebReportDesigner-891113677.zip    Please find the below standalone WebAPI sample.  WebAPI Extension: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DataExtension-2069956675.zip    Please 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:      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         Let us know if you need any clarification.

 

 

 

Regards, 

Vinoth S. 

[Duong Vinh Binh]

Thank you for your support.

I followed the steps that you guided and successfully built the MVCWebReportDesigner project. I created a report with data using the local WebAPI datasource. Results, allowing preview, edit report. However, when opening that report in another application, it is still not possible.

Dear Mr. Vinoth Srinivasan,

Allow me to state step by step that I need:

Step 1: Create a report with data using the local WebAPI datasource. For example: Example.rdl

Step 2: Allow viewing reports with data source using the local WebAPI datasource in another application (Angular); such as, in component: getting-started.component.ts

...

export class ReportViewerGettingStartedComponent {

  public serviceUrl: string;  

  public reportPath: string;

    constructor() {

        this.serviceUrl = 'http://localhost:88/report/api/Viewer';

        this.reportPath = '~/App_Data/Example.rdl';

    }

The results achieved in the above steps are:

In step 1, successful implementation.

In step 2, I have successfully implemented in simple reports, including items such as textbox, line, ... but for reports with data from Web API source, it has not been implemented yet.

With the above mentioned presentations, I look forward to continue receive your support.

Thanks again to Syncfusion Inc,

Thank you, Mr. Vinoth Srinivasan.

Best regards.

[Vinoth Srinivasan]

Hi Duong, 

 

Thanks for your update. 

 

Query	Response
Step 1: Create a report with data using the local WebAPI datasource. For example: Example.rdl	Yes, we can able to use the WebAPI Dataextension in Angular Report Designer application. Please find the below help documentation for how to use the WebAPI datasource extension in Angular Report Designer application.  https://www.syncfusion.com/kb/10627/how-to-add-web-api-custom-data-extension-for-web-report-designer
Step 2: Allow viewing reports with data source using the local WebAPI datasource in another application (Angular); such as, in component: getting-started.component.ts	If we are rendering the WebAPI Datasource report in standalone Angular Report Viewer application then we need to add the custom WebAPI datasource Extension in Web API service. You can use the WebAPI extension which you have used in your Report Designer application in the ReportViewer service application. Please refer the below steps to add the extension for Report viewer application.    1. If you are using the Core WebAPI service for Angular Report Viewer application then you can use the below steps to load the report.    Step1: Add the WebAPI Extension project reference to our Core API sample as shown in below snap:             Step2: 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="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>  </configuration>    2. If you are using the ASP.NET WebAPI service for Angular Report Viewer application then you can use the below steps to load the report.    Step1: Add the WebAPI Extension project reference to our ASP.NET WebAPI service sample as shown in below snap:      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>

 

 

Regards, 

Vinoth S. 

[Duong Vinh Binh]

Dear  Vinoth Srinivasan (Syncfusion).

Thank you for your reply.

I am sorry!

I tried to follow what you instructed, including: Configuration section in WebConfig file  and add the WebAPI Extension project reference to ASP.NET WebAPI service . However, when running the application, there is no error but it does not load the report, message: "Unhandled exception has occurred during data set 'DataSet1' processing.". 

So, in step 2 it has not been implemented yet.

I look forward to continue receive your support.

Thanks for your support.

Best regards.

Attachment: WebReport_66b7a156.zip

[Vinoth Srinivasan]

Hi Duong, 

We have validated your shared sample and we can see that the service project is in 4.5.1 framework and dataextension project in 4.5 framework. Due to this the issue has been occurred we suggest you use same work for both the projects to resolve this issue. 

Regards, 

Vinoth S.