Interface InitializationOptions

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

Hierarchy

InitializationOptions

Properties

`Optional` action

action?: ((actionType, actionParams) => void)

Type declaration

(actionType, actionParams): void

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

Parameters

actionType: string
actionParams: any[]

Returns void

Example

Usage example:

// ESM usage
import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
action: (actionType, actionParams) => console.log('Action type: ' + actionType + '; Action parameters: ' + actionParams)
});

Example

Usage example:

// UMD usage
var viewer = GrapeCity.ActiveReports.JSViewer.create({
action: (actionType, actionParams) => console.log('Action type: ' + actionType + '; Action parameters: ' + actionParams)
});

`Optional` animation

animation?: AnimationOptions

The report view animation options.

Example

Usage example:

// ESM usage
import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
animation: {
    loadChart: {
        enabled: true
    },
    hoverChart: {
        enabled: true
    },
    hoverTable: {
        enabled: true,
        backgroundColor: 'LightGray',
        textColor: 'DarkGray'
    }
}
});

Example

Usage example:

// UMD usage
var viewer = GrapeCity.ActiveReports.JSViewer.create({
animation: {
    loadChart: {
        enabled: true
    },
    hoverChart: {
        enabled: true
    },
    hoverTable: {
        enabled: true,
        backgroundColor: 'LightGray',
        textColor: 'DarkGray'
    }
}
});

`Optional` autoBackgroundColor

autoBackgroundColor?: boolean

When true, view area background color is filled with report body color available only for dashboard reports

Example

Usage example:

// ESM usage
import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
 autoBackgroundColor : true;
});

Example

Usage example:

// UMD usage
var viewer = GrapeCity.ActiveReports.JSViewer.create({
 autoBackgroundColor : true;
});

`Optional` availableExports

availableExports?: ExportTypes[]

The array of export types available via Export functionality of JS Viewer. By default, Mht, Pdf, Tiff, Xls, Xlsx, Csv, Doc, Docx, Json, Xml, TextPrint, XlsxData and CsvData exports are available for page reports, Mht, Pdf, Tiff, Xls, Xlsx, Rtf and Txt exports are available for section reports.

Example

Usage example:

// ESM usage
import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
availableExports: ['Xml', 'Pdf']
});

Example

Usage example:

// UMD usage
var viewer = GrapeCity.ActiveReports.JSViewer.create({
availableExports: ['Xml', 'Pdf']
});

`Optional` defaultExportSettings

defaultExportSettings?: DefaultExportSettings

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

Example

Usage example:

// ESM usage
import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
defaultExportSettings: {
    xls: {
        FileName: {
            value: "Hihihi",
            visible: false
        }	
    }
}
});

Example

Usage example:

// UMD usage
var viewer = GrapeCity.ActiveReports.JSViewer.create({
defaultExportSettings: {
    xls: {
        FileName: {
            value: "Hihihi",
            visible: false
        }	
    }
}
});

`Optional` displayMode

displayMode?: ViewMode

Set up single page or continuous page.

Example

Usage example:

// ESM usage
import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
displayMode: 'Continuous'
});

Example

Usage example:

// UMD usage
var viewer = GrapeCity.ActiveReports.JSViewer.create({
displayMode: 'Continuous'
});

`Optional` documentLoaded

documentLoaded?: (() => void)

Type declaration

(): void

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

Returns void

Example

Usage example:

// ESM usage
import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
documentLoaded: () => console.log('The document is loaded entirely on the server')
});

Example

Usage example:

// UMD usage
var viewer = GrapeCity.ActiveReports.JSViewer.create({
documentLoaded: () => console.log('The document is loaded entirely on the server')
});

element

element: string

JQuery selector that specifies the element that hosts the JS Viewer control.

Example

Usage example:

// ESM usage
import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
element: '#viewerContainer'
});

Example

Usage example:

// UMD usage
var viewer = GrapeCity.ActiveReports.JSViewer.create({
element: '#viewerContainer'
});

`Optional` error

error?: ((error) => boolean)

Type declaration

(error): boolean

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 doesn't reurn proper object. The error parameter is an object that has a message property which allows the users to customize the error message and caption property which allows to customize error caption.

Parameters

error: ErrorInfo

Returns boolean

Example

To hide the default error panel:

// ESM usage
import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
error: (error) => {
    if (error.message) {
        // show error message.
        alert("Internal error! Please ask administrator.");
        // do not show default error message.
        return true;
    }
}
});

Example

To hide the default error panel:

// UMD usage
var viewer = GrapeCity.ActiveReports.JSViewer.create({
error: (error) => {
    if (error.message) {
        // show error message.
        alert("Internal error! Please ask administrator.");
        // do not show default error message.
        return true;
    }
}
});

`Optional` initialZoomMode

initialZoomMode?: InitialZoomMode

Set up the initial zoom mode.

Example

Usage example:

// ESM usage
import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
 initialZoomMode: 'FitToWidth';
});

Example

Usage example:

// UMD usage
var viewer = GrapeCity.ActiveReports.JSViewer.create({
 initialZoomMode: 'FitToWidth';
});

`Optional` locale

locale?: string

Specifies locale used for displaying Viewer. If locale is not specified explicitly here, the locale corresponding to the browser preferences is used.

Example

Usage example:

// ESM usage
import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
locale: 'ja-JP'
});

Example

Usage example:

// UMD usage
var viewer = GrapeCity.ActiveReports.JSViewer.create({
locale: 'ja-JP'
});

`Optional` localeData

localeData?: JSON

The JSON containing the localization strings. Not all strings are necessary — missing values will be displayed using EN localization data.

Example

Usage example:

// ESM usage
import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
localeData: JSON.parse( `{
    "export":  {
      "boolTextFalse": "Нет",
      "boolTextTrue": "Да"
    },
    "viewer": {
      "toolbar": {
        "refresh": "Обновить"
      }
    }
  }`
)
});

Example

Usage example:

// UMD usage
var viewer = GrapeCity.ActiveReports.JSViewer.create({
localeData: JSON.parse( `{
    "export":  {
      "boolTextFalse": "Нет",
      "boolTextTrue": "Да"
    },
    "viewer": {
      "toolbar": {
        "refresh": "Обновить"
      }
    }
  }`
)
});

`Optional` localeUri

localeUri?: string

The url of the file containing the localization strings. Not all strings are necessary — missing values will be displayed using EN localization data.

Example

Usage example:

// ESM usage
import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
localeUri: './locale.json'
});

locale.json:

{
  "export": {
    "boolTextFalse": "Нет",
    "boolTextTrue": "Да",
    ...
  },
  "exportcsv": {
    "friendlyName": "-CSV-",
    "settings": {
      "ColumnsDelimiter": {
        "label": "Разделитель Столбцов",
        "category": "Прочее"
      },
      ...
    },
    ...
  },
  ...
}

Example

Usage example:

// UMD usage
var viewer = GrapeCity.ActiveReports.JSViewer.create({
localeUri: './locale.json'
});

locale.json:

{
  "export": {
    "boolTextFalse": "Нет",
    "boolTextTrue": "Да",
    ...
  },
  "exportcsv": {
    "friendlyName": "-CSV-",
    "settings": {
      "ColumnsDelimiter": {
        "label": "Разделитель Столбцов",
        "category": "Прочее"
      },
      ...
    },
    ...
  },
  ...
}

`Optional` pageView

pageView?: PageViewOptions

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

Example

Usage example:

// ESM usage
import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
pageView: {
    horizontalAlignment: 'left',
    viewMode: 'standard'
}
});

Example

Usage example:

// UMD usage
var viewer = GrapeCity.ActiveReports.JSViewer.create({
pageView: {
    horizontalAlignment: 'left',
    viewMode: 'standard'
}
});

`Optional` panelsLocation

panelsLocation?: PanelsLocation

The position of panels (search, parameters etc): 'toolbar' or 'sidebar'. Default value is 'toolbar'.

Example

Usage example:

// ESM usage
import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
panelsLocation: 'sidebar'
});

Example

Usage example:

// UMD usage
var viewer = GrapeCity.ActiveReports.JSViewer.create({
panelsLocation: 'sidebar'
});

`Optional` parametersPanel

parametersPanel?: ParametersPanelSettings

Set up the parameters panel settings.

Example

Usage example:

// ESM usage
import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
parametersPanel: {
    * location: 'top',
 * open: 'always'
}});

Example

Usage example:

// UMD usage
var viewer = GrapeCity.ActiveReports.JSViewer.create({
parametersPanel: {
    * location: 'top',
 * open: 'always'
}});

`Optional` renderFormat

renderFormat?: RenderFormat

Set up render mode: 'auto', 'html' or 'svg'

Example

Usage example:

// ESM usage
import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
 renderFormat : 'auto'
});

Example

Usage example:

// UMD usage
var viewer = GrapeCity.ActiveReports.JSViewer.create({
 renderFormat : 'auto'
});

`Optional` renderMode

renderMode?: RenderMode

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

Example

Usage example:

import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
renderMode: 'Galley'
});

Example

Usage example:

// UMD usage
var viewer = GrapeCity.ActiveReports.JSViewer.create({
renderMode: 'Galley'
});

`Optional` reportID

reportID?: string

The id of the report to be shown by the JS Viewer.

Example

Usage example:

// ESM usage
import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
reportID: 'AnnualReport.rdlx'
});

Example

Usage example:

// UMD usage
var viewer = GrapeCity.ActiveReports.JSViewer.create({
reportID: 'AnnualReport.rdlx'
});

`Optional` reportLoaded

reportLoaded?: ((reportInfo) => void)

Type declaration

(reportInfo): void

The callback that is invoked when the JS Viewer obtains the information about the requested report.

Parameters

reportInfo: ReportInfo

Returns void

Example

Usage example:

// ESM usage
import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
reportLoaded: (reportInfo) => console.log('The report ' + reportInfo.name + ' was successfully loaded!')
});

Example

Usage example:

// UMD usage
var viewer = GrapeCity.ActiveReports.JSViewer.create({
reportLoaded: (reportInfo) => console.log('The report ' + reportInfo.name + ' was successfully loaded!')
});

`Optional` reportParameters

reportParameters?: Parameter[]

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

Example

Usage example:

// ESM usage
import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
reportParameters: [{ name: 'ReportParameter1', values: ['1']}]
});

Example

Usage example:

// UMD usage
var viewer = GrapeCity.ActiveReports.JSViewer.create({
reportParameters: [{ name: 'ReportParameter1', values: ['1']}]
});

`Optional` reportService

reportService?: ReportServiceSettings

Set up the settings to connect the Web API.

Example

Usage example:

// ESM usage
import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
reportService: {
    url: 'http://example.com/api/reporting',
    securityToken: '42A9CD80A4F3445A9BB60A221D042FCC',
}
});

Example

Usage example:

// UMD usage
var viewer = GrapeCity.ActiveReports.JSViewer.create({
reportService: {
    url: 'http://example.com/api/reporting',
    securityToken: '42A9CD80A4F3445A9BB60A221D042FCC',
}
});

`Optional` silentPrint

silentPrint?: boolean

JQuery selector that specifies the element that hosts the JS Viewer control.

Example

Usage example:

// ESM usage
import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
silentPrint: true
});

Example

Usage example:

// UMD usage
var viewer = GrapeCity.ActiveReports.JSViewer.create({
silentPrint: true
});

`Optional` theme

theme?: UITheme<Record<string, string>>

Viewer's UI theme.

Example

Pre-defined theme selection USM example:

// ESM usage
import {createViewer, UIThemes} from './jsViewer.min.js';
const viewer = createViewer({
    element: '#root',
    theme: UIThemes.defaultDark
});

Example

Pre-defined theme selection example:

var viewer = GrapeCity.ActiveReports.JSViewer.create({
    theme: GrapeCity.ActiveReports.JSViewer.Themes.darkOled
});

Interface InitializationOptions

Hierarchy

Index

Properties

Properties

Optional action

Type declaration

Parameters

actionType: string

actionParams: any[]

Returns void

Example

Example

Optional animation

Example

Example

Optional autoBackgroundColor

Example

Example

Optional availableExports

Example

Example

Optional defaultExportSettings

Example

Example

Optional displayMode

Example

Example

Optional documentLoaded

Type declaration

Returns void

Example

Example

element

Example

Example

Optional error

Type declaration

Parameters

error: ErrorInfo

Returns boolean

Example

Example

Optional initialZoomMode

Example

Example

Optional locale

Example

Example

Optional localeData

Example

Example

Optional localeUri

Example

Example

Optional pageView

Example

Example

Optional panelsLocation

Example

Example

Optional parametersPanel

Example

Example

Optional renderFormat

Example

Example

Optional renderMode

Example

Example

Optional reportID

Example

Example

Optional reportLoaded

Type declaration

Parameters

reportInfo: ReportInfo

Returns void

Example

Example

`Optional` action

`Optional` animation

`Optional` autoBackgroundColor

`Optional` availableExports

`Optional` defaultExportSettings

`Optional` displayMode

`Optional` documentLoaded

`Optional` error

`Optional` initialZoomMode

`Optional` locale

`Optional` localeData

`Optional` localeUri

`Optional` pageView

`Optional` panelsLocation

`Optional` parametersPanel

`Optional` renderFormat

`Optional` renderMode

`Optional` reportID

`Optional` reportLoaded

`Optional` reportParameters

`Optional` reportService

`Optional` silentPrint

`Optional` theme