Interface InitializationOptions

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

interface InitializationOptions {
    action?: ((actionType, actionParams) => void);
    animation?: AnimationOptions;
    autoBackgroundColor?: boolean;
    availableExports?: ExportTypes[];
    defaultExportSettings?: DefaultExportSettings;
    displayMode?: ViewMode;
    documentLoaded?: (() => void);
    element: string;
    error?: ((error) => boolean);
    initialZoomMode?: InitialZoomMode;
    locale?: string;
    localeData?: JSON;
    localeUri?: string;
    pageView?: PageViewOptions;
    panelsLocation?: PanelsLocation;
    parametersPanel?: ParametersPanelSettings;
    renderFormat?: RenderFormat;
    renderMode?: RenderMode;
    reportID?: string;
    reportLoaded?: ((reportInfo) => void);
    reportParameters?: Parameter[];
    reportService?: ReportServiceSettings;
    silentPrint?: boolean;
    theme?: UITheme;
}

Properties

`Optional` action

action?: ((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.

Type declaration

- (actionType, actionParams): void
- 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)

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

Type declaration

- (): void
- 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)

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.

Type declaration

- (error): boolean
- 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)

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

Type declaration

- (reportInfo): void
- 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

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

Index

Properties

Properties

Optional action

Type declaration

Parameters

Returns void

Example: Usage example:

Example: Usage example:

Optional animation

Example: Usage example:

Example: Usage example:

Optional autoBackgroundColor

Example: Usage example:

Example: Usage example:

Optional availableExports

Example: Usage example:

Example: Usage example:

Optional defaultExportSettings

Example: Usage example:

Example: Usage example:

Optional displayMode

Example: Usage example:

Example: Usage example:

Optional documentLoaded

Type declaration

Returns void

Example: Usage example:

Example: Usage example:

element

Example: Usage example:

Example: Usage example:

Optional error

Type declaration

Parameters

Returns boolean

Example: To hide the default error panel:

Example: To hide the default error panel:

Optional initialZoomMode

Example: Usage example:

Example: Usage example:

Optional locale

Example: Usage example:

Example: Usage example:

Optional localeData

Example: Usage example:

Example: Usage example:

Optional localeUri

Example: Usage example:

Example: Usage example:

Optional pageView

Example: Usage example:

Example: Usage example:

Optional panelsLocation

Example: Usage example:

Example: Usage example:

Optional parametersPanel

Example: Usage example:

Example: Usage example:

Optional renderFormat

Example: Usage example:

Example: Usage example:

Optional renderMode

Example: Usage example:

Example: Usage example:

Optional reportID

Example: Usage example:

Example: Usage example:

Optional reportLoaded

Type declaration

Parameters

Returns void

Example: Usage example:

Example: Usage example:

Optional reportParameters

Example: Usage example:

Example: Usage example:

Optional reportService

Example: Usage 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