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.


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';

Update data source at run time

If a report is bound to a datasource and you want to modify the connection string, you can do so at run time using following code, without the need to update the report definition itself.

function UpdateDS() {
    var report = new GC.ActiveReports.Core.PageReport();
    report.load('report.rdlx-json').then((definiton) => {
        report._instance.definition.DataSources[0].ConnectionProperties.ConnectString = "jsondoc=Products.json";
        return report.load(report._instance.definition)
    }).then(() => {

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 });

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


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