Show All

Hide All

Initialization Options

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

Description: Sets the UI mode of the HTML5 Viewer.

Type: String

Accepted Value: 'Custom', 'Mobile' or 'Desktop'

Example:

viewer.option('uiType', 'Mobile');

Description: JQuery selector that specifies the element that hosts the HTML5 Viewer control.

Note: This option is used during initialization only.

Type: String

Example:

var viewer = GrapeCity.ActiveReports.Viewer(
{
   element: '#viewerContainer2',
   reportService: {
      url: '/ActiveReports.ReportService.asmx'
   },
});

Description: The report service that can use ActiveReports Server or ActiveReports Web Report Service.

Type: Object that has the url and optional securityToken properties

Example:

reportService: {
   url: 'http://remote-ar-server.com',
   securityToken: '42A9CD80A4F3445A9BB60A221D042FCC',
   resourceHandler: 'http://remote-ar-server.com/resourceHandler.aspx'
};

Description: The url of AR11 Server instance of the AR11 Web service that provides the reportInfo and output.

Type: String

Example:

reportService: {
   url: 'http://remote-ar-server.com'
};

Description: The security key needed to login to the AR11 server.

Type: String

Example:

reportService: {
   securityToken: '42A9CD80A4F3445A9BB60A221D042FCC'
};

Description: The url of the AR11 Server resource handler.

Type: String

Example:

reportService: {
   resourceHandler: 'http://remote-ar-server.com/resourceHandler.aspx'
};

Description: The report that is displayed in ActiveReports Server or ActiveReports Web Report Service.

Type: An object that has id and parameters properties.

Example:

report: {
   id: 'CustomersList',
   parameters: [
   {
      name: 'CustomerID',
      value: 'ALFKI'
   }]
};

Description: The id of the report to be shown by the HTML5 Viewer.

Type: String

Example:

report: {
   id: 'CustomersList',
   parameters: [
   {
      name: 'CustomerID',
      value: 'ALFKI'
   }]
};

Description: The array of the {name, value} pairs that describe the parameters values used to run the report.

Type: Array

Example:

For single value parameter:

  report: {
     id: 'CustomersList',
     parameters: [
     {
        name: 'CustomerID',
        value: 'ALFKI'
     }]};

For multi-value parameter as array:

  var arrParam = [1, 2, 3];
  var reportOption = { 
     id: 'PageReport1.rdlx', 
     parameters: [ 
     { 
        name: 'Parameter1', 
        values: arrParam,
        multivalue: true
     }] 
  }; 
  viewer.option('report', reportOption);

Description: The callback that is invoked when the HTML5 Viewer obtains the information about the requested report. The reportInfo object is passed in the callback including the TOC info, Parameters info and the link to the rendered report result.

Type: function(reportInfo)

Example:

var reportLoaded = function reportLoaded(reportInfo)
   {
      console.log(reportInfo.parameters);
   }
viewer.option('reportLoaded', reportLoaded);

Description: The callback that is invoked before the HTML5 Viewer opens the hyperlink, bookmark link, drill down report or toggles the report control visibility.

Type: function(actionType, actionParams)

Example:

function onAction(actionType, actionParams)
{
   if (actionType === 0)
   {
      window.open(params.url, "Linked from report", "height=200,width=200");
   }
}
viewer.option('action', onAction);

Description: The array of export types available via Export functionality of HTML5 Viewer. By default, PDF, Word, Image, Mht, and Excel exports are available.

Type: Array

Example:

viewer.option("availableExports", ['Pdf']);

Description: The number of search results received for a single search invoke.

Type: Number

Example:

maxSearchResults: 10

Description: The callback that is invoked when an error occurs in the process of displaying the report. The default error panel does not appear if the callback returns true. The error parameter is an object that has a message property which allows the users to customize the error message.

Type: function(error)

Example: To hide the default error panel

var options = {
  error: function(error){
    if (error.message) {
      // show error message.
      alert("Internal error! Please ask administrator.");
      return true; // do not show default error message.
    }
  },
  // other properties.
};
var viewer = GrapeCity.ActiveReports.Viewer(options);

Example: To customize the error message

var options = {
  error: function(error){ 
    error.message = "My error message";
  },
  // other properties
};
var viewer = GrapeCity.ActiveReports.Viewer(options);

Description: The callback that is invoked when a document is loaded entirely on the server.

Type: function()

Example:

var documentLoaded = function documentLoaded()
   {
      setPaginator();
   }
viewer.option('documentLoaded', documentLoaded);

Description: The url of the file containing the localization strings.

Note: This option is used during initialization only.

Type: String

Example:

var viewer = GrapeCity.ActiveReports.Viewer(
{
   localeUri: 'Scripts/i18n/ru.txt'
});

Description: Removes the Show Details button in the error panel and shows only the last error.

Type: String

Example: To hide the Show Details button


var viewer = GrapeCity.ActiveReports.Viewer({
   showOnlyLastError: true 
});

Description: Set up single page or continuous page.

Type: String

Accepted Value: 'single', 'continuous'

Example:

viewer.option('displayMode', 'continuous');

Public API Methods and Properties

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

Methods

Description: Gets or sets the option value by name if the value parameter is specified.

Syntax: option(name,[value])Object

Parameters:

name: The option name to get or set.
value: (optional) The option value to set. If this argument is omitted than the method returns the current option value.

Examples:

viewer.option('uiType', 'mobile');

    viewer.option('report', {

    id: 'my report'

    });

    

    viewer.option('displayMode', 'continuous');

Return Value: The current option value.

Description: Refreshes the report preview.

Syntax: option(name,[value])Object

Example:

viewer.refresh()

Return Value: Void

Description: Prints the currently displayed report if any.

Syntax: print()Void

Example:

viewer.print()

Return Value: Void

Description: Makes the viewer to display the specific page, scroll to the specific offset (optional) and invokes the callback once it's done.

Syntax: goToPage(number, offset, callback)Void

Parameters:

number: The number of pages to go to.
offset object: The object such as {left:12.2, top:15}.
callback: The function to call after perform action.

Example:

viewer.goToPage(1, {
   2, 3
}, function onPageOpened()
{});

Return Value: Void

Description: Makes the viewer to display the parent report of the drill-down report.

Syntax: backToParent()Void

Example:

viewer.backToParent()

Return Value: Void

Description: Removes the viewer content from the element.

Syntax: destroy()Void

Example:

viewer.destroy()

Return Value: Void

Description: Exports the currently displayed report.

Syntax: export(exportType,callback,saveAsDialog,settings)Void

Parameters:

exportType: Specifies export format.
callback: Function that is invoked once the export result is available (its Url is passed in the callback).
saveAsDialog: Indicates whether the save as dialog should be shown immediately once the export result is ready.
settings: The export settings are available for RenderingExtensions.
Note: In section reports, the export settings are not enabled when exporting files using the rendering extensions. In Page report and RDL report, the export settings are not enabled when exporting files to PDF using the export filter.

Example:
function exportToExcel()

{
viewer.export('Xls', downloadReport, true, { FileName: "DefaultName.xls" });
}
// function fetches the report from uri(callback function)
var downloadReport = function (uri) {
    var newWin = null;
    // open uri in new window
    try {
        newWin = window.open(uri);
    } catch (e) { }
    // if browser rejects opening new window, open uri in current window
    if (!newWin) {
        window.location = uri;
    }
};

Return Value: Void

Description: Performs the search of a specific term with specific search options (match case, whole word) and invokes the specific callback with the search result passed.

Syntax: search(searchTerm, searchOptions, callback)Void

Parameters:

searchTerm: String to find.
searchOptions: The object optionally defines the search options:
- matchCase: Whether the search should respect the case.
- wholePhrase: Whether the search should look for a whole phrase.
callback: The function to call after performing search.

Example:

viewer.search('a', {
   matchCase: true,
   wholePhrase: false
}, function (results)
{
   console.log(results);
});

Return Value: Void

Description: Obtains the part of the report TOC specified by parent(node), startChild(index), count parameters and invokes callback function passing the result as parameter.

Syntax: getToc(callback) Void

Parameters:

callback: The callback to handle TOC tree.

Example:

viewer.getToc(function (toc)
{
   console.log(toc);
})

Return Value: Void

Properties

Description: Gets the page count of the currently displayed report.

Syntax: viewer.pageCount

Example:

console.log(viewer.pageCount)

Return Value: An integer representing page count.

Description: Gets the currently displayed page number.

Syntax: viewer.currentPage

Example:

console.log(viewer.currentPage)

Return Value: An integer representing currently displayed page number.

Description: Returns the HTML element that displays the toolbar in desktop UI mode.

Syntax: viewer.Toolbar

Example:

// Toolbar, MobileToolbarTop, MobileToolbarBottom
$(viewer.toolbar).hide();
$(viewer.toolbarTop).hide();
$(viewer.toolbarBottom).hide();

Description: Returns the HTML element that displays the top toolbar in mobile UI mode.

Syntax: viewer.ToolbarTop

Example:

// Toolbar, MobileToolbarTop, MobileToolbarBottom
$(viewer.toolbar).hide();
$(viewer.toolbarTop).hide();
$(viewer.toolbarBottom).hide();

Description: Returns the HTML element that displays the bottom toolbar in mobile UI mode.

Syntax: viewer.ToolbarBottom

Example:

// Toolbar, MobileToolbarTop, MobileToolbarBottom
$(viewer.toolbar).hide();
$(viewer.toolbarTop).hide();
$(viewer.toolbarBottom).hide();

Sample ReadMe Files

HTML5 Viewer Sample

How To

Add Tooltips in Charts for HTML5 Viewer