Report Viewer Component - Setting Parameter Values

The Report Viewer API allows you to open a parameterized report by applying specific parameter values. This feature is helpful if you want to implement a custom parameters panel or use hidden parameters that receive values at runtime. The samples below show the implementation of the custom parameter panel with Angular, React, Vue, and pure JavaScript applications. For more details, please visit the Setting Parameter Values. To view the code, scroll down the page.

The demo is being dynamically compiled to support real-time code editing... For quicker access to features, switch to the "JavaScript" tab for a smoother experience! :)
app.component.ts
app.component.css
app.module.ts
index.html
Copy to CodeMine
loading...
import { Component, ViewChild } from "@angular/core"; import { ViewerComponent, AR_EXPORTS, PdfExportService, HtmlExportService, TabularDataExportService, } from "@mescius/activereportsjs-angular"; import "@mescius/activereportsjs-i18n"; @Component({ selector: "app-root", templateUrl: "src/app.component.html", styleUrls: ["src/app.component.css"], providers: [ { provide: AR_EXPORTS, useClass: PdfExportService, multi: true, }, { provide: AR_EXPORTS, useClass: HtmlExportService, multi: true, }, { provide: AR_EXPORTS, useClass: TabularDataExportService, multi: true, }, ], }) export class AppComponent { @ViewChild(ViewerComponent, { static: false }) reportViewer: ViewerComponent; categories = [ { categoryId: 1, categoryName: "Beverages", checked: true, }, { categoryId: 2, categoryName: "Condiments", checked: false, }, { categoryId: 3, categoryName: "Confections", checked: false, }, { categoryId: 4, categoryName: "Dairy Products", checked: false, }, { categoryId: 5, categoryName: "Grains/Cereals", checked: false, }, { categoryId: 6, categoryName: "Meat/Poultry", checked: false, }, { categoryId: 7, categoryName: "Produce", checked: false, }, { categoryId: 8, categoryName: "Seafood", checked: false, }, ]; previewEnabled = true; onDocumentLoaded() { this.previewEnabled = true; } onReportLoaded() { this.previewEnabled = false; } onCategoriesChange(category: any, target: any) { category.checked = target.checked; } previewReport() { const categoryIds = this.categories .filter((c) => c.checked) .map((c) => c.categoryId); this.reportViewer.open("reports/multi-value-param.rdlx-json", { ReportParams: [ { Name: "CategoryId", Value: categoryIds, }, ], }); } }
import { Component, ViewChild } from "@angular/core"; import { ViewerComponent, AR_EXPORTS, PdfExportService, HtmlExportService, TabularDataExportService, } from "@mescius/activereportsjs-angular"; import "@mescius/activereportsjs-i18n"; @Component({ selector: "app-root", templateUrl: "src/app.component.html", styleUrls: ["src/app.component.css"], providers: [ { provide: AR_EXPORTS, useClass: PdfExportService, multi: true, }, { provide: AR_EXPORTS, useClass: HtmlExportService, multi: true, }, { provide: AR_EXPORTS, useClass: TabularDataExportService, multi: true, }, ], }) export class AppComponent { @ViewChild(ViewerComponent, { static: false }) reportViewer: ViewerComponent; categories = [ { categoryId: 1, categoryName: "Beverages", checked: true, }, { categoryId: 2, categoryName: "Condiments", checked: false, }, { categoryId: 3, categoryName: "Confections", checked: false, }, { categoryId: 4, categoryName: "Dairy Products", checked: false, }, { categoryId: 5, categoryName: "Grains/Cereals", checked: false, }, { categoryId: 6, categoryName: "Meat/Poultry", checked: false, }, { categoryId: 7, categoryName: "Produce", checked: false, }, { categoryId: 8, categoryName: "Seafood", checked: false, }, ]; previewEnabled = true; onDocumentLoaded() { this.previewEnabled = true; } onReportLoaded() { this.previewEnabled = false; } onCategoriesChange(category: any, target: any) { category.checked = target.checked; } previewReport() { const categoryIds = this.categories .filter((c) => c.checked) .map((c) => c.categoryId); this.reportViewer.open("reports/multi-value-param.rdlx-json", { ReportParams: [ { Name: "CategoryId", Value: categoryIds, }, ], }); } }
#viewer-host { width: 100%; height: 500px; }
import { BrowserModule } from "@angular/platform-browser"; import { NgModule } from "@angular/core"; import { FormsModule } from "@angular/forms"; import { ReactiveFormsModule } from "@angular/forms"; import { AppComponent } from "./app.component"; import { ActiveReportsModule } from "@mescius/activereportsjs-angular"; @NgModule({ declarations: [AppComponent], imports: [BrowserModule, ActiveReportsModule, FormsModule, ReactiveFormsModule], providers: [], bootstrap: [AppComponent], }) export class AppModule {}
(function (global) { SystemJS.config({ transpiler: './plugin-typescript.js', typescriptOptions: { "target": "ES2022", "module": "system", "emitDecoratorMetadata": true, "experimentalDecorators": true, }, baseURL: './node_modules/', meta: { 'typescript': { "exports": "ts" }, '*.css': { loader: 'systemjs-plugin-css' } }, packageConfigPaths: [ '/node_modules/*/package.json', "/node_modules/@angular/*/package.json", "/node_modules/@mescius/*/package.json" ], map: { 'typescript': 'typescript/lib/typescript.js', "rxjs": "rxjs/dist/bundles/rxjs.umd.js", "rxjs/operators": "rxjs/dist/bundles/rxjs.umd.js", "@angular/core/primitives/signals": "@angular/core/fesm2022/primitives/signals.mjs", "@angular/common/http": "@angular/common/fesm2022/http.mjs", "@mescius/activereportsjs/core": "@mescius/activereportsjs/dist/ar-js-core.js", "@mescius/activereportsjs": "./activereports.js", "@mescius/activereportsjs/reportdesigner":"./activereports.js", "@mescius/ar-js-pagereport": "@mescius/activereportsjs/dist/ar-js-core.js", "@mescius/activereportsjs-i18n": "@mescius/activereportsjs-i18n/dist/ar-js-locales.js", }, // packages tells the System loader how to load when no filename and/or no extension packages: { "./src": { defaultExtension: 'ts' }, "node_modules": { defaultExtension: 'js' }, "@angular/core": { defaultExtension: 'mjs', "main": "fesm2022/core.mjs" }, "@angular/platform-browser": { defaultExtension: 'mjs', "main": "fesm2022/platform-browser.mjs" }, "@angular/common": { defaultExtension: 'mjs', "main": "fesm2022/common.mjs" }, "@angular/compiler": { defaultExtension: 'mjs', "main": "fesm2022/compiler.mjs" }, "@angular/forms": { defaultExtension: 'mjs', "main": "fesm2022/forms.mjs" }, "@angular/localize": { defaultExtension: 'mjs', "main": "fesm2022/localize.mjs" }, "@angular/platform-browser-dynamic": { defaultExtension: 'mjs', "main": "fesm2022/platform-browser-dynamic.mjs" }, "@mescius/activereportsjs-angular": { defaultExtension: "mjs", main: "fesm2022/grapecity-activereports-angular.mjs", }, } }); })(this);
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title> ActiveReportsJS Report Viewer Setting Parameters Values Sample </title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- Polyfills --> <script src="node_modules/zone.js/fesm2015/zone.min.js"></script> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet" /> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" /> <link rel="stylesheet" type="text/css" href="/activereportsjs/demos/arjs/styles/ar-js-ui.css" /> <link rel="stylesheet" type="text/css" href="/activereportsjs/demos/arjs/styles/ar-js-viewer.css" /> <script> System.import("./src/app.main"); </script> </head> <body> <app-root></app-root> </body> </html>