ActiveReports 14
ActiveReports 14 User Guide / Preview Reports / JavaScript / JS Viewer API
In This Topic
    JS Viewer API
    In This Topic

    Initialization Options

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

    action

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

    Type: function(actionType, actionParams)

    Example:

    action: (actionType, actionParams) => console.log('Action type: ' + actionType + '; Action parameters: ' + actionParams)
    

    availableExports

    Description: The array of export types available via Export functionality of JS Viewer. By default, PDF, Excel, Word, JSON, XML, CSV, and Image exports are available.

    Type: Array

    Example:

    availableExports: ['Xml', 'Pdf']
    

    displayMode

    Description: Set up single page or continuous page.

    Type: String

    Accepted Value: 'single', 'continuous'

    Example:

    displayMode: 'Continuous'
    

    documentLoaded

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

    Type: function()

    Example:

    documentLoaded: () => console.log('The document is loaded entirely on the server')
    

    Returns: Void

    element

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

    Type: String

    Example:

    element: '#viewerContainer'
    

    error

    Description: 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 returns true. The error parameter is an object that has a message property which allows the users to customize the error message.

    Type: function(error)

    Example: To hide the default error panel:

    error: (error) => {
        if(error.message) {
        // show error message.
        alert("Internal error! Please ask administrator.");
        // do not show default error message.
        }
    }
    

    reportID

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

    Type: String

    Example:

    reportID: 'AnnualReport.rdlx'
    

    reportLoaded

    Description: The callback that is invoked when the JS Viewer obtains the information about the requested report. The reportInfo object is passed in the callback including the TOC info, Parameters info and the link to the rendered report result.

    Type: function(reportInfo)

    Example:

    reportLoaded: (reportInfo) => console.log('The report ' + reportInfo.name + ' was successfully loaded!')
    

    reportParameters

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

    Type: Array

    Example:

    reportParameters: [{ name: 'ReportParameter1', values: ['1']}]
    

    reportService

    Description: Set up the settings to connect the Web API.

    Type: Object that has the url and optional securityToken properties.

    Example:

    reportService: {
        url: 'http://example.com/api/reporting',
        securityToken: '42A9CD80A4F3445A9BB60A221D042FCC',
    };
    

    Public API Methods and Properties

    Methods

    backtoParent

    Description: Makes the viewer to display the parent report of the drill-down report.

    Syntax: backToParent()Void

    Example:

    viewer.backToParent()
    

    Return Value: Void

    create

    Description: Creates a new instance of the Viewer and renders it in the specified DOM element.

    Syntaxcreate()Void 

    Parameters:

    • params

    Example:

    const viewer = GrapeCity.ActiveReports.JSViewer.create({
        element: '#root',
        reportID: 'AnnualReport.rdlx',
        availableExports: ['Xml', 'Pdf'],
        // other properties
    });  
    
    

    Return Value: Void

    destroy

    Description: Removes the viewer content from the element.

    Syntax: destroy()Void

    Example:

    viewer.destroy()
    

    Return Value: Void

    export

    Description: Exports the currently displayed report.

    Syntax: export(exportType,callback,saveAsDialog,settings)Void

    Parameters:

    • exportType: Specifies export format.            
    • settings: The export settings are available for RenderingExtensions.                    
    • Note: In section reports, the export settings are not enabled when exporting files using the rendering extensions. In Page report and RDL report, the export settings are not enabled when exporting files to PDF using the export filter.

    Example:

    viewer.export('Pdf', downloadReport, true, { Title: '1997 Annual Report' })
    

    Return Value: Void

    getTOC

    Description: Obtains the report TOC.

    Syntax: viewer.getToc()

    Example:

    console.log(viewer.getToc())
    

    Return Value: any

    goToPage

    Description: Makes the viewer to display the specific page.

    Syntax: goToPage(number, offset, callback)Void

    Parameters:

    • number: The number of pages to go to.

    Example:

    viewer.goToPage(1)
    

    Return Value: Void

    openReport

    Description: Opens a report.

    Syntax: openReport(reportID: string, reportParameters?: Array<Parameter>): void

    Parameters:

    • reportID: The id of the report.

    Example:

    viewer.openReport('Invoice.rdlx')
    

    Return Value: Void

    Print

    Description: Prints the currently displayed report if any.

    Syntax: print()Void

    Example:

    viewer.print()
    

    Return Value: Void

    Refresh

    Description: Refreshes the report preview.

    Syntax: option(name,[value])Object

    Example:

    viewer.refresh()
    

    Return Value: Void

    Version

    Description: A string that represents the current version of the JS Viewer.

    Syntax: GrapeCity.ActiveReports.JSViewer.version

    Example:

    console.log(GrapeCity.ActiveReports.JSViewer.version)
    

    Return Value: string

    renderMode

    Description: Gets or sets the JS Viewer render mode.

    Type: String

    Accepted Value: 'Galley', 'Paginated'

    Example:

    viewer.renderMode = 'Galley';
    

    toolbar.addItem

    Description: Adds a custom toolbar item (button) to the toolbar's end.

    Type: item: ToolbarItem

    Example:

    ToolbarItem = {
        key: string;
        iconCssClass?: string;
        icon?: Icon;
        text?: string;
        title?: string;
        checked?: boolean;
        enabled?: boolean;
        action?: (toolbarItem) => function;
        onUpdate?: (args: ChangedEventArgs, toolbarItem) => function;
    }
     
    Icon = FontIcon | SVGIcon;
     
     
    SVGIcon = {
        type: 'svg';
        content: any; //(string | JSX.element)
        size?: Size;
        rotate?: '90' | '180' | '270';
    };
     
     
    FontIcon = {
        type: 'font';
        iconCssClass: string;
        fontSize?: string;
    }
     
    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');
        }
    };
     
     
    //OR button with svg as icon
    var icon = `
        
    `;
     
    var svgPdfExportButton = {
        key: '$pdfExportButtonKey',
        icon: {type: 'svg', content: icon},
        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.addItem(pdfExportButton);
    //or
    viewer.toolbar.addItem(svgPdfExportButton);
    

    toolbar.updateItem

    Description: Updates the layout/function/state for a specified single item.

    Type: String: key, ToolbarItem item

    Example:

    var xlsxExportButton = {
        key: '$xlsxExportButtonKey',
        iconCssClass: 'mdi mdi-file-pdf',
        enabled: true,
        action: function(item) { console.log('Export to XLSX function works here'); },
        onUpdate: function(arg, item) { console.log('Something in viewer was updated, check/update button state here'); }
    };
    viewer.toolbar.updateItem('$pdfExportButtonKey', xlsxExportButton); //from now button will behave as described in new properties
    

    toolbar.removeItem

    Description: Removes a custom toolbar item from the toolbar. To remove the default one, you should use the updateLayout function.

    Type: String: key

    Example:

    viewer.toolbar.removeItem('$pdfExportButtonKey');
    

    toggleSidebar

    Description: Toggles the sidebar panel (hides or shows it). If no parameter is passed, works as toggle.

    Type: boolean

    Example:

    viewer.toggleSidebar();//hide sidebar
    
    viewer.toggleSidebar(true);//show sidebar
    

    Properties

    currentPage

    Description: Gets the currently displayed page number.

    Syntax: viewer.currentPage

    Example:

    console.log(viewer.currentPage())
    

    Return Value: An integer representing currently displayed page number.

    pageCount

    Description: Gets the page count of the currently displayed report.

    Syntax: viewer.pageCount

    Example:

    console.log(viewer.pageCount())
    

    Return Value: An integer representing page count.

    See Also