angularjs nginclude to a ReportServer url

Question

I am part of a team developing a custom SharePoint application that uses AngularJS and SSRS Reports. Basically, the application allows the user to select a report, select a set of parameters, and then view the report within the site/app.

Everything worked fine until we turned on the report ToolBar. At that point, the report stopped rendering. Only the toolbar was visible.

Here's what we are doing:

The html for the part of the app that displays the report:

<section class="left-panel report-view-panel ssrsReport show">
    <h1>{{CurrentReport.Title}}</h1>
    <button class="btn-report-close" ng-click="closeReport()"  type="button">Close</button>
    <div class="scroll-list">
        <figure class="report">
            <div class="sample-report">
                <div ng-include='CurrentReportURL'></div>
            </div>
        </figure>
    </div>
</section>

In the controller javascript, we build out the report server url (CurrentReportURL) to be something like:

http://ourreportserver.com/_vti_bin/ReportServer?http://ourreportserver.com/Our%20Reports/Report1.rdl&rs:Command=Render&rc:Toolbar=false&rc:Parameters=false&Param1=41001&Param2=08&Param3=0

We're telling it to render the report, hiding the toolbar and hiding the parameter selection. This works fine. The report renders as expected.

However, changing the url to this:

http://ourreportserver.com/_vti_bin/ReportServer?http://ourreportserver.com/Our%20Reports/Report1.rdl&rs:Command=Render&rc:Toolbar=true&rc:Parameters=false&Param1=41001&Param2=08&Param3=0

causes only the toolbar to render. No report. If I copy that same url and just open it in a browser window the report renders as expected.

I dug a little deeper and looked at both scenarios using Chrome and Chrome's Developer Tools Network tab. There were several differences in the calls that were made between the url in the ng-include and the url in the browser window. However, the one that stood out the most was a POST to RSViewerPage.aspx with all of the report viewer and report parameters converted to the appropriate ReportViewer parameters. (I'd post that actual link, but SO is telling me that I need a reputation of 10 to do that).

I am getting the same results in Chrome and IE10.

I'm looking for some guidance as to why the ng-include version is not making the POST? I believe this POST has something to do with the SSRS Session that is only tracked with the toolbar is on, but I'm really not sure.

Any guidance would be greatly appreciated!

Answer 1

I'm about to start integrating SSRS into an angularjs app, I was thinking of using an iframe and changing the src attribute of the iframe to the url of the selected report.

I didn't even consider trying to use ng-include, thinking that the html returned by ssrs would be designed to work with the asp.net postback/viewstate model. By using an iframe this postback/viewstate model would be isolated in an "island" on the page and would not affect the parent container.

Christian

Answer 2

Try

<div ng-include src="CurrentReportURL"></div>

Is this working in any browser?

If it works in chrome but not IE make sure you are following the angular IE restrictions section.

ex:

  <!--[if lte IE 8]>
      <script>
        document.createElement('ng-include');
      </script>
  <![endif]-->

Also, for dynamic urls, check out: this link