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.

Properties

    name
    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.

Properties

    parameters (optional)
    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.

Properties

    name
    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.

Properties

    matchCase (optional)
    Description

    Specifies whether the search is case-sensitive. The default value for this property is false.

    Type

    boolean

    Example

    matchCase: true
    wholePhrase (optional)
    Description

    Specifies whether the search should look for a whole phrase. The default value for this property is false.

    Type

    boolean

    Example

    wholePhrase: true

Type SearchResult

Describes the search results available in the Report Viewer component.

Properties

    PageIndex
    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 ExportType

Indicates the supported export types by the Report Viewer component.

Acceptable Values

'pdf' | 'excel' | 'exceldata' | 'docx' | 'image' | 'html' | 'csv' | 'json' | 'txt' | 'xml'

Type ExportOptions

Describes the export options in the Report Viewer component.

Properties

    settings (optional)
    Description

    Specifies the export settings available for RenderingExtensions.

    Type

    any

    Example

    settings: { Title: '1997 Annual Report' }

Type InitViewerOptions

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

Properties

    element
    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 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>'
    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'] }]
    

    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'
    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'
    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 highlighting timer on the buttons for better accessibility.

    Type

    boolean

    Example

    disableFocusTimer: false

Methods

    makeTitle (optional)
    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.

Methods

    openReport
    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('<reportId>', { 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<void>

    Example

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

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

    Return Type

    Promise<void>

    Example

    await viewer.print();
    search
    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();
    

    destroy
    Description

    Removes the Viewer content from the element.

    Return Type

    void

    Example

    viewer.destroy();

Type ViewerApi

Type of the GrapeCity.WynReports.Viewer object.

Methods

    create
    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: '<referenceToken>',
      reportId: '<reportId>',
    });