We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Report Viewer (angular 2) - Report Server

Thread ID:

Created:

Updated:

Platform:

Replies:

131579 Jul 17,2017 07:48 PM UTC May 10,2018 12:27 PM UTC Report Platform 8
loading
Tags: Report Viewer
Bruno
Asked On July 17, 2017 07:48 PM UTC

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:

https://ibb.co/kdokqF

ts:

https://ibb.co/iFnjja


In localhost I implemented the controller report.

my controller report in lcoalhost:

https://ibb.co/nfQ9Hv


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


Yuvaraj Devarajan [Syncfusion]
Replied On July 18, 2017 06:20 AM UTC

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, 
  
Please refer to the below UG documentation link for more detail, 
  
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
Replied On April 24, 2018 07:40 AM UTC

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 [Syncfusion]
Replied On April 24, 2018 11:45 AM UTC

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, 

Regards, 
Yuvaraj D. 


Ivana Stefanoska
Replied On April 25, 2018 07:32 AM UTC

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 [Syncfusion]
Replied On April 26, 2018 10:47 AM UTC

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
Replied On April 26, 2018 01:56 PM UTC

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
Replied On May 10, 2018 06:42 AM UTC

Hello Syncfusion Team,

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

Thanks in advance,
Ivana S.



Mahendran Shanmugam [Syncfusion]
Replied On May 10, 2018 12:27 PM UTC

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;