Features

This topic illustrates some common feature implementations that you may find useful while working with ActiveReportsJS Viewer.

Reset viewer

If you want to reset the current viewing session, that is, dispose the current report and clean up the preview, use the following code.

viewer.resetDocument();

Set default viewer render mode to Galley

In case you want to preview the report by default in Galley mode, and don't want to use the UI button to switch to Galley mode after the report is loaded.

viewer = new ActiveReports.Viewer('#ARJSviewerDiv');
viewer.renderMode = 'Galley';
viewer.open("report.rdlx-json");

Set parameters at run time

You can set report parameters before report is rendered in viewer, without any user prompt.

const parameters = [
    { Name: 'ReportParameter1', Value: ['Value1'] },
    { Name: 'ReportParameter2', Value: ['Value2'] }
];
viewer.open('report.rdlx-json', { ReportParams: parameters });

Update data source at run time

If a report is bound to a datasource and you want to modify the connection string at run time, you need to first open the report in designer and do the following:

1. Add report parameter with Name="Data" and Data Type="string".

2. Modify the Data Source connection string as follows:
    If using an embedded data:  ="jsondata=" & Parameters!Data.Value
    If using an external file:  ="jsondoc=" & Parameters!Data.Value

3. On the html page, use the added parameter to pass new data.
    If using an embedded data:

    function load() {
        const viewer = new ActiveReports.Viewer('#ARJSviewerDiv');

        const parameters = [{ Name: 'Data', Value: [JSON.stringyfy(data)] }];
        viewer.open('report.rdlx-json', { ReportParams: parameters });                
    }

         If using an external file:

    function load() {
        const viewer = new ActiveReports.Viewer('#ARJSviewerDiv');

        const parameters = [{ Name: 'Data', Value: ['NewDataSource.json'] }];
        viewer.open('report.rdlx-json', { ReportParams: parameters });                
    }

Note that as for the original data source file, the new data file should also be in the same folder as the report. Also, the number of fields and the field type must be same for both the data sources.

Navigate to next page

You can navigate to next pages in the report using the following code.

viewer.goToNextPage();

Navigate to specific page

You can jump to a specific page of the report using the following code.

viewer.goToPage(2);

Show sidebar panel to right side

If you want to change the default location of the sidebar panel (parameters, search, or export) to the right side, use following code.

PureJS

const viewer = new ActiveReports.Viewer('#viewer', 
    {        
        PanelsLocation: 'sidebar'    
    }
);

React

panelsLocation = {"sidebar"}

Angular and Vue

panelsLocation = "sidebar"