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.

<!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" /> <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" href="https://cdn.materialdesignicons.com/2.8.94/css/materialdesignicons.min.css" /> <script src="/activereportsjs/demos/arjs/dist/ar-js-core.js"></script> <script src="/activereportsjs/demos/arjs/dist/ar-js-viewer.js"></script> <script src="/activereportsjs/demos/arjs/dist/ar-js-pdf.js"></script> <script src="/activereportsjs/demos/arjs/dist/ar-js-tabular-data.js"></script> <script src="/activereportsjs/demos/arjs/dist/ar-js-html.js"></script> <script src="/activereportsjs/demos/arjs-localization/dist/ar-js-locales.js"></script> <script src="$DEMOROOT$/lib/purejs/license.js"></script> <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" /> <style> #viewer-host { margin: 0 auto; width: 100%; height: 500px; } </style> </head> <body> <div class="container-fluid"> <div class="form-group mb-3 mt-3"> <div> <label>Select Product Categories</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="category-1" checked /> <label class="form-check-label" for="category-1">Beverages</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="category-2" /> <label class="form-check-label" for="category-2">Condiments</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="category-3" /> <label class="form-check-label" for="category-3">Confections</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="category-4" /> <label class="form-check-label" for="category-4">Dairy Products</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="category-5" /> <label class="form-check-label" for="category-5">Grains/Cereals</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="category-6" /> <label class="form-check-label" for="category-6">Meat/Poultry</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="category-7" /> <label class="form-check-label" for="category-7">Produce</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="category-8" /> <label class="form-check-label" for="category-8">Seafood</label> </div> <div class="mt-1"> <button type="button" class="btn btn-outline-primary" onclick="setCategories()" id="btnPreview">Preview Report</button> </div> </div> </div> </div> <div id="viewer-host"></div> <script> const viewer = new MESCIUS.ActiveReportsJS.ReportViewer.Viewer("#viewer-host"); viewer.theme="ActiveReports"; viewer.documentLoaded.register(function(){ document.getElementById("btnPreview").removeAttribute("disabled"); }); viewer.reportLoaded.register(function(){ document.getElementById("btnPreview").setAttribute("disabled", true); }); const categoryIds = [1, 2, 3, 4, 5, 6, 7, 8]; const availableCategories = []; function setCategories() { availableCategories.length = 0; categoryIds.forEach(function (categoryId) { const checkBox = document.getElementById("category-" + categoryId); if (checkBox && checkBox.checked) { availableCategories.push(categoryId); } }); viewer.open("reports/multi-value-param.rdlx-json", { ReportParams: [ { Name: "CategoryId", Value: availableCategories, }, ], }); } MESCIUS.ActiveReportsJS.Core.FontStore.registerFonts( "/activereportsjs/demos/resource/fontsConfig.json" ); setCategories(); </script> </body> </html>