/** Type representing a viewer's sidebar instance. */ interface Sidebar { /** * Toggles the sidebar visibility. * @param show Pass **true** to switch sidebar ON, and vise-versa. Do not pass any value to toggle visibility. * @example Usage example: * ```javascript * viewer.sidebar.toggle(false); // hide sidebar * ``` */ toggle: (show?: boolean) => void; } /** * Default toolbar buttons. * @example Usage example: * ```javascript * viewer.toolbar.desktop.layout([ToolbarButtons.Refresh, ToolbarButtons.Zoom, ToolbarButtons.Print]); * ``` */ declare enum ToolbarButtons { /** Toolbar items splitter. */ Splitter = "$split", /** Pages navigation buttons group. */ Navigation = "$navigation", /** Refresh report. */ Refresh = "$refresh", /** Zoom controls group. */ Zoom = "$zoom", /** Move tool button. */ MouseMode = "$mousemode", /** Fullscreen switcher button. */ Fullscreen = "$fullscreen", /** 'Go back', 'Go forward', 'Back to parent' buttons group. */ History = "$history", /** Single page mode switcher button. */ SinglePageMode = "$singlepagemode", /** Continuous mode switcher button. */ ContiniousMode = "$continuousmode", /** Galley mode switcher button. */ GalleyMode = "$galleymode", /** 'Print' button. */ Print = "$print", /** Theme switcher button. */ Theme = "$theme" } /** * Type representing a viewer's toolbar item. * @example Usage example: * ```javascript * var pdfExportButton: ToolbarItem = { * key: '$pdfExportButtonKey', * checked: true, * enabled: true, * iconCssClass: 'mdi mdi-file-pdf', * text: 'Export to PDF', * title: 'Export to PDF', * 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); * ``` */ interface ToolbarItem { /** * The uniq identifier of the toolbar item. * See keys of the standard viewer's toolbar buttons here: [[ToolbarButtons]] */ key: string; /** Shows whether the toolbar item is checked. */ checked?: boolean; /** Shows whether the toolbar item is enabled. */ enabled?: boolean; /** Specifies css class for the icon of the toolbar item. */ iconCssClass?: string; /** Specifies the text of the toolbar item. */ text?: string; /** Specifies the tooltip of the toolbar item. */ title?: string; /** Action handler for the toolbar item. */ action: () => void; /** The function called to update toolbar item state. */ onUpdate: () => ToolbarItem; } interface ToolbarItems { /** Adds a new item to the toolbar. * @param item An item to be added. * @example Usage example: * ```javascript * var pdfExportButton = { * key: '$pdfExportButtonKey', * iconCssClass: 'mdi mdi-file-pdf', * 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); * ``` */ addItem: (item: ToolbarItem) => void; /** Updates a previously added toolbar item. * * @param key the toolbar item key, as it was specified in the addItem parameters. * @param itemUpdate New toolbar item settings. */ updateItem: (key: string, itemUpdate: ToolbarItem) => void; /** Removes existing item from the toolbar. * @param key The toolbar item key, as it was specified in the addItem parameters. * @example Usage example: * ```javascript * viewer.toolbar.desktop.removeItem(pdfExportButton); * ``` */ removeItem: (key: string) => void; /** * Returns identifiers of default and added buttons in the order in which they will be displayed in the toolbar. * @example Usage example: * ```javascript * viewer.toolbar.desktop.layout(viewer.toolbar.desktop.getKeys().reverse()) * ``` */ getKeys: () => string[]; /** Sets the keys of the visible toolbar items and their order. * @param keys The array of the keys of toolbar items to be visible on toolbar in the desired order. * @example Usage example: * ```javascript * viewer.toolbar.desktop.addItem(pdfExportButton); * // now you want to remove everything except pdfExportButton and the navigation block. * viewer.toolbar.desktop.layout(['$pdfExportButtonKey', '$navigation']); * ``` * will create a toolbar with the export button and the "navigation" block. */ layout: (keys: string[]) => void; } /** Type representing a viewer's toolbar instance. */ interface Toolbar { /** * Toggles the toolbar visibility. * @param show Pass **true** to switch toolbar ON, and vise-versa. Do not pass any value to toggle visibility. * @example Usage example: * ```javascript * viewer.toolbar.toggle(false); // hide toolbar * ``` */ toggle: (show?: boolean) => void; /** * Desktop layout toolbar items. * @example Usage example: * ```javascript * viewer.toolbar.desktop.addItem({ * key: 'coolButton', * title: 'Cool Button', * iconCssClass: 'mdi mdi-emoticon-cool', * action: () => { * console.log('Cool!'); * }} * ) * ``` */ desktop: ToolbarItems; /** * Mobile layout toolbar items. * @example Usage example: * ```javascript * viewer.toolbar.mobile.addItem({ * key: 'pizzaButton', * title: 'Cool Pizza', * iconCssClass: 'mdi mdi-pizza', * action: () => { * console.log('Pizza Time!'); * }} * ) * ``` */ mobile: ToolbarItems; /** * Fullscreen mode toolbar items. * @example Usage example: * ```javascript * viewer.toolbar.fullscreen.addItem({ * key: 'fishButton', * title: 'Fish', * iconCssClass: 'mdi mdi-fish', * action: () => { * console.log('Just a fish.'); * }} * ) * ``` */ fullscreen: ToolbarItems; } /** Represents a color item with multiple shades. */ type ColorThemeShades = { veryLight: string; light: string; lighter: string; lightMedium: string; medium: string; base: string; darkMedium: string; darker: string; dark: string; veryDark: string; }; /** Specifies the type of the color theme. */ type ColorThemeType = 'light' | 'dark'; /** Represents a color item in a color theme. */ type ColorThemeItem = string | ColorThemeShades; /** Represents the UI theme settings for customizing the appearance. */ type ColorTheme = { name: string; type: ColorThemeType; backgroundMain: string; backgroundPanels: string; primary?: ColorThemeItem; secondary?: ColorThemeItem; neutral?: ColorThemeItem; error?: ColorThemeItem; warning?: ColorThemeItem; fontFamily?: string; }; /** Represents the default themes */ declare const ColorThemes: { default: ColorTheme; defaultDark: ColorTheme; darkOled: ColorTheme; highContrast: ColorTheme; highContrastDark: ColorTheme; activeReports: ColorTheme; activeReportsDark: ColorTheme; }; /** Result of an action. */ interface ActionResult { /** Whether the action should be canceled. */ cancel: boolean; } /** Information about an action. */ interface ActionInfo { /** Type of the action. */ type: ActionType; /** Parameters associated with the action, if any. */ parameters?: ActionParameter[]; /** Target of the action, if any. */ target?: ActionTarget; } /** Possible action types. */ type ActionType = 'toggle' | 'sort' | 'bookmark' | 'hyperlink' | 'drillthrough' | 'applyParameters'; /** Parameters for an action. */ type ActionParameter = { /** Parameter name. */ name: string; /** Type of the apply parameter. */ type?: 'Set' | 'Reset' | 'Toggle'; /** Values associated with the parameter. */ values: any[]; }; /** Target of an action. */ type ActionTarget = { pageNumber: number; selector?: string; } | string; /** Report types. */ declare enum ReportType { Section = 0, Page = 1, Rdl = 2 } /** All supported exports. */ type ExportTypes = 'Pdf' | 'Xlsx' | 'Xls' | 'Doc' | 'Docx' | 'Rtf' | 'Json' | 'Xml' | 'Csv' | 'Txt' | 'Tiff' | 'Mht' | 'XlsxData' | 'CsvData' | 'TextPrint'; /** Describes the parameter value. */ interface ParameterValue { label: string; value: any; } /** Describes the parameter. */ interface ParameterDescriptor { name: string; prompt: string; dataType: any; selectAllValue: any; allowBlank: boolean; nullable: boolean; multiValue: boolean; multiline: boolean; hidden: boolean; usedInQuery: boolean; dateOnly: boolean; dependsOn: string[]; validValues: ParameterValue; defaultValue: ParameterValue; displayFormat: string; actualDefaultValues: ParameterValue[]; enableEmptyArray: boolean; } /** Describes the report. */ interface ReportInfo { /** The name of the report. */ name: string; /** The parameters of the report. */ parameters: ParameterDescriptor[]; /** Contains layout for custom parameters panel. */ parametersView: string; /** The display type of the report. */ displayType: ViewMode; /** Indicates whether GalleyMode is allowed. */ galleyModeAllowed: boolean; /** The size type of the report. */ sizeType: SizeType; /** Export types available for a given report. */ exports: ExportTypes[]; /**The type of the report. */ type: ReportType; /** The preffered type of viewer to use. */ viewerType: ViewerType; /** List of report section names*/ sections: string[]; } /** * Report: * Uses standard UI and default rendering settings * Dashboard: * Uses dashboard UI and dashboard rendering settings, which include: * rendering all pages in galley mode, with report background color as viewer area background */ type ViewerType = 'Report' | 'Dashboard'; /** All supported paging modes. */ type ViewMode = 'Single' | 'Continuous'; /** Report render modes. */ type RenderMode = 'Paginated' | 'Galley'; /** Report render backend. */ type RenderFormat = 'auto' | 'html' | 'svg'; /** All supported size types. */ type SizeType = 'Default' | 'FitToWidth' | 'FitToPage' | 'Stretch'; /** Describes the initial zoom percentage value. */ type Percentage = { percentage: number; }; /** All supported initial zoom modes. */ type InitialZoomMode = 'FitToPage' | 'FitToWidth' | Percentage; /** Export callback */ type ExportCallback = (uri: string) => void; /** Describes the parameter value used to run the report. */ interface Parameter { /** The name of the parameter. */ name: string; /** The value(s) of the parameter. */ values: string[]; } /** Describes the search options. */ interface SearchOptions { /** Whether the search should respect the case. */ matchCase: boolean; /** Whether the search should look for a whole phrase. */ wholePhrase: boolean; } /** Describes the error severity. */ type ErrorSeverity = 'error' | 'warn' | 'info' | 'debug'; /** Describes the error. */ interface ErrorInfo { /** Error message. */ message: string; /** Error details. */ details: string; /** Error severity. */ severity: ErrorSeverity; } /** Describes the settings for parameters panel. */ interface ParametersPanelSettings { /** * Adjusts the position of the parameters panel. * @example Usage example: * ```javascript * location: 'top' * ``` * Adjusts the opening mode of the parameters panel. * @example Usage example: * ```javascript * open: 'always' * ``` */ location: 'top' | 'default'; open: 'always' | 'auto'; } /** Describes the position of panels (search, parameters etc). */ type PanelsLocation = 'sidebar' | 'toolbar'; /** Describes the settings to connect the Web API. */ interface ReportServiceSettings { /** * The url to connect the Web API. * @example Usage example (prefix only): * ```javascript * url: '/api/reporting' // default value * ``` * @example Usage example (full URL): * ```javascript * url: 'http:example.com/api/reporting' * ``` */ url?: string; /** * The security key needed to access the Web API. * @example Usage example: * ```javascript * securityToken: 'security_token', * ``` */ securityToken?: string; /** * Callback before any request. * Allows to change RequestInit object before fetch request - https://fetch.spec.whatwg.org/#requestinit. * @example Usage example: * ```javascript onRequestAsync: (init) => { return new Promise((resolve, reject) => { init.headers.Authorization = 'security_token'; return resolve(init); }); * ``` */ onRequestAsync?: (init: RequestInit) => Promise; /** * Callback before any request. * Allows to change RequestInit object before fetch request - https://fetch.spec.whatwg.org/#requestinit. * @example Usage example: * ```javascript onRequest: (init) => init.headers.Authorization = 'security_token'; * ``` */ onRequest?: Function; } /** Describes custom default settings. */ interface DefaultExportSettings { [exportFormat: string]: { [settingName: string]: { value?: string | boolean | number; visible?: boolean; }; }; } /** Describes page view options. */ interface PageViewOptions { /** Defines horizontal alignment for report page inside view area */ horizontalAlignment?: 'left' | 'right' | 'center'; /** Specifies how the report page is shown inside the viewer. * If value is 'standard' the page rendered on the virtual paper which placed on the gray virtual desktop. * If value is 'noPaper' the page rendered whithout gray area arond. * */ viewMode?: 'standard' | 'noPaper'; } /** Describes animation that can be applied to the report view */ interface AnimationOptions { loadChart?: LoadChartAnimationOptions; hoverChart?: HoverChartAnimationOptions; hoverTable?: HoverTableAnimationOptions; } interface HoverTableAnimationOptions { /** * Enable hover table and tablix animation. Default value: false. * @example * enabled: true */ enabled?: boolean; /** * Specifies the background color on hover over the table and tablix row. Default value: 'LightGray'. * @example * backgroundColor: 'LightGray' */ backgroundColor?: string; /** * Specifies the text color on hover over the table and tablix row. Default value: `undefined`.\ * If the value is `undefined`, text color of row cells remains unchanged on hover. * @example * textColor: 'DarkGray' */ textColor?: string; } /** Describes load chart animation that can be applied to the report view. */ type LoadChartAnimationOptions = { /** * Enable load chart animation. Default value: false. * @example * enabled: true */ enabled?: boolean; }; /** Describes hover chart animation that can be applied to the report view. */ type HoverChartAnimationOptions = { /** * Enable hover chart animation. Default value: false. * @example * enabled: true */ enabled?: boolean; }; /** The following options can be set during initialization or at run time while working with the JS Viewer. */ interface InitializationOptions { /** * * @deprecated This property is deprecated and will be removed in future versions. * Use the new `onAction` property instead. * * The callback that is invoked before the JS Viewer opens the hyperlink, bookmark link, * drill down report or toggles the report control visibility. * @example Usage example: * ```javascript * // ESM usage * import { createViewer } from './jsViewer.min.js'; * const viewer = createViewer({ * action: (actionType, actionParams, actionTarget) => console.log('Action type: ' + actionType + '; Action parameters: ' + actionParams + '; Action target: ' + actionTarget); * }); * ``` * @example Usage example: * ```javascript * // UMD usage * var viewer = GrapeCity.ActiveReports.JSViewer.create({ * action: (actionType, actionParams, actionTarget) => console.log('Action type: ' + actionType + '; Action parameters: ' + actionParams + '; Action target: ' + actionTarget); * }); * ``` */ action?: (actionType: string, actionParams: any[], actionTarget: string) => void; /** * The callback that is triggered before the JS Viewer executes an action. * * @param action - An object containing details about the action being triggered. * @returns A promise that resolves to an `ActionResult`, determining how the action should be handled. * * @example Usage example: * ```javascript * // ESM usage * import { createViewer } from './jsViewer.min.js'; * const viewer = createViewer({ * onAction: async (action) => { * if (action.type === 'hyperlink') { * return { cancel: true }; // Prevent opening the link * } * return { cancel: false }; * } * }); * ``` * @example Usage example: * ```javascript * // UMD usage * var viewer = GrapeCity.ActiveReports.JSViewer.create({ * onAction: async (action) => { * if (action.type === 'hyperlink') { * return { cancel: true }; // Prevent opening the link * } * return { cancel: false }; * } * }); * ``` */ onAction?: (action: ActionInfo) => Promise; /** The report view animation options. * @example Usage example: * ```javascript * // 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: * ```javascript * // UMD usage * var viewer = GrapeCity.ActiveReports.JSViewer.create({ * animation: { * loadChart: { * enabled: true * }, * hoverChart: { * enabled: true * }, * hoverTable: { * enabled: true, * backgroundColor: 'LightGray', * textColor: 'DarkGray' * } * } * }); * ``` */ animation?: AnimationOptions; /** * When true, view area background color is filled with report body color * available only for dashboard reports * @example Usage example: * ```javascript * // ESM usage * import { createViewer } from './jsViewer.min.js'; * const viewer = createViewer({ * autoBackgroundColor : true; * }); * ``` * @example Usage example: * ```javascript * // UMD usage * var viewer = GrapeCity.ActiveReports.JSViewer.create({ * autoBackgroundColor : true; * }); * ``` */ autoBackgroundColor?: boolean; /** * 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: * ```javascript * // ESM usage * import { createViewer } from './jsViewer.min.js'; * const viewer = createViewer({ * availableExports: ['Xml', 'Pdf'] * }); * ``` * @example Usage example: * ```javascript * // UMD usage * var viewer = GrapeCity.ActiveReports.JSViewer.create({ * availableExports: ['Xml', 'Pdf'] * }); * ``` */ availableExports?: ExportTypes[]; /** * 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: * ```javascript * // ESM usage * import { createViewer } from './jsViewer.min.js'; * const viewer = createViewer({ * defaultExportSettings: { * xls: { * FileName: { * value: "Hihihi", * visible: false * } * } * } * }); * ``` * @example Usage example: * ```javascript * // UMD usage * var viewer = GrapeCity.ActiveReports.JSViewer.create({ * defaultExportSettings: { * xls: { * FileName: { * value: "Hihihi", * visible: false * } * } * } * }); * ``` */ defaultExportSettings?: DefaultExportSettings; /** * Set up single page or continuous page. * @example Usage example: * ```javascript * // ESM usage * import { createViewer } from './jsViewer.min.js'; * const viewer = createViewer({ * displayMode: 'Continuous' * }); * ``` * @example Usage example: * ```javascript * // UMD usage * var viewer = GrapeCity.ActiveReports.JSViewer.create({ * displayMode: 'Continuous' * }); * ``` */ displayMode?: ViewMode; /** * The callback that is invoked when a document is loaded entirely on the server. * @example Usage example: * ```javascript * // 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: * ```javascript * // UMD usage * var viewer = GrapeCity.ActiveReports.JSViewer.create({ * documentLoaded: () => console.log('The document is loaded entirely on the server') * }); * ``` */ documentLoaded?: () => void; /** * JQuery selector that specifies the element that hosts the JS Viewer control. * @example Usage example: * ```javascript * // ESM usage * import { createViewer } from './jsViewer.min.js'; * const viewer = createViewer({ * element: '#viewerContainer' * }); * ``` * @example Usage example: * ```javascript * // UMD usage * var viewer = GrapeCity.ActiveReports.JSViewer.create({ * element: '#viewerContainer' * }); * ``` */ element: string; /** * 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. * @example To hide the default error panel: * ```javascript * // 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: * ```javascript * // 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; * } * } * }); * ``` */ error?: (error: ErrorInfo) => boolean; /** * Set up the initial zoom mode. * @example Usage example: * ```javascript * // ESM usage * import { createViewer } from './jsViewer.min.js'; * const viewer = createViewer({ * initialZoomMode: 'FitToWidth'; * }); * ``` * @example Usage example: * ```javascript * // UMD usage * var viewer = GrapeCity.ActiveReports.JSViewer.create({ * initialZoomMode: 'FitToWidth'; * }); * ``` */ initialZoomMode?: InitialZoomMode; /** * 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: * ```javascript * // ESM usage * import { createViewer } from './jsViewer.min.js'; * const viewer = createViewer({ * locale: 'ja-JP' * }); * ``` * @example Usage example: * ```javascript * // UMD usage * var viewer = GrapeCity.ActiveReports.JSViewer.create({ * locale: 'ja-JP' * }); * ``` */ locale?: string; /** * The JSON containing the localization strings. * Not all strings are necessary — missing values ​​will be displayed using EN localization data. * @example Usage example: * ```javascript * // ESM usage * import { createViewer } from './jsViewer.min.js'; * const viewer = createViewer({ * localeData: JSON.parse( `{ * "export": { * "boolTextFalse": "No", * "boolTextTrue": "Yes" * }, * "viewer": { * "toolbar": { * "refresh": "Refresh" * } * } * }` * ) *}); * ``` * @example Usage example: * ```javascript * // UMD usage * var viewer = GrapeCity.ActiveReports.JSViewer.create({ * localeData: JSON.parse( `{ * "export": { * "boolTextFalse": "No", * "boolTextTrue": "Yes" * }, * "viewer": { * "toolbar": { * "refresh": "Refresh" * } * } * }` * ) *}); * ``` */ localeData?: JSON; /** * 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: * ```javascript * // ESM usage * import { createViewer } from './jsViewer.min.js'; * const viewer = createViewer({ * localeUri: './locale.json' * }); * ``` * locale.json: * ```json * { * "export": { * "boolTextFalse": "No", * "boolTextTrue": "Yes", * ... * }, * "exportcsv": { * "friendlyName": "-CSV-", * "settings": { * "ColumnsDelimiter": { * "label": "Column Separator", * "category": "Other" * }, * ... * }, * ... * }, * ... * } * ``` * @example Usage example: * ```javascript * // UMD usage * var viewer = GrapeCity.ActiveReports.JSViewer.create({ * localeUri: './locale.json' * }); * ``` * locale.json: * ```json * { * "export": { * "boolTextFalse": "No", * "boolTextTrue": "Yes", * ... * }, * "exportcsv": { * "friendlyName": "-CSV-", * "settings": { * "ColumnsDelimiter": { * "label": "Column Separator", * "category": "Other" * }, * ... * }, * ... * }, * ... * } * ``` */ localeUri?: string; /** Defines horizontal alignment and view for report page like part of the WebPage or 'paper view' * @example Usage example: * ```javascript * // ESM usage * import { createViewer } from './jsViewer.min.js'; * const viewer = createViewer({ * pageView: { * horizontalAlignment: 'left', * viewMode: 'standard' * } * }); * ``` * @example Usage example: * ```javascript * // UMD usage * var viewer = GrapeCity.ActiveReports.JSViewer.create({ * pageView: { * horizontalAlignment: 'left', * viewMode: 'standard' * } * }); * ``` */ pageView?: PageViewOptions; /** * Set up the parameters panel settings. * @example Usage example: * ```javascript * // ESM usage * import { createViewer } from './jsViewer.min.js'; * const viewer = createViewer({ * parametersPanel: { * * location: 'top', * * open: 'always' * }}); * ``` * @example Usage example: * ```javascript * // UMD usage * var viewer = GrapeCity.ActiveReports.JSViewer.create({ * parametersPanel: { * * location: 'top', * * open: 'always' * }}); * ``` */ parametersPanel?: ParametersPanelSettings; /** * The position of panels (search, parameters etc): 'toolbar' or 'sidebar'. Default value is 'toolbar'. * @example Usage example: * ```javascript * // ESM usage * import { createViewer } from './jsViewer.min.js'; * const viewer = createViewer({ * panelsLocation: 'sidebar' * }); * ``` * @example Usage example: * ```javascript * // UMD usage * var viewer = GrapeCity.ActiveReports.JSViewer.create({ * panelsLocation: 'sidebar' * }); * ``` */ panelsLocation?: PanelsLocation; /** * Set up render mode: 'auto', 'html' or 'svg' * @example Usage example: * ```javascript * // ESM usage * import { createViewer } from './jsViewer.min.js'; * const viewer = createViewer({ * renderFormat : 'auto' * }); * ``` * @example Usage example: * ```javascript * // UMD usage * var viewer = GrapeCity.ActiveReports.JSViewer.create({ * renderFormat : 'auto' * }); * ``` */ renderFormat?: RenderFormat; /** * Set up initial render mode: 'Paginated' or 'Galley'. Default value is 'Paginated'. * @example Usage example: * ```javascript * import { createViewer } from './jsViewer.min.js'; * const viewer = createViewer({ * renderMode: 'Galley' * }); * ``` * @example Usage example: * ```javascript * // UMD usage * var viewer = GrapeCity.ActiveReports.JSViewer.create({ * renderMode: 'Galley' * }); * ``` */ renderMode?: RenderMode; /** * The id of the report to be shown by the JS Viewer. * @example Usage example: * ```javascript * // ESM usage * import { createViewer } from './jsViewer.min.js'; * const viewer = createViewer({ * reportID: 'AnnualReport.rdlx' * }); * ``` * @example Usage example: * ```javascript * // UMD usage * var viewer = GrapeCity.ActiveReports.JSViewer.create({ * reportID: 'AnnualReport.rdlx' * }); * ``` */ reportID?: string; /** * The callback that is invoked when the JS Viewer obtains the information about the requested report. * @example Usage example: * ```javascript * // 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: * ```javascript * // UMD usage * var viewer = GrapeCity.ActiveReports.JSViewer.create({ * reportLoaded: (reportInfo) => console.log('The report ' + reportInfo.name + ' was successfully loaded!') * }); * ``` */ reportLoaded?: (reportInfo: ReportInfo) => void; /** * The array of the {name, value} pairs that describe the parameters values used to run the report. * @example Usage example: * ```javascript * // ESM usage * import { createViewer } from './jsViewer.min.js'; * const viewer = createViewer({ * reportParameters: [{ name: 'ReportParameter1', values: ['1']}] * }); * ``` * @example Usage example: * ```javascript * // UMD usage * var viewer = GrapeCity.ActiveReports.JSViewer.create({ * reportParameters: [{ name: 'ReportParameter1', values: ['1']}] * }); * ``` */ reportParameters?: Parameter[]; /** * Set up the settings to connect the Web API. * @example Usage example: * ```javascript * // ESM usage * import { createViewer } from './jsViewer.min.js'; * const viewer = createViewer({ * reportService: { * url: 'http://example.com/api/reporting', * securityToken: '42A9CD80A4F3445A9BB60A221D042FCC', * } * }); * ``` * @example Usage example: * ```javascript * // UMD usage * var viewer = GrapeCity.ActiveReports.JSViewer.create({ * reportService: { * url: 'http://example.com/api/reporting', * securityToken: '42A9CD80A4F3445A9BB60A221D042FCC', * } * }); * ``` */ reportService?: ReportServiceSettings; /** * JQuery selector that specifies the element that hosts the JS Viewer control. * @example Usage example: * ```javascript * // ESM usage * import { createViewer } from './jsViewer.min.js'; * const viewer = createViewer({ * silentPrint: true * }); * ``` * @example Usage example: * ```javascript * // UMD usage * var viewer = GrapeCity.ActiveReports.JSViewer.create({ * silentPrint: true * }); * ``` */ silentPrint?: boolean; /** * Viewer's UI themes settings. * @example Pre-defined theme selection USM example: * ```javascript * // ESM usage * import {createViewer} from './jsViewer.min.js'; * const viewer = createViewer({ * element: '#root', * themes: { * initialTheme: 'defaultDark', * } * }, * }); * ``` * * @example Pre-defined theme selection example: * ```javascript * var viewer = GrapeCity.ActiveReports.JSViewer.create({ * themes: { * initialTheme: 'defaultDark', * } * }); * ``` */ themes?: ThemeSettings; /** * Specifies custom css styles that will be applied to the report items. * @example Usage example: * ```javascript * // ESM usage * import { createViewer } from './jsViewer.min.js'; * const viewer = createViewer({ * reportItemsStyles: { * cssUri: 'custom-styles.css' * } * }); * ``` * @example Usage example: * ```javascript * // UMD usage * var viewer = GrapeCity.ActiveReports.JSViewer.create({ * reportItemsStyles: { * cssUri: 'custom-styles.css' * } * }); * ``` */ reportItemsStyles?: ReportItemsStyles; /** * When true, fonts are embedded in the report output. Works for the SVG render mode only. Default value is false. * @example Usage example: * ```javascript * // ESM usage * import { createViewer } from './jsViewer.min.js'; * const viewer = createViewer({ * embedFonts: true * }); * ``` * @example Usage example: * ```javascript * // UMD usage * var viewer = GrapeCity.ActiveReports.JSViewer.create({ * embedFonts: true * }); * ``` */ embedFonts?: boolean; } /** Defines the viewer's themes settings. */ type ThemeSettings = { /** * The initial theme to be applied. * * @default "default" */ initialTheme: string; themeSelector?: { /** * shows Theme Picker in UI * * @default true */ enabled: boolean; /** * An array of available themes that can be picked by the user. * These themes can be either built-in themes or custom ones. * * @default ["default", "defaultDark", "darkOled", "highContrast", "highContrastDark", "activeReports"] */ availableThemes: (string | ColorTheme)[]; }; }; /** Defines the report item css styles. */ type ReportItemsStyles = { /** * Specifies the URI of a custom css that will be applied to the report items. * @example * cssUri: 'custom-styles.css' */ cssUri?: string; }; /** The following options can be set during initialization or at run time while working with the JS Viewer. */ interface ExportOptions extends PrintOptions { /** * The document format type to report be exported to. * @example Usage example: * ```javascript * // ESM usage * import {exportReport} from './jsViewer.min.js'; * exportReport({ * exportType: 'Pdf' * }); * ``` * @example Usage example: * ```javascript * // UMD usage * GrapeCity.ActiveReports.JSViewer.export({ * exportType: 'Pdf' * }); * ``` */ exportType: ExportTypes; /** * The callback that is invoked before the export result request sent. * @example Usage example: * ```javascript * // ESM usage * import {exportReport} from './jsViewer.min.js'; * exportReport({ * callback: ()=>console.log('test') * }); * ``` * @example Usage example: * ```javascript * // UMD usage * GrapeCity.ActiveReports.JSViewer.export({ * callback: ()=>console.log('test') * }); * ``` */ callback: ExportCallback; /** * Export settings * @example Usage example: * ```javascript * // ESM usage * import {exportReport} from './jsViewer.min.js'; * exportReport({ * settings : { * EmbedFonts:'All', * Title:'MyInvoice' *}}); * ``` * @example Usage example: * ```javascript * // UMD usage * GrapeCity.ActiveReports.JSViewer.export({ * settings : { * EmbedFonts:'All', * Title:'MyInvoice' *}}); * ``` */ settings?: any; /** * @example Usage example: * ```javascript * // ESM usage * import {exportReport} from './jsViewer.min.js'; * exportReport({ * saveAsDialog: true * }); * ``` * @example Usage example: * ```javascript * // UMD usage * GrapeCity.ActiveReports.JSViewer.export({ * saveAsDialog: true * }); * ``` */ saveAsDialog?: boolean; } /** The following options can be set at run time while working with the JS Viewer. */ interface PrintOptions { /** * The id of the report to be shown by the JS Viewer. * @example Usage example: * ```javascript * // ESM usage * import { printReport } from './jsViewer.min.js'; * printReport({ * reportID: 'AnnualReport.rdlx' * }): * ``` * @example Usage example: * ```javascript * // UMD usage * GrapeCity.ActiveReports.JSViewer.print({ * reportID: 'AnnualReport.rdlx' * }): * ``` */ reportID: string; /** * The array of the {name, value} pairs that describe the parameters values used to run the report. * @example Usage example: * ```javascript * // ESM usage * import { printReport } from './jsViewer.min.js'; * printReport({ * reportParameters: [{ name: 'ReportParameter1', values: ['1']}] * }): * ``` * @example Usage example: * ```javascript * // UMD usage * GrapeCity.ActiveReports.JSViewer.print({ * reportParameters: [{ name: 'ReportParameter1', values: ['1']}] * }): * ``` */ reportParameters?: Parameter[]; /** * The callback that is invoked when an error occurs in the process of displaying the report. * @example To handle an error: * ```javascript * // ESM usage * import { printReport } from './jsViewer.min.js'; * printReport({ * error: (error) => { * if (error.message) { * // show error message. * alert("Internal error! Please ask administrator."); * } * } * }): * ``` * @example To handle an error: * ```javascript * // UMD usage * GrapeCity.ActiveReports.JSViewer.print({ * error: (error) => { * if (error.message) { * // show error message. * alert("Internal error! Please ask administrator."); * } * } * }): * ``` */ error: (error: ErrorInfo) => void; /** * Set up the settings to connect the Web API. * @example Usage example: * ```javascript * // ESM usage * import { printReport } from './jsViewer.min.js'; * printReport({ * reportService: { * url: 'http://example.com/api/reporting', * securityToken: '42A9CD80A4F3445A9BB60A221D042FCC', * } * }): * ``` * @example Usage example: * ```javascript * // UMD usage * GrapeCity.ActiveReports.JSViewer.print({ * reportService: { * url: 'http://example.com/api/reporting', * securityToken: '42A9CD80A4F3445A9BB60A221D042FCC', * } * }): * ``` */ reportService?: ReportServiceSettings; } interface JSViewer { /** * Apply slicers to the opened report. * @param slicers The array of the slicers values. * @example Usage example: * ```javascript * viewer.applySlicers([{name:'Year', type: 'Set', value: '2022' }]) * ``` */ /** * Open report. * @param reportID The id of the report. * @param reportParameters The array of the parameters values. * @example Usage example: * ```javascript * // ESM usage * import { createViewer } from './jsViewer.min.js'; * const viewer = createViewer({ * element: '#root' * }); * viewer.openReport('Invoice.rdlx') * ``` * @example Usage example: * ```javascript * // UMD usage * var viewer = GrapeCity.ActiveReports.JSViewer.create({ * element: '#root' * }); * viewer.openReport('Invoice.rdlx') * ``` */ openReport: (reportID: string, reportParameters?: Parameter[]) => void; /** * Refreshes the report preview. * @example Usage example: * ```javascript * // ESM usage * import { createViewer } from './jsViewer.min.js'; * const viewer = createViewer({ * element: '#root' * }); * viewer.refresh() * ``` * @example Usage example: * ```javascript * // UMD usage * var viewer = GrapeCity.ActiveReports.JSViewer.create({ * element: '#root' * }); * viewer.refresh() * ``` */ refresh: () => void; /** * Prints the currently displayed report if any. * @example Usage example: * ```javascript * // ESM usage * import { createViewer } from './jsViewer.min.js'; * const viewer = createViewer({ * element: '#root', * reportID: 'AnnualReport.rdlx' * }); * viewer.print() * ``` * @example Usage example: * ```javascript * // UMD usage * var viewer = GrapeCity.ActiveReports.JSViewer.create({ * element: '#root', * reportID: 'AnnualReport.rdlx' * }); * viewer.print() * ``` */ print: () => void; /** * Makes the viewer to display the specific page. Page numeration starts with 1. * @param pageNumber The number of pages to go to. * @example Usage example: * ```javascript * // ESM usage * import { createViewer } from './jsViewer.min.js'; * const viewer = createViewer({ * element: '#root', * reportID: 'AnnualReport.rdlx' * }); * viewer.goToPage(1) * ``` * @example Usage example: * ```javascript * // UMD usage * var viewer = GrapeCity.ActiveReports.JSViewer.create({ * element: '#root', * reportID: 'AnnualReport.rdlx' * }); * viewer.goToPage(1) * ``` */ goToPage: (pageNumber: number) => void; /** * Makes the viewer to display the parent report of the drill-down report. * @example Usage example: * ```javascript * // ESM usage * import { createViewer } from './jsViewer.min.js'; * const viewer = createViewer({ * element: '#root', * reportID: 'AnnualReport.rdlx' * }); * viewer.backToParent() * ``` * @example Usage example: * ```javascript * // UMD usage * var viewer = GrapeCity.ActiveReports.JSViewer.create({ * element: '#root', * reportID: 'AnnualReport.rdlx' * }); * viewer.backToParent() * ``` */ backToParent: () => void; /** * Removes the viewer content from the element. * @example Usage example: * ```javascript * // ESM usage * import { createViewer } from './jsViewer.min.js'; * const viewer = createViewer({ * element: '#root' * }); * viewer.destroy() * ``` * @example Usage example: * ```javascript * // UMD usage * var viewer = GrapeCity.ActiveReports.JSViewer.create({ * element: '#root' * }); * viewer.destroy() * ``` */ destroy: () => void; /** * Exports the currently displayed report. * @param exportType Specifies export format. * @param callback Function that is invoked once the export result is available (its Url is passed in the callback). * @param saveAsDialog Indicates whether the save as dialog should be shown immediately once the export result is ready. * @param settings The export settings are available for RenderingExtensions. * @param isCancelRequested The function is periodically called with a check to cancel the export task. * @example Usage example: * ```javascript * // ESM usage * import { createViewer } from './jsViewer.min.js'; * const viewer = createViewer({ * element: '#root', * reportID: 'AnnualReport.rdlx', * availableExports: ['Pdf'] * }); * 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; * } * }; * ``` * @example Usage example: * ```javascript * // UMD usage * var viewer = GrapeCity.ActiveReports.JSViewer.create({ * element: '#root', * reportID: 'AnnualReport.rdlx', * availableExports: ['Pdf'] * }); * 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; * } * }; * ``` */ export: (exportType: ExportTypes, callback: ExportCallback, saveAsDialog: boolean, settings: any, isCancelRequested?: () => boolean | Promise) => void; /** * 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. * @param searchTerm String to find. * @param searchOptions The object optionally defines the search options. * @param callback The function to call after performing search. * @example Usage example: * ```javascript * // ESM usage * import { createViewer } from './jsViewer.min.js'; * const viewer = createViewer({ * element: '#root', * reportID: 'AnnualReport.rdlx' * }); * viewer.search('a', { matchCase: true, wholePhrase: false }, (results) => console.log(results)) * ``` * @example Usage example: * ```javascript * // UMD usage * var viewer = GrapeCity.ActiveReports.JSViewer.create({ * element: '#root', * reportID: 'AnnualReport.rdlx' * }); * viewer.search('a', { matchCase: true, wholePhrase: false }, (results) => console.log(results)) * ``` */ search: (searchTerm: string, searchOptions: SearchOptions, callback: (searchResult: any) => void) => void; /** * Obtains the report TOC. * @returns TOC tree. * @example Usage example: * ```javascript * // ESM usage * import { createViewer } from './jsViewer.min.js'; * const viewer = createViewer({ * element: '#root', * reportID: 'AnnualReport.rdlx' * }); * console.log(viewer.getToc()) * ``` * @example Usage example: * ```javascript * // UMD usage * var viewer = GrapeCity.ActiveReports.JSViewer.create({ * element: '#root', * reportID: 'AnnualReport.rdlx' * }); * console.log(viewer.getToc()) * ``` */ getToc: () => any; /** * Gets the page count of the currently displayed report. * @returns An integer representing page count. * @example Usage example: * ```javascript * // ESM usage * import { createViewer } from './jsViewer.min.js'; * const viewer = createViewer({ * element: '#root', * reportID: 'AnnualReport.rdlx' * }); * console.log(viewer.pageCount()) * ``` * @example Usage example: * ```javascript * // UMD usage * var viewer = GrapeCity.ActiveReports.JSViewer.create({ * element: '#root', * reportID: 'AnnualReport.rdlx' * }); * console.log(viewer.pageCount()) * ``` */ pageCount: () => number; /** * Gets the currently displayed page number. * @returns An integer representing currently displayed page number. * @example Usage example: * ```javascript * // ESM usage * import { createViewer } from './jsViewer.min.js'; * const viewer = createViewer({ * element: '#root', * reportID: 'AnnualReport.rdlx' * }); * console.log(viewer.currentPage()) * ``` * @example Usage example: * ```javascript * // UMD usage * var viewer = GrapeCity.ActiveReports.JSViewer.create({ * element: '#root', * reportID: 'AnnualReport.rdlx' * }); * console.log(viewer.currentPage()) * ``` */ currentPage: () => number; /** * The viewer's sidebar instance. The developer may use it to toggle the sidebar visibility. * @example Usage example: * ```javascript * // ESM usage * import { createViewer } from './jsViewer.min.js'; * const viewer = createViewer({ * element: '#root' * }); * viewer.sidebar.toggle(false); // hide sidebar * ``` * @example Usage example: * ```javascript * // UMD usage * var viewer = GrapeCity.ActiveReports.JSViewer.create({ * element: '#root' * }); * viewer.sidebar.toggle(false); // hide sidebar * ``` */ sidebar: Sidebar; /** * The viewer's toolbar instance. The developer may use it to add the custom elements or remove the existing ones. * @example Usage example: * ```javascript * // ESM usage * import { createViewer } from './jsViewer.min.js'; * const viewer = createViewer({ * element: '#root' * }); * viewer.toolbar.toggle(false); // hide toolbar * ``` * @example Usage example: * ```javascript * // UMD usage * var viewer = GrapeCity.ActiveReports.JSViewer.create({ * element: '#root' * }); * viewer.toolbar.toggle(false); // hide toolbar * ``` */ toolbar: Toolbar; /** * Gets or sets the viewer UI theme. * @example Usage example ESM: * ```javascript * import {createViewer, ColorThemes} from './jsViewer.min.js'; * const viewer = createViewer({ * element: '#root', * }); * * viewer.theme = ColorThemes.defaultDark; * ``` * * @example Usage example UMD: * ```javascript * var viewer = GrapeCity.ActiveReports.JSViewer.create({ * element: '#root' * }); * viewer.theme: ActiveReports.ColorThemes.defaultDark * ``` */ theme?: string | ColorTheme; } /** * Do export of the report without showing a viewer. * @param params The export options. * @param isCancelRequested The function is periodically called with a check to cancel the export task. * @example Usage example: * ```javascript * // ESM usage * import {exportReport} from './jsViewer.min.js'; * exportReport({ * reportID:'Invoice.rdlx', * exportType: 'Pdf', * saveAsDialog: true, * settings : { * EmbedFonts:'All', * Title:'MyInvoice' * }}); * ``` */ declare function exportReport(exportOptions: ExportOptions, isCancelRequested?: () => boolean): Promise; /** * Create and initialize JS Viewer. * @param params Initialization options. * @returns {JSViewer} JS Viewer instance. * @example Usage example: * ```javascript * // ESM usage * import { createViewer } from './jsViewer.min.js'; * const viewer = createViewer({ * element: '#root', * // other properties * }); * ``` */ declare function createViewer(params: InitializationOptions): JSViewer; /** * Print the report without showing a viewer. * @param params The print options. * @param isCancelRequested The function is periodically called with a check to cancel the export task. * @example Usage example: * ```javascript * // ESM usage * import { printReport } from './jsViewer.min.js'; * printReport({ * reportID: 'AnnualReport.rdlx' * }); * ``` */ declare function printReport(printOptions: PrintOptions, isCancelRequested?: () => boolean): Promise; export { type ActionInfo, type ActionParameter, type ActionResult, type ActionTarget, type ActionType, type AnimationOptions, type ColorTheme, type ColorThemeItem, type ColorThemeShades, type ColorThemeType, ColorThemes, type DefaultExportSettings, type ErrorInfo, type ErrorSeverity, type ExportCallback, type ExportOptions, type ExportTypes, type HoverChartAnimationOptions, type HoverTableAnimationOptions, type InitialZoomMode, type InitializationOptions, type JSViewer, type LoadChartAnimationOptions, type PageViewOptions, type PanelsLocation, type Parameter, type ParameterDescriptor, type ParameterValue, type ParametersPanelSettings, type Percentage, type PrintOptions, type RenderFormat, type RenderMode, type ReportInfo, type ReportItemsStyles, type ReportServiceSettings, ReportType, type SearchOptions, type Sidebar, type SizeType, type ThemeSettings, type Toolbar, ToolbarButtons, type ToolbarItem, type ToolbarItems, type ViewMode, type ViewerType, createViewer, exportReport, printReport };