Report Viewer (angular 2) - Report Server

[Bruno]

Hello, I'm trying to implement report viewer on angular 2 that connects to the report server.

But I'm looking into the documentation but I have not been able to implement it.

On angular 2 i created an empty project following your guide, but how do i link it to my server report?

my angular app html:

ts:

In localhost I implemented the controller report.

my controller report in lcoalhost:

But it does not work. I would like to know how to do it

[Yuvaraj Devarajan]

Hi Bruno, 

  

Thanks for contacting Syncfusion Support. 

  

We have prepared a ReportViewer Angular 2 sample with shared code snippet in-order to load the report from Syncfusion ReportServer and its working properly at our end. So, can you please share the issue reproducible screenshot or video to validate the mentioned problem at our end.   

  

And also, we have prepared Angular 2 and ReportService sample which can be downloaded from below location, 

Angular 2:http://www.syncfusion.com/downloads/support/directtrac/general/ze/Angular2Sample1207742205.zip 

Reporting Service: http://www.syncfusion.com/downloads/support/directtrac/general/ze/ReportingService-303953116.zip 

  

Please refer to the below UG documentation link for more detail, 

https://help.syncfusion.com/angular/reportviewer/getting-started#load-ssrs-server-reports 

https://help.syncfusion.com/report-platform/report-platform-sdk/reportviewer/javascript#load-report-server-report 

  

You can obtain the Angular 2 ReportViewer samples from the below build installed location, 

%userprofile%\AppData\Local\Syncfusion\EssentialStudio\version\ JavaScript\ng2 app 

  

Regards, 

Yuvaraj D. 

[Ivana Stefanoska]

Hello,

Could you please provide us working sample of Report Viewer in Angular 2 that connects to the Report Server?
This part is not well covered in your documentation. Also, there aren't samples in Report Platform SDK Samples with Angular 2.

The one you provided here is not working.

Ivana

[Yuvaraj Devarajan]

Hi Ivana, 

Thanks for contacting Syncfusion support. 

In ReportServer and ReportSDK older version, we have used external WebAPI service (“ReportServerExt.cs”) to load the report from Syncfusion ReportServer but in latest version we have provided an embedded WebAPI service in ReportServer to load the RDL file using new API “ServiceAuthorizationToken” property. So we are trying to load the report from ReportServer using doAjax post call in angular platform and we are getting some error while initializing the HTTP request in Angular component.  

As of now, you can  load the Report from ReportServer using Reportserver extension WebAPI file. So, please specify the ReportServer URL path in “ReportServerUrl” property in control render page and specify the ReportServer login credential in WebAPI “OnInitReportOptions” method as shown in below code example, 

Component.ts, 

    constructor() {         

        this.serviceUrl = 'http://localhost:3994/api/ReportApi';  

        this.serverUrl = 'http://reportserver.syncfusion.com:80/';  

        this.reportPath = '/Sample Reports/Grouping Aggregate'; 

    } 

WebAPI: 

public void OnInitReportOptions(ReportViewerOptions reportOption) 

        { 

            reportOption.ReportModel.ReportingServer = new ReportingServerExt(); 

            reportOption.ReportModel.ReportServerCredential = new System.Net.NetworkCredential("guest", "demo"); 

        } 

  

We have prepared a sample and it can be downloaded from below location, 

Angular: http://www.syncfusion.com/downloads/support/directtrac/general/ze/Angular1161056050.zip  

Service: http://www.syncfusion.com/downloads/support/directtrac/general/ze/ReportServerService-1448095296.zip  

Regards, 

Yuvaraj D. 

[Ivana Stefanoska]

Hi,

Thank you for your response. It seems that the problem is not with Angular platform, but with the latest version of Syncfusion Report Server.

We are having an issue using the latest version of Report Server and ReportSDK,  even in ASP.NET MVC application with Report Viewer.

When we try to use Syncfusion Report Server installed and hosted in our server, loading of reports fails with the exception given below:

Sf_Exception - System.Exception: System.InvalidOperationException: Client found response content type of 'text/html', but expected 'text/xml'.

I specify the  ReportServer login credentials in WebAPI “OnInitReportOptions” method. You can find our ReportServerService implementation in attachment.

In our MVC application razor page we have the following code:

  @(Html.EJ().ReportViewer("reportsample")

                    .ReportServiceUrl(@"http://localhost:3964/api/ReportApi")

                    .ReportServerUrl(@*Our Syncfusion Report Server URL*@)

                    .ReportPath("/Sample Reports/UserLoginHistories")

        )

Instead of using our ReportServerService implementation, I tried using the version from your sample with “ReportServerExt.cs”. I just changed the Network and DatabaseCredentials in WebAPI “OnInitReportOptions. The MVC application part is the same.

This way, it works fine, the report is displayed. This means that our Network and Database credentials are correct as well as our Syncfusion Report Server installation.

What's the problem with the latest version of Report Server?

Regards,
Ivana

Attachment: Reporting_Service_98a05f9.rar

[Mahendran Shanmugam]

Hi Ivana, 

In ReportServer and ReportSDK older version, we have used external WebAPI service (“ReportServerExt.cs”) to load the report from Syncfusion ReportServer.  But in latest version we have provided an embedded WebAPI service in ReportServer to load the RDL file using new API “ServiceAuthorizationToken” property for ASP.NET MVC platform. So we can specifying the ServiceAuthorizationToken and ReportServiceUrl instead of passing the “ReportServerUrl” at your end as shown in below code example.   

Viewer.cshtml: 

<body style="overflow: hidden; position: static; margin: 0px; padding: 0px; width: 100%; height: 100%"> 

    @{ 

        var controller = ViewContext.Controller as RDLReportSample.Controllers.ReportViewerController; 

        var apiToken = controller.GenerateToken("http://reportserver.syncfusion.com/", "guest", "demo"); 

    } 

        <div style="width:100%; height:100%; position:absolute;"> 

            @(Html.EJ().ReportViewer("reportsample") 

                        .ServiceAuthorizationToken(@apiToken) 

                        .ReportServiceUrl(@"http://reportserver.syncfusion.com/ReportService/api/Viewer") 

                        .ReportPath("/Sample Reports/Sales Order Detail") 

                        .Parameters(param => { param.Name("SalesOrderNumber").Labels(new List<string>() { "SO50751" }).Values(new List<string>() { "SO50751" }).Add(); }) 

            ) 

        </div> 

    @(Html.EJ().ScriptManager()) 

</body> 

Controller: 

public class ReportViewerController : Controller 

    { 

        public ActionResult Viewer() 

        { 

            return View(); 

        } 

 

        public string GenerateToken(string serverUrl, string userName, string password) 

        { 

            using (var client = new HttpClient()) 

            { 

                client.BaseAddress = new Uri(serverUrl); 

                client.DefaultRequestHeaders.Accept.Clear(); 

 

                var content = new FormUrlEncodedContent(new[] 

                { 

                new KeyValuePair<string, string>("grant_type", "password"), 

                new KeyValuePair<string, string>("username", userName), 

                new KeyValuePair<string, string>("password", password) 

                  }); 

 

                var result = client.PostAsync("/api/Token", content).Result; 

                string resultContent = result.Content.ReadAsStringAsync().Result; 

                var token = JsonConvert.DeserializeObject<Token>(resultContent); 

 

                return token.token_type + " " + token.access_token; 

            } 

        } 

    } 

 

    public class Token 

    { 

        public string access_token { get; set; } 

 

        public string token_type { get; set; } 

 

        public string expires_in { get; set; } 

 

        public string userName { get; set; } 

 

        public string serverUrl { get; set; } 

 

        public string password { get; set; } 

    } 

} 

 

 

For Angular Sample: 

We are trying to load the report from Syncfusion ReportServer by specifying the ServiceAuthorizationToken and ReportServiceUrl using doAjax post call in angular platform, but we are facing error while initializing the HTTP request in Angular component. So we can use the external WebAPI service (“ReportServerExt.cs”) to load the report from Syncfusion ReportServer in Angular platform. In previous update, we have shared a sample to load the Report from Syncfusion ReportServer using external WebAPI(“ReportServerExt.cs”). 

Regards, 

Mahendran S. 

[Ivana Stefanoska]

Hello,

For MVC Sample: 
Let me repeat again what we are trying to achieve.
We have Syncfusion Report Server installed on our own server and we are trying to load reports from there. That means we DON"T WANT to use YOUR report server url("http://reportserver.syncfusion.com/), but our own.

If I generate token in the same way you do, using our report server url, username and password, and pass it using ServiceAuthorizationToken  it give us the following error:

Sf_Exception - System.Exception: System.InvalidOperationException: Client found response content type of 'text/html', but expected 'text/xml'.
How will you explain this?


Furthermore, what if we need to set DataSourceCredentials along with the above mentioned NetworkCredentials in the token? How can we set these credentials using ServiceAuthorizationToken?


 For Angular Sample: 

Does this mean that the latest version of ReportServer and Report Platform SDK with an embedded WebAPI service, can not be used in Angular? Only the older one using external WebAPI(“ReportServerExt.cs”)?
When do you plan to resolve this error with the latest version of Report Server? 


Regards,
Ivana

[Ivana Stefanoska]

Hello Syncfusion Team,

Could you please answer my last question from 2 weeks ago?

Thanks in advance,
Ivana S.

[Mahendran Shanmugam]

Hi Ivana,  

Sorry for the Delay, 

We have Syncfusion Report Server installed on our own server and we are trying to load reports from there. That means we DON"T WANT to use YOUR report server url("http://reportserver.syncfusion.com/), but our own. If I generate token in the same way you do, using our report server url, username and password, and pass it using ServiceAuthorizationToken  it give us the following error:  Sf_Exception - System.Exception: System.InvalidOperationException: Client found response content type of 'text/html', but expected 'text/xml'. How will you explain this?	We have checked the mentioned problem in ReportViewer sample and it working properly at our end. We suspect the mentioned problem occurs when you have referred the latest version Essential studio build assembly in your application and in latest Essential studio version ("16.1.0.24"), we have marked the ReportServer class as obsolete. So we request you to install the latest Report Platform build (2.3.0.77) instead of Essential studio build, in which you can find the assembly in Report SDK folder and refer that assembly file, Script in your application to avoid the mentioned problem at your end.
Furthermore, what if we need to set DataSourceCredentials along with the above mentioned NetworkCredentials in the token? How can we set these credentials using ServiceAuthorizationToken?	Datasource credential detail are handled internally in embedded WebAPI hosted in our ReportServer. So, we don’t require to specify the datasource credential detail of the report in ServiceAuthorizationToken.
For Angular Sample:  Does this mean that the latest version of ReportServer and Report Platform SDK with an embedded WebAPI service, can not be used in Angular? Only the older one using external WebAPI(“ReportServerExt.cs”)? When do you plan to resolve this error with the latest version of Report Server?	we have tried to load the RDL file from ReportServer using new API “ServiceAuthorizationToken” property in Angular ReportViewer sample. But we are still facing some issue when get the “ServiceAuthorizationToken” property in Angular application. So we have logged this as feature request and it will be included in our upcoming ReportPlatform release, which is expected to be available by end of May, 2018.

Regards, 

Mahendran S.