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

Type: function(actionType, actionParams)

action: (actionType, actionParams) => console.log('Action type: ' + actionType + '; Action parameters: ' + actionParams)

Description: The animation options in report preview.

Type: The object and the properties available are:

• loadChart
  Property: enabled
  Type: Boolean (default 'false')
  
• hoverChart
  Property: enabled
  Type: Boolean (default 'false')
  
• hoverTable
  Property: enabled
       Type: Boolean (default 'false')
  
  Property: backgroundColor
      Type: String
      Accepted Value: Any
  
  Property: textColor
     Type: String
     Accepted Value: Any

See Animation topic for more information.

animation: {
    loadChart: {
        enabled: true
    },
    hoverChart: {
        enabled: true
    },
    hoverTable: {
        enabled: true,
        backgroundColor: 'LightGray',
        textColor: 'DarkGray'
    }
}

Description: The array of export types available via the Export functionality of JSViewer. By default, the Mht, Pdf, Tiff, Xls, Xlsx, Csv, Doc, Docx, Json, Xml, TextPrint, XlsxData, and CsvData exports are available for Page/RDL reports.

For Section reports, the Mht, Pdf, Tiff, Xls, Xlsx, Rtf, and Txt exports are available by default.

Type: Array

availableExports: ['Xml', 'Pdf', 'XlsxData', 'CsvData', 'Rtf', 'Xls', 'Xlsx']

Description: The object containing custom default export settings use to set default value and visibility of any field in the export panel. The keys for export format are mht, pdf, tiff, xls, xlsx, csv, doc, docx, json, xml, xlsxData, csvData, rtf and txt. The keys for the settings are the export settings which are available for RenderingExtensions.

See Custom Export Settings topic for details on the export formats and the description.

defaultExportSettings: {
    xls: {
        FileName: {
            value: "Filename_1",
            visible: false
        }   
    }
}

Description: Set up a single page or a continuous page.

Type:  String

Accepted Value: 'Single', 'Continuous'

displayMode: 'Continuous'

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

Type: function()

Returns: Void

documentLoaded: () => console.log('The document is loaded entirely on the server')

Description: JQuery selector that specifies the element that hosts the JSViewer control.

Type: String

element: '#viewerContainer'

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)

error: (error) => {
    if(error.message) {
    // show error message.
    alert("Internal error! Please ask administrator.");
    // do not show default error message.

return true;
    }
}

Description: Specifies predefined locale used for displaying the viewer. If locale is not specified explicitly here, the locale corresponding to the browser preferences is used. Localization can be done in three languages:       

Type: String

Accepted Value: 'en-US' (for English), 'ja-JP' (for Japanese), and 'zh-CN' (for Chinese)

locale: 'ja-JP'

Description: The JSON containing the localization strings. All strings are not necessary - missing values are displayed using EN localization data. It is like localeUri, but instead of the path to localization data, localization data itself via JSON object is specified.

Type: JSON

localeData: JSON.parse( `{
    "export":  {
      "boolTextFalse": "いいえ",
      "boolTextTrue": "はい"
    },
    "viewer": {
      "toolbar": {
        "refresh": "更新"
      }
    }
  }`
),   

Description: The url of the file containing the localization strings (custom-locale.json file). Not all strings are necessary - missing values ​​are displayed using EN localization data.

Type: String

localeUri: './custom-locale.json'

Sample content of 'custom-locale.json':

{
  "export": {
    "boolTextFalse": "いいえ",
    "boolTextTrue": "はい",
    ...
  },
  "exportcsv": {
    "friendlyName": "-CSV-",
    "settings": {
      "ColumnsDelimiter": {
        "label": "列の区切り",
        "category": "その他"
      },
      ...
    },
    ...
  },
  ...
}

Description: Defines horizontal alignment and view for report page like part of the WebPage or 'paper view'

Type: The properties available are:

Properties

• horizontalAlignment
  Type: String
  Accepted Values: 'left', 'right', 'center'
  
• viewMode
  Type: String
  Accepted Values: 'standard', 'noPaper'

See Customize Page View topic for more information.

pageView: {    horizontalAlignment: 'left',    viewMode: 'standard'}

Description: Sets the location of the panels (search panel, parameters panel, etc.) to the left side ('toolbar') or to the right side ('sidebar') of JSViewer. The default value is 'toolbar'.

Type: String

Accepted Value: 'toolbar', 'sidebar'

panelsLocation: 'sidebar'

Description: Specifies the parameters panel settings.

Type: String

Accepted Value: 'default', 'top'

parametersPanel: {
    location: 'top'
}

Description: Set up the render format for a Page or an RDL report to 'html' or 'svg'.

Type: String

Accepted Values: 'html', 'svg'

renderFormat: 'svg'

Description: Set up initial render mode to 'Paginated' or 'Galley'. Default value is 'Paginated'.

Type: String

Accepted Values: 'Galley', 'Paginated'       

renderMode: 'Galley'

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

Type: String

reportID: 'AnnualReport.rdlx'

Description: The callback that is invoked when the JSViewer 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)

reportLoaded: (reportInfo) => console.log('The report ' + reportInfo.name + ' was successfully loaded!')

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

Type: Array

reportParameters: [{ name: 'ReportParameter1', values: ['1']}]

Description: Set up the settings to connect the Web API.

Type: Object that has the following optional properties:

• url: The url to connect the Web API.
  Type: String
  Example:

• • use prefix in url:
    

    url: '/api/reporting' // default value
    

  • use full URL:
    

    url: 'http:example.com/api/reporting'
    

• securityToken: The security key required to access the Web API.
  Type: String
  Example:
  

  securityToken: 'security_token'
  

• onRequest: Callback before any request. Takes the init argument that allows you to add an option before fetch a request, for example, to change the security token.
  Type: function
  Example:
  

  onRequest: (init) => init.headers.Authorization = 'security_token' 
  

  The init argument is an object that takes the following options:

  • credentials: Set request's credentials.
  • headers: Set request's headers.
  • signal: Set request's signal.

  Please see https://fetch.spec.whatwg.org/#requestinit for more information.

reportService: {
    url: 'http://example.com/api/reporting', //web service url
    securityToken: 'security_token', //provide securityToken
    onRequest: (init) => {       
         init.credentials = "include",
         init.headers = { "Cache-Control": "no-cache, no-store, must-revalidate", "Expires": "0", "Pragma": "no-cache", "Accept": "application/json" },
         init.signal = new AbortController().signal
         }       
    }

Description: Sets the display of the Preparing Print dialog.

Type: Boolean

Example:

const viewer = GrapeCity.ActiveReports.JSViewer.create({
  element: '#root',
  silentPrint: true,
});

silentPrint: true

Description: Makes the viewer display the parent report of the drill-down report.
Return type Description: Void

viewer.backToParent()

Description: Removes the viewer content from the element.
Return type Description: Void

viewer.destroy()

Description: Exports the currently displayed report
Argument types description:

exportType: Specifies the 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

Return type description: Void

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.

viewer.export('Pdf', downloadReport, true, { Title: '1997 Annual Report' })
 // 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;
 }
 };

Description: Obtains the report TOC.
Return type description: TOC Tree

console.log(viewer.getToc())

Description: Makes the viewer display the specific page. Page numeration starts with 1.
Argument types description:

number: The number of pages to go to

Return type description: Void

var pageNumber = 3;
viewer.goToPage(pageNumber);

Description: Opens a report.
Argument types description:

reportID: String(reportName)

reportParameters: Array of Reports

Return type description: Void

const reportName = "Report.rdlx";
viewer.openReport(reportName);
//Or
//viewer.openReport(reportsArray[0]);

Description: Refreshes the report preview
Return type description: Void

viewer.refresh()

Description: A string that represents the current version of the JSViewer.
Return type description: String

console.log(GrapeCity.ActiveReports.JSViewer.version)

Description: Adds a custom toolbar item (button) to the desktop's toolbar. Similarly,

For fullscreen: viewer.toolbar.fullscreen.addItem()
For mobile: viewer.toolbar.mobile.addItem()

Argument types description: Belongs to ToolbarItem type, where

type ToolbarItem = { key: string; /** * @deprecated use icon instead */ iconCssClass?: string; icon?: Icon; text?: string; title?: string; checked?: boolean; enabled?: boolean; action?: (curr?: ToolbarItem) => Partial | void; onUpdate?: (args: ChangedEventArgs, curr: ToolbarItem) => Partial | void; } ;

Return type description: item: ToolbarItem

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
var pdfExportButton = {
key: '$pdfExportButtonKey',
iconCssClass: 'fa fa-file',
enabled: true,
action: function (item) {
console.log('Export to PDF function works here');
 },
onUpdate: function (arg, item) {
console.log('Something in viewer was updated, check/update button state here');
 }
 };
viewer.toolbar.desktop.addItem(pdfExportButton);
// OR
var btn = {
key: '$openDesigner',
iconCssClass: 'fa fa-folder',
text: 'ClickToSave',
enabled: true
 };
viewer.toolbar.desktop.addItem(btn);

Description:   Removes an existing item from the desktop's toolbar. Similarly,

For fullscreen: viewer.toolbar.fullscreen.removeItem()
For mobile: viewer.toolbar.mobile.removeItem()

Argument types description: String
Return type description: String

viewer.toolbar.desktop.removeItem('$pdfExportButtonKey');
// pdfExportButtonKey is the button added using addItem() method

Description: Sets the keys of the visible desktop's toolbar items and their order. Similarly,

For fullscreen: viewer.toolbar.fullscreen.layout()
For mobile: viewer.toolbar.mobile.layout()

Argument types description: Array of layout buttons

Return type description: String

// Change the layout of the toolbar - change the positions of buttons in the toolbar
var layout = ["$navigation", "$split", "$refresh", "$split", "$history", "$split", "$mousemode", "$zoom", "$fullscreen", "$split", "$print", "$singlepagemode", "$continuousmode", "$galleymode"]
viewer.toolbar.desktop.layout(layout);

Description: Toggles the toolbar visibility (hides or shows the toolbar).

Argument types description: boolean

Return type description: Pass true to switch toolbar ON, and vise-versa. Do not pass any value to toggle visibility

viewer.toolbar.toggle(false);//hide toolbar
viewer.toolbar.toggle(true);//show toolbar

Description: Toggles the sidebar visibility (hides or shows the sidebar).

Argument types description: boolean

Return type description: Pass true to switch sidebar ON, and vise-versa. Do not pass any value to toggle visibility

viewer.sidebar.toggle(false); //hide sidebar
viewer.sidebar.toggle(true); //show sidebar

Description: Returns identifiers of default and added buttons in the order in which they will be displayed in the toolbar.

Return type description: String

// get the order of keys and reverse it
viewer.toolbar.desktop.layout(viewer.toolbar.desktop.getKeys().reverse())

Description: Gets the currently displayed page number.
Return type description: An integer representing currently displayed page number

console.log(viewer.currentPage())

Description:  Gets the page count of the currently displayed report.
Return type description: An integer representing page count

console.log(viewer.pageCount())