Load SSRS Report Server reports

The Bold Reports^® Angular Report Viewer loads RDL reports from an SSRS Report Server. To render SSRS reports, set the reportServerUrl, reportPath, and reportServiceUrl properties, as in the following steps:

1. To create your first Angular reporting application in Angular CLI, refer to the Getting started section.

   If you need to know about the difference between reportServiceUrl and reportServerUrl, then refer to Difference between Report Service URL and Report Server URL.

2. Set the reportServerUrl API on Bold Reports^® Report Viewer with WebServiceURL. Open the App.js or app.component.ts and replace the following code example:

   <bold-reportviewer id="reportViewer_Control" [reportServiceUrl] = "serviceUrl" [processingMode] = "Remote" [reportServerUrl] = "serverUrl">
   </bold-reportviewer>

   import { Component } from '@angular/core';
   
   @Component({
       selector: 'ej-app',
       templateUrl: 'src/reportviewer/reportviewer.component.html',
       styleUrls: ['src/reportviewer/reportviewer.component.css']
   })
   
   export class ReportViewerComponent {
       public serviceUrl: string;
       public serverUrl: string;
   
       constructor() {
           this.serviceUrl = 'https:localhost:7941/api/ReportViewer';
           this.serverUrl = 'http://<servername>/Reports_SSRS';
       }
   }

   The Web Service URL should be set as reportServerUrl in the report viewer configuration. You can find the Web Service URL in the Reporting Services Configuration Manager under the Web Service URL section.

3. Set the report path for loading the reports from the SSRS Report Server. The report path should be in the format of /folder name/report name. Open the app.component.ts and replace the following code example:

   <bold-reportviewer id="reportViewer_Control" [reportServiceUrl] = "serviceUrl" [processingMode] = "Remote" [reportServerUrl] = "serverUrl" [reportPath]="reportPath">
   </bold-reportviewer>

   import { Component } from '@angular/core';
   
   @Component({
       selector: 'ej-app',
       templateUrl: 'src/reportviewer/reportviewer.component.html',
       styleUrls: ['src/reportviewer/reportviewer.component.css']
   })
   
   export class ReportViewerComponent {
       public serviceUrl: string;
       public reportPath: string;
       public serverUrl: string;
   
       constructor() {
           this.serviceUrl = 'https:localhost:7941/api/ReportViewer';
           this.serverUrl = 'http://<servername>/Reports_SSRS';
           this.reportPath = '/BoldReports/Territory Sales';
       }
   }

You can find the report path in the SSRS Report Server by navigating to the path of the report to be loaded.

How do I set network credentials for SSRS?

To set network credentials for SSRS, specify the ReportServerCredential property in the Web API Controller OnInitReportOptions method. The Angular Report Viewer requires the network credentials to load the specified report from the SSRS Report Server.

[NonAction]
public void OnInitReportOptions(ReportViewerOptions reportOption)
{
    //Add SSRS Report Server credential
    reportOption.ReportModel.ReportServerCredential = new System.Net.NetworkCredential("ssrs", "RDLReport1");
}

If you are facing problem to access the SSRS Report server reports, you can refer How to provide the permission for user to access the SSRS Report Server reports.

Set data source credential for shared data sources

The SSRS Report Server does not provide options to get credential information of the report data source deployed on the SSRS server. If the report has any data source that uses credentials to connect with the database, specify the DataSourceCredentials for each report data source in the Report Viewer Web API controller to establish the database connection.

[NonAction]
public void OnInitReportOptions(ReportViewerOptions reportOption)
{
    //Add SSRS Report Server and data source credentials
    reportOption.ReportModel.ReportServerCredential = new System.Net.NetworkCredential("ssrs", "RDLReport1");

    reportOption.ReportModel.DataSourceCredentials.Add(new BoldReports.Web.DataSourceCredentials("<database>", "<username>", "<password>"));
}

Data source credentials should be added to the shared data sources that do not have credentials in the connection strings.

Change data source connection string

You can change the connection string of a report data source before it is loaded in the Angular Report Viewer. The DataSourceCredentials class provides the option to set and update the modified connection string as in the following code snippet:

        [NonAction]
        public void OnInitReportOptions(ReportViewerOptions reportOption)
        {
            reportOption.ReportModel.DataSourceCredentials.Add(new BoldReports.Web.DataSourceCredentials("<database>", "<username>","<password>","Data Source=<instancename>;Initial Catalog=<database>;"));
        }

The previous code shows an option to change the connection string only, but the class provides multiple options to change data source information. To learn more, refer to the DataSourceCredentials class.

See also

• Does Bold Reports^® Report Viewer use SSRS Report processing?