V6.1

Report Viewer API

Wyn Enterprise provides a rich API for integrating the reporting components into your web application. To embed the Report Viewer component in your project, use the Report Viewer API. It lets you view and export reports with added capabilities that include - defining the locale for the viewer, specifying the Parameter panel location and show mode, modifying the default title name, and much more.

The following sections describe the Report Viewer API.

Type DisplayType

Indicates the supported display types by the Report Viewer component.

Acceptable Values

'Page' | 'Galley'

Type ViewMode

Indicates the supported view modes by the Report Viewer component.

Acceptable Values

'Single' | 'Continuous'

Type ZoomMode

Indicates the supported zoom modes by the Report Viewer component.

Acceptable Values

'FitToWidth' | 'FitToPage' | 'Default'

Type ParamPanelShowMode

Indicates the supported Parameter panel show modes by the Report Viewer component.

Acceptable Values

'Default' | 'Always'

Type PanelsLocation

Indicates the supported panel locations by the Report Viewer component.

Acceptable Values

'Top' | 'Right'

Type Parameter

Describes the parameter value used to run the report.

PropertiesDOC-DETAILS-TAG-OPENDOC-SUMMARY-TAG-OPENname***DOC-SUMMARY-TAG-CLOSE

Description

Refers to the name of the parameter.

Type

string

Example

name: 'Parameter1'

values

Description

Refers to the value(s) of the parameter.

Type

any[]

Example

values: ['a', 'b', 'c']

Type OpenReportOptions

Describes the open report options for the Report Viewer component.

PropertiesDOC-DETAILS-TAG-OPENDOC-SUMMARY-TAG-OPENparameters (optional)***DOC-SUMMARY-TAG-CLOSE

Description

Refers to the array of the report parameters values.

Type

Parameter[]

Example

\\\`\\\`\\\`
//String parameters
parameters: [{ name: 'Country', values: ['China'] }, { name: 'Category', values: ['City'] }])

//Float parameters
parameters: [{ name: 'myFloat', values: [23.4] }])

//Integer parameters
parameters: [{ name: 'myInteger', values: [345] }])

//DateTime parameters
parameters: [{ name: 'myDateTime', values: ['2020-11-13T16:47:59.000Z'] }])

//Date parameters
parameters: [{ name: 'myDate', values: ['2020-11-13T16:47:59.000Z'] }])

//Boolean parameters
parameters: [{ name: 'myBoolean', values: [true] }])

//Multivalue string parameters
parameters: [{ name: 'Country', values: ['China', 'Russia'] }])
\\\`\\\`\\\`

Type ReportInfo

Describes the information on the opened report.

PropertiesDOC-DETAILS-TAG-OPENDOC-SUMMARY-TAG-OPENname***DOC-SUMMARY-TAG-CLOSE

Description

Refers to the name of the report.

Type

string

displayType

Description

Refers to the display type of the report.

Type

DisplayType

Type SearchOptions

Describes the search options available in the Report Viewer component.

PropertiesDOC-DETAILS-TAG-OPENDOC-SUMMARY-TAG-OPENmatchCase (optional)***DOC-SUMMARY-TAG-CLOSE

Description

Specifies whether the search is case-sensitive. By default, this property is set to false.

Type

boolean

Example

matchCase: true

wholePhrase (optional)

Description

Specifies whether the search should look for a whole phrase. By default, this property is set to false.

Type

boolean

Example

wholePhrase: true

Type SearchResult

Describes the search results available in the Report Viewer component.

PropertiesDOC-DETAILS-TAG-OPENDOC-SUMMARY-TAG-OPENPageIndex***DOC-SUMMARY-TAG-CLOSE

Description

Refers to the index of the page where the occurrence is found.

Type

number

DisplayText

Description

Refers to the text to be displayed.

Type

string

Type ExportOptions

Describes the export options available in the Report Viewer component.

PropertiesDOC-DETAILS-TAG-OPENDOC-SUMMARY-TAG-OPENsettings (optional)***DOC-SUMMARY-TAG-CLOSE

Description

Specifies the export settings available for RenderingExtensions.

Type

ExportSettings<T>

Example

settings: { Title: '1997 Annual Report' }

Type ExportResult

Describes the export results available in the Report Viewer component.

PropertiesDOC-DETAILS-TAG-OPENDOC-SUMMARY-TAG-OPENfile***DOC-SUMMARY-TAG-CLOSE

Description

Refers to the exported report file.

Type

Blob

filename (optional)

Description

Refers to the filename of the report.

Type

string

Type PageViewOptions

Describes the page view options available in the Report Viewer component.

PropertiesDOC-DETAILS-TAG-OPENDOC-SUMMARY-TAG-OPENhorizontalAlignment (optional)***DOC-SUMMARY-TAG-CLOSE

Description

Defines the horizontal alignment for the report page inside the view area. By default, this property is set to 'center'.

Type

'left' | 'right' | 'center'

Example

horizontalAlignment: 'left'

withoutPaperView (optional)

Description

Renders the report as a page or a web page element. If you set this property to true, the shadow, gray background, and paper borders around the report are removed.

Type

boolean

Example

withoutPaperView: true

Type LoadChartAnimationOptions

Describes the load chart animation option that can be applied to the Report Viewer component.

PropertiesDOC-DETAILS-TAG-OPENDOC-SUMMARY-TAG-OPENenabled (optional)***DOC-SUMMARY-TAG-CLOSE

Description

Controls the animation effect when a chart is initially loaded in the Report Viewer component. By default, this property is set to false.

Type

boolean

Example

enabled: true

Type HoverChartAnimationOptions

Describes the hover chart animation option that can be applied to the Report Viewer component.

PropertiesDOC-DETAILS-TAG-OPENDOC-SUMMARY-TAG-OPENenabled (optional)***DOC-SUMMARY-TAG-CLOSE

Description

Controls the hover effect on charts in the Report Viewer component. By default, this property is set to false.

Type

boolean

Example

enabled: true

Type HoverTableAnimationOptions

Describes the hover table and tablix animation option that can be applied to the Report Viewer component.

PropertiesDOC-DETAILS-TAG-OPENDOC-SUMMARY-TAG-OPENenabled (optional)***DOC-SUMMARY-TAG-CLOSE

Description

Controls the hover effect on table and tablix in the Report Viewer component. By default, this property is set to false.

Type

boolean

Example

enabled: true

backgroundColor (optional)

Description

Specifies the background color on hover over the table and tablix row, and supports the following values like $theme (background color depends on the theme background color), $none (background color remains unchanged), LightGray or #6495ed (background color is based on the specified color value). See this page for more information on color values.

Type

string

Example

backgroundColor: 'LightGray'

textColor (optional)

Description

Specifies the text color on hover over the table and tablix row, and supports the following values like $theme (text color depends on the theme background color), $none (text color remains unchanged), LightGray or #6495ed (text color is based on the specified color value). See this page for more information on color values.

Type

string

Example

textColor: 'DarkGray'

Type ChartTooltipFontStyle

Describes all the possible values for the chart tooltip fontStyle option.

Acceptable Values

'Normal' | 'Italic'

Type ChartTooltipFontWeight

Describes all the possible values for the chart tooltip fontWeight option.

Acceptable Values

'Lighter' | 'Thin' | 'ExtraLight' | 'Light' | 'Normal' | 'Medium' | 'SemiBold' | 'Bold' | 'ExtraBold' | 'Heavy' | 'Bolder'

Type ChartTooltipBorderStyle

Describes all the possible values for the chart tooltip borderStyle option.

Acceptable Values

'None' | 'Dotted' | 'Dashed' | 'Solid' | 'Double' | 'Groove' | 'Ridge' | 'Inset' | 'Outset'

Type ChartTooltipAnimationOptions

Describes the chart tooltip style options that can be applied to the Report Viewer component.

PropertiesDOC-DETAILS-TAG-OPENDOC-SUMMARY-TAG-OPENenabled (optional)***DOC-SUMMARY-TAG-CLOSE

Description

Controls the chart tooltip effect in the Report Viewer component. If you set this property to false, the chart tooltip will not appear. By default, this property is set to true.

Type

boolean

Example

enabled: false

backgroundColor (optional)

Description

Specifies the chart tooltip background color, and supports the following values like $theme (background color depends on the theme background color), $none (background color remains unchanged), LightGray or #6495ed (background color is based on the specified color value). See this page for more information on color values. By default, the property is set to '#fff'.

Type

string

Example

backgroundColor: 'LightGray'

textColor (optional)

Description

Specifies the chart tooltip text color, and supports the following values like $theme (text color depends on the theme text color), $none (text color remains unchanged), LightGray or #6495ed (text color is based on the specified color value). See this page for more information on color values. By default, the property is set to '#333'.

Type

string

Example

textColor: 'DarkGray'

fontFamily (optional)

Description

Specifies the font family used in the chart tooltip. If fontFamily is not specified explicitly here, the default font family is used.

Type

string

Example

fontFamily: 'Times New Roman'

fontSize (optional)

Description

Specifies the size of the font to be used in the chart tooltip. The value of font size must be between 6 and 34, and can be set in 'px' or 'in'. By default, this property is set to '12px'.

Type

string

Example

fontSize: '10pt'

fontStyle (optional)

Description

Specifies the font style to be used in the chart tooltip. By default, this property is set to 'Normal'.

Type

ChartTooltipFontStyle

Example

fontStyle: 'Italic'

borderColor (optional)

Description

Specifies the color of chart tooltip border, and supports the following values like $theme (border color depends on the theme background color), $none (border color remains unchanged), LightGray or #6495ed (border color is based on the specified color value). See this page for more information on color values. By default, this property is set to '#292929'.

Type

string

Example

borderColor: '#4e0000'

borderSize (optional)

Description

Specifies the size of the chart tooltip borders. The value must be greater than 0 and less than 10. By default, this property is set to '1px'.

Type

string

Example

borderSize: '1pt'

borderStyle (optional)

Description

Specifies the style of the chart tooltip borders. By default, this property is set to 'Solid'.

Type

ChartTooltipBorderStyle

Example

borderStyle: 'Dotted'

borderRadius (optional)

Description

Specifies the radius of the chart tooltip borders in 'px' or 'pt'. The value of the radius must be between 0 and less than 10. By default, this property is set to '3px'.

Type

string

Example

borderRadius: '1pt'

Type AnimationOptions

Describes the animation options that can be applied to the Report Viewer component.

PropertiesDOC-DETAILS-TAG-OPENDOC-SUMMARY-TAG-OPENloadChart (optional)***DOC-SUMMARY-TAG-CLOSE

Description

Sets the load chart animation settings in the Report Viewer component. By default, these animation settings are disabled.

Type

LoadChartAnimationOptions

Example

loadChart: { enabled: true }

hoverChart (optional)

Description

Sets the hover chart animation settings in the Report Viewer component. By, default, these animation settings are disabled.

Type

HoverChartAnimationOptions

Example

hoverChart: { enabled: true }

hoverTable (optional)

Description

Sets the hover table and tablix animation settings in the Report Viewer component. By default, these animation settings are disabled.

Type

HoverTableAnimationOptions

Example

hoverTable: { enabled: true }

chartTooltip (optional)

Description

Sets the chart tooltip style settings in the Report Viewer component.

Type

ChartTooltipAnimationOptions

Type ParameterPanelOptions

Describes the Parameter panel options that can be applied to the Report Viewer component.

PropertiesDOC-DETAILS-TAG-OPENDOC-SUMMARY-TAG-OPENposition (optional)***DOC-SUMMARY-TAG-CLOSE

Description

Sets up Parameter panel position in the Report Viewer component. By default, this property is set to 'Right'.

Type

PanelsLocation

showMode (optional)

Description

Sets up a rule for showing the Parameter panel in the Report Viewer component. If you set the property to 'Always', the panel appears each time you open a document. By default, this property is set to 'Default'.

Type

ParamPanelShowMode

roundedControls (optional)

Description

Lets you specify whether to enable or disable the rounded corners of the Parameter panel's controls. By default, this property is set to false.

Type

boolean

Type InitViewerOptions

The following options can be set during initialization or at runtime while working with the Report Viewer component.

PropertiesDOC-DETAILS-TAG-OPENDOC-SUMMARY-TAG-OPENelement***DOC-SUMMARY-TAG-CLOSE

Description

Refers to a DOMString that specifies the element hosting the Report Viewer control.

Type

string

Example

element: 'report-viewer-app'

portalUrl (optional)

Description

Refers to the Wyn Portal URL.

Type

string

Example

portalUrl: 'https://wyn-portal.com/'

referenceToken (optional)

Description

Refers to the reference key required to access the Wyn Enterprise API.

Type

string

Example

referenceToken: '<referenceToken>'

reportId (optional)

Description

Refers to the report id to be shown by the Report Viewer component.

Type

string

Example

reportId: '<reportId>'

* This property is deprecated.

reportParameters (optional)

Description

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

Type

Parameter[]

Example

\\\`\\\`\\\`
//String parameters
reportParameters: [{ name: 'myString', values: ['123'] }]

//Float parameters
reportParameters: [{ name: 'myFloat', values: [23.4] }]

//Integer parameters
reportParameters: [{ name: 'myInteger', values: [345] }]

//DateTime parameters
reportParameters: [{ name: 'myDateTime', values: ['2020-11-13T16:47:59.000Z'] }]

//Date parameters
reportParameters: [{ name: 'myDate', values: ['2020-11-13T16:47:59.000Z'] }]

//Boolean parameters
reportParameters: [{ name: 'myBoolean', values: [true] }]

//Multivalue string parameters
reportParameters: [{ name: 'Country', values: ['China', 'Russia'] }]
\\\`\\\`\\\`

* This property is deprecated.

locale (optional)

Description

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

Type

string

Example

locale: 'zh'

availableExports (optional)

Description

Refers to the array of export types available via the Export functionality of the Report Viewer component. By default, all ExportType values are used.

Type

ExportType[]

Example

availableExports: ['xml', 'pdf']

displayType (optional)

Description

Sets up display type for the Report Viewer component. The default value is the report display type.

Type

DisplayType

Example

displayType: 'Galley'

viewMode (optional)

Description

Sets up the view mode for the Report Viewer component, that is, single page or continuous page. The default value for this property is single.

Type

ViewMode

Example

viewMode: 'Continuous'

zoomMode (optional)

Description

Sets up the zoom mode for the Report Viewer component. The default value is Default.

Type

ZoomMode

Example

zoomMode: 'FitToWidth'

paramPanelPosition (optional)

Description

Sets up parameters panel position for the Report Viewer component. The default value is Right.

Type

PanelsLocation

Example

paramPanelPosition: 'Top'

* This property is deprecated.

paramPanelShowMode (optional)

Description

Sets up a rule for showing the Parameter panel in the Report Viewer component. If the value is set to Always, the Parameter panel is shown anyway on the document opening event. The default value for this property is Default.

Type

ParamPanelShowMode

Example

paramPanelShowMode: 'Always'

* This property is deprecated.

hideToolbar (optional)

Description

Indicates a flag that specifies whether to hide the toolbars in the Report Viewer component. The default value is false.

Type

boolean

Example

hideToolbar: true

hideSearch (optional)

Description

Indicates a flag that specifies whether to hide the search panel in the Report Viewer component. The default value for this property is false.

Type

boolean

Example

hideSearch: true

toolbarSize (optional)

Description

Defines the toolbar size for the Report Viewer component. The default value is large.

Type

'small' | 'medium' | 'large'

Example

toolbarSize: 'small'

disableFocusTimer (optional)

Description

Disables focus on highlighting timers on the buttons for better accessibility.

Type

boolean

Example

disableFocusTimer: false

pageViewOptions (optional)

Description

Defines the horizontal alignment and view for the report page in the Report Viewer component.

Type

PageViewOptions

Example

pageViewOptions: { horizontalAlignment: 'right', withoutPaperView: true }

animation (optional)

Description

Refers to the animation options available in the Report Viewer component. By default, these options are disabled.

Type

AnimationOptions

Example

animation: { hoverTable: { enabled: true } }

parameterPanel (optional)

Description

Defines the Parameter panel options available in the Report Viewer component.

Type

ParameterPanelOptions

Example

parameterPanel: { position: 'Right', showMode: 'Always', roundedControls: true }

MethodsDOC-DETAILS-TAG-OPENDOC-SUMMARY-TAG-OPENmakeTitle (optional)***DOC-SUMMARY-TAG-CLOSE

Description

Makes the Report Viewer component display the custom title.

Parameter (Type)

reportName: string

Return Type

string

Example

makeTitle: (reportName) => reportName + ' - Wyn Enterprise'

Type Viewer

Type representing a Report Viewer instance.

MethodsDOC-DETAILS-TAG-OPENDOC-SUMMARY-TAG-OPENopenReport***DOC-SUMMARY-TAG-CLOSE

Description

Opens the report in the Report Viewer component.

Parameter (Type)

reportId: string

options (optional): OpenReportOptions

Return Type

Promise<ReportInfo>

Example

\\\`\\\`\\\`
const reportInfo = await viewer.openReport('', { parameters: [{ name: 'myString', values: ['123'] }] });
console.log('The report ' + reportInfo.name + ' was successfully loaded!')
\\\`\\\`\\\`

refresh

Description

Refreshes the report preview in the Report Viewer component.

Return Type

void

Example

viewer.refresh();

getPageCount

Description

Gets the page count of the currently displayed report in the Report Viewer component.

Return Type

number

Example

\\\`\\\`\\\`
const pageCount = viewer.getPageCount();
console.log(pageCount);
\\\`\\\`\\\`

getCurrentPage

Description

Gets the currently displayed page number in the Report Viewer component.

Return Type

number

Example

const currentPage = viewer.getCurrentPage();
console.log(currentPage);

goToPage

Description

Makes the Report Viewer component display a specific report page. The page numeration starts with 1.

Parameter (Type)

pageNumber: number

Return Type

void

Example

viewer.goToPage(1);

backToParent

Description

Makes the Report Viewer component display the parent report of the drill-down report.

Return Type

void

Example

viewer.backToParent();

export

Description

Exports the currently displayed report in the Report Viewer component.

Parameter (Type)

exportType: ExportType

options (optional): ExportOptions

Return Type

Promise

Example

await viewer.export('pdf', { settings: { Title: '1997 Annual Report' } });

Description

Prints the currently displayed report in the Report Viewer component if any.

Return Type

Promise<void>

Example

await viewer.print();

Description

Performs the search operation for a specific term with specific search options.

Parameter (Type)

searchTerm: string

options (optional): SearchOptions

Return Type

Promise<SearchResult[]>

Example

const searchResult = await viewer.search('a', { matchCase: true, wholePhrase: false });
console.log(searchResult);

toggleSidebar

Description

Sets or toggles the sidebar's panels visibility in the Report Viewer component.

Parameter (Type)

show (optional): boolean

Return Type

void

Example

\\\`\\\`\\\`
//Show panel
viewer.toggleSidebar(true);

//Hide panel
viewer.toggleSidebar(false);

//Toggle visibility
viewer.toggleSidebar();
\\\`\\\`\\\`

overrideToolbarAction

Description

Lets you customize the toolbar action in the Report Viewer component.

Parameter (Type)

toolbarButton: OverridableToolbarButton

action(): void

Return Type

void

Example

viewer.overrideToolbarAction('$print', () => { console.log('Print'); })

destroy

Description

Removes the Viewer content from the element.

Return Type

void

Example

viewer.destroy();

Type LocalizationResourceBundle

Type of the GetLocalizationResourcesSuccessResult.resourceBundles array element.

Properties

Description

Refers to the bundle namespace.

Type

string

resources

Description

Refers to the localization resources.

Type

Record<string, any>

Type AddLocalizationSuccessResult

Type of success result returned by the GrapeCity.WynReports.Viewer.addLocalization() function.

Properties

type

Description

Refers to the success result type.

Type

success

Type AddLocalizationErrorResult

Type of error result returned by the GrapeCity.WynReports.Designer.addLocalization() function.

Properties

type

Description

Indicates the error result type.

Type

error

errorCaption

Description

Indicates the error caption.

Type

string

errorDetails

Description

Indicates the error details.

Type

string[]

Type AddLocalizationResult

Type of result returned by the GrapeCity.WynReports.Viewer.addLocalization() function.

Acceptable Values

AddLocalizationSuccessResult | AddLocalizationErrorResult

Type GetLocalizationResourcesSuccessResult

Type of success result returned by the GrapeCity.WynReports.Viewer.getLocalizationResources() function.

Properties

type

Description

Refers to the success result type.

Type

success

resourceBundles

Description

Refers to the localization resources.

Type

LocalizationResourceBundle[] | undefined

Type GetLocalizationResourcesErrorResult

Type of error result returned by the GrapeCity.WynReports.Viewer.getLocalizationResources() function.

Properties

type

Description

Refers to the error result type.

Type

error

errorCaption

Description

Refers to the error caption.

Type

string

errorDetails

Description

Refers to the error details.

Type

string[]

Type GetLocalizationResourcesResult

Type of result returned by the GrapeCity.WynReports.Viewer.getLocalizationResources() function.

Acceptable Values

GetLocalizationResourcesSuccessResult | GetLocalizationResourcesErrorResult

Type ViewerApi

Type of the GrapeCity.WynReports.Viewer object.

MethodsDOC-DETAILS-TAG-OPENDOC-SUMMARY-TAG-OPENcreate***DOC-SUMMARY-TAG-CLOSE

Description

Creates and initializes the Report Viewer component.

Parameter (Type)

options: InitViewerOptions

Type

Viewer

Example

\\\`\\\`\\\`
const viewer = GrapeCity.WynReports.Viewer.create({
 element: 'report-viewer-app',
 portalUrl: 'http://wyn-portal.com/',
 referenceToken: '',
 reportId: '',
});
\\\`\\\`\\\`

addLocalization

Description

Adds custom localization resources for the Report Viewer component. It is then required to pass the lng parameter to initViewerOptions.locale to apply the added resources.

Parameter (Type)

lng: string

resourceBundles: LocalizationResourceBundle[]

Return Type

AddLocalizationResult

Example

\\\`\\\`\\\`
const result = GrapeCity.WynReports.Designer.addLocalization('zh-CN', \\\* const result = GrapeCity.WynReports.Viewer.addLocalization('zh-CN', resourceBundles);
if (result.type === 'success') initViewerOptions.locale = 'zh-CN';
else console.error([result.errorCaption, ...result.errorDetails].join('\\\n'));
\\\`\\\`\\\`

getLocalizationResources

Description

Gets custom localization resources provided by the Wyn Enterprise Server API. The obtained resources are intended for the GrapeCity.WynReports.Viewer.addLocalization() function.

Parameter (Type)

lng: string

portalUrl: string

referenceToken (optional): string

Return Type

Promise

Example

\\\`\\\`\\\`
const result = GrapeCity.WynReports.Viewer.getLocalizationResources('zh-CN', '', '');
if (result.type === 'success') GrapeCity.WynReports.Viewer.addLocalization('zh-CN', result.resourceBundles);
else console.error([result.errorCaption, ...result.errorDetails].join('\\\n'));
\\\`\\\`\\\`