This topic illustrates some common feature implementations that you may find useful while working with ActiveReportsJS 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();
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");
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 });
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:
Add report parameter with Name="Data" and Data Type="string".
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
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.
You can navigate to next pages in the report using the following code.
viewer.goToNextPage();
You can jump to a specific page of the report using the following code.
viewer.goToPage(2);
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"
Submit and view feedback for