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. Visit the Setting Parameter Values for more information. Scroll down the page to see the code.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>ActiveReportsJS sample</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <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" href="https://cdn.materialdesignicons.com/2.8.94/css/materialdesignicons.min.css" /> <script src="/activereportsjs/demos/arjs/dist/ie-polyfills.js"></script> <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-xlsx.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-primary" onclick="setCategories()" id="btnPreview">Preview Report</button> </div> </div> </div> </div> <div id="viewer-host"></div> <script> const viewer = new ActiveReports.Viewer("#viewer-host"); 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, }, ], }); } GC.ActiveReports.Core.FontStore.registerFonts( "/activereportsjs/demos/resource/fontsConfig.json" ); setCategories(); </script> </body> </html>