Load SharePoint Server reports

To render SharePoint Server reports in the Bold Reports® JavaScript Report Viewer, set the reportServerUrl, reportPath, and reportServiceUrl properties, as in the following code snippet:

    <div style="height: 100%; width: 100%;">
        <div style="height: 600px; width: 950px; min-height: 400px;" id="viewer"></div>
        <script type="text/javascript">
            $(function () {
                $("#viewer").boldReportViewer({
                    reportServiceUrl: "/api/SharePointReports",
                    reportPath: "http://<servername>/reportserver$instanceName/SSRSSamples/Territory Sales.rdl",
                    reportServerUrl: "http://<servername>/reportserver$instanceName"
                });
            });
        </script>
    </div>

You can view the Web API service used in the preceding code in the Reporting Service GitHub location. For more information, see Samples and demos. In SharePoint integrated mode, the reportServerUrl will be same as your site URL. The reportPath is relative to the Bold Reports® Report Server URL with the file extension.

How do I set forms credentials for SharePoint Server?

To set forms credentials for a SharePoint integrated SSRS Report Server, specify the ReportServerFormsCredential property in the Web API Controller OnInitReportOptions method. The JavaScript Report Viewer requires the forms credentials to connect with that server.

[NonAction]
public void OnInitReportOptions(ReportViewerOptions reportOption)
{
    //Add ReportServerFormsCredential for server
    reportOption.ReportModel.ReportServerFormsCredential = new BoldReports.Web.ReportServerFormsCredential("ssrs", "RDLReport1");
}

How do I set data source credentials for shared data sources?

To connect shared data sources with the database, add their credentials to the DataSourceCredentials property in the JavaScript Report Viewer Web API controller.

[NonAction]
public void OnInitReportOptions(ReportViewerOptions reportOption)
{
    //Add ReportServerFormsCredential and data source credentials
    reportOption.ReportModel.ReportServerFormsCredential = new BoldReports.Web.ReportServerFormsCredential("ssrs", "RDLReport1");
    reportOption.ReportModel.DataSourceCredentials.Add(new BoldReports.Web.DataSourceCredentials("<database>", "ssrs1", "RDLReport1"));
}

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

Build and run the application. Preview and edit the result using the following:

$(function () {
    $("#viewer").boldReportViewer({
                    reportServiceUrl: "https://demos.boldreports.com/services/api/SharePointReports",
                    reportPath: "http://<servername>/reportserver$instanceName/SSRSSamples/Territory Sales.rdl",
                    reportServerUrl: "http://<servername>/reportserver$instanceName"
                });
});
[NonAction]
public void OnInitReportOptions(ReportViewerOptions reportOption)
{
    //Add ReportServerFormsCredential and data source credentials
    reportOption.ReportModel.ReportServerFormsCredential = new BoldReports.Web.ReportServerFormsCredential("ssrs", "RDLReport1");
    reportOption.ReportModel.DataSourceCredentials.Add(new BoldReports.Web.DataSourceCredentials("<database>", "ssrs1", "RDLReport1"));
}

See also