ActiveReports 8 Server SDK
Work with the HTML5 Viewer using Javascript
Show AllShow All
Hide AllHide All

Following are the options, methods and properties available to work with HTML5 Viewer using the Javascript.

Initializing HTML5 Viewer

  1. Copy and place GrapeCity.ActiveReports.Viewer.Html.js, GrapeCity.ActiveReports.Viewer.Html.min.js and GrapeCity.ActiveReports.Viewer.Html.css files at a suitable location near the target HTML page.
    Note: In ActiveReports 8 Server, these files are located in the ...\ActiveReports 8 Server\SDK\HTML5 Viewer.Source folder.
  2. In the target HTML page, add the references to the GrapeCity.ActiveReports.Viewer.Html.css, GrapeCity.ActiveReports.Viewer.Html.js and its following dependencies:
    • jQuery 1.9.0 or higher
    • Bootstrap 3.0
    • Knockout.js 2.3.0 or higher
    Note: You can obtain the dependencies like jQuery from Content Delivery Network (CDN) or copy them locally.
    HTML
    Copy Code
    <link rel="stylesheet" href="GrapeCity.ActiveReports.Viewer.Html.css" >
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js" type="text/javascript"></script>
    <script src="Scripts/GrapeCity.ActiveReports.Viewer.Html.js" type="text/javascript"></script>
    <script type="text/javascript">
    </script>
    
  3. In the target HTML page, add the DIV element that will contain the HTML5 Viewer.
    HTML
    Copy Code
    <div id="viewer" style="width:600px;height:480px;"></div>                                               
    
  4. Add the following code to initialize the HTML5 Viewer. The code might vary depending on the technology that you use to develop the HTML5 Viewer component. To learn how to get a security token for the reportService, see Get a Security Token.
    Javascript
    Copy Code
    $(function ()
    {
       var viewer = GrapeCity.ActiveReports.Viewer(
       {
          element: '#viewer',
          report: {
             id: "myreport"
    
          },
          
          reportService: {
              url: 'http://myar8server.com/ReportService.svc/json/', 
              securityToken: securityToken, 
              resourceHandler : 'http://myar8server.com/TemporaryResource.axd/'
          },
          uiType: 'desktop',
          documentLoaded: function reportLoaded()
          {
             console.log(viewer.pageCount);
          },
          reportLoaded: function (reportInfo)
          {
             console.log(reportInfo.parameters);
          },
    
          error: function (error)
          {
             console.log("error");
          }
    
       });
    });
    
  5. Add the following code to the system.webServer section of the web.config file of your ActiveReports 8 Server web site.
    XML
    Copy Code
    <system.webServer>
    
            <httpProtocol>
    
                    <customHeaders>
    
                            <add name="Access-Control-Allow-Origin" value="*" />
    
                            <add name="Access-Control-Allow-Headers" value="Authorization, Origin, Content-Type, Accept, X-Requested-With" />
    
                    </customHeaders>
    
            </httpProtocol>
    
    ...
    
    </system.webServer>
    

Initialization Options

The following options can be set during initialization or at runtime while working with the HTML5 Viewer.

uiType

element

reportService

reportService.url

reportService.securityToken

reportService.resourceHandler

report

reportID

reportParameters

reportLoaded

action

availableExports

maxSearchResults

error

documentLoaded

localeUri

Public API Methods and Properties

After initializing the HTML5 Viewer, the following API methods and properties can be used.

Methods

option

refresh

print

goToPage

backToParent

destroy

export

search

getToc

Properties

pageCount

currentPage

Toolbar

ToolbarTop

ToolbarBottom

 

 


Copyright © 2014 GrapeCity, inc. All rights reserved

Send comments on this topic.