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.jsx
index.html
Copy to CodeMine
loading...
import React, { Fragment } from "react"; import ReactDOM from "react-dom"; import { Viewer } from "@mescius/activereportsjs-react"; import "@mescius/activereportsjs/pdfexport"; import "@mescius/activereportsjs/htmlexport"; import "@mescius/activereportsjs/tabulardataexport"; import "@mescius/activereportsjs-i18n"; import { FontStore } from "@mescius/activereportsjs/core"; const initCategories = [ { 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, }, ]; function App() { const [categories, setCategories] = React.useState(initCategories); const [previewDisabled, setPreviewDisabled] = React.useState(false); const viewerRef = React.useRef(null); function onPreview(){ const categoryIds = categories.filter(cat=>cat.checked).map(cat=>cat.categoryId); viewerRef.current.Viewer.open("reports/multi-value-param.rdlx-json", { ReportParams: [ { Name: "CategoryId", Value: categoryIds, }, ], }) } React.useEffect(()=>{ onPreview(); }, []) function onCheckedChange(categoryId) { setCategories((val) => val.map((cat) => { if (cat.categoryId === categoryId) return { ...cat, checked: !cat.checked }; return { ...cat }; }) ); } return ( <Fragment> <div class="container-fluid"> <div class="form-group mb-3 mt-3"> <div> <label>Select Product Categories</label> </div> {categories.map((cat) => ( <div className="form-check form-check-inline" key={"category" + cat.categoryId}> <input id={"category" + cat.categoryId} className="form-check-input" type="checkbox" checked={cat.checked} onChange={() => onCheckedChange(cat.categoryId)} /> <label className="form-check-label" for={"category" + cat.categoryId}>{cat.categoryName}</label> </div> ))} <div className="mt-1"> <button type="button" className="btn btn-outline-primary" onClick={()=>onPreview()} disabled={previewDisabled} >Preview Report</button> </div> </div> </div> <div id="viewer-host"> <Viewer theme="ActiveReports" ref={viewerRef} documentLoaded={()=>setPreviewDisabled(false)} reportLoaded={()=>setPreviewDisabled(true)} /> </div> </Fragment> ); } FontStore.registerFonts("/activereportsjs/demos/resource/fontsConfig.json"); ReactDOM.render(<App />, document.getElementById("root"));
import React, { Fragment } from "react"; import ReactDOM from "react-dom"; import { Viewer } from "@mescius/activereportsjs-react"; import "@mescius/activereportsjs/pdfexport"; import "@mescius/activereportsjs/htmlexport"; import "@mescius/activereportsjs/tabulardataexport"; import "@mescius/activereportsjs-i18n"; import { FontStore } from "@mescius/activereportsjs/core"; const initCategories = [ { 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, }, ]; function App() { const [categories, setCategories] = React.useState(initCategories); const [previewDisabled, setPreviewDisabled] = React.useState(false); const viewerRef = React.useRef(null); function onPreview(){ const categoryIds = categories.filter(cat=>cat.checked).map(cat=>cat.categoryId); viewerRef.current.Viewer.open("reports/multi-value-param.rdlx-json", { ReportParams: [ { Name: "CategoryId", Value: categoryIds, }, ], }) } React.useEffect(()=>{ onPreview(); }, []) function onCheckedChange(categoryId) { setCategories((val) => val.map((cat) => { if (cat.categoryId === categoryId) return { ...cat, checked: !cat.checked }; return { ...cat }; }) ); } return ( <Fragment> <div class="container-fluid"> <div class="form-group mb-3 mt-3"> <div> <label>Select Product Categories</label> </div> {categories.map((cat) => ( <div className="form-check form-check-inline" key={"category" + cat.categoryId}> <input id={"category" + cat.categoryId} className="form-check-input" type="checkbox" checked={cat.checked} onChange={() => onCheckedChange(cat.categoryId)} /> <label className="form-check-label" for={"category" + cat.categoryId}>{cat.categoryName}</label> </div> ))} <div className="mt-1"> <button type="button" className="btn btn-outline-primary" onClick={()=>onPreview()} disabled={previewDisabled} >Preview Report</button> </div> </div> </div> <div id="viewer-host"> <Viewer theme="ActiveReports" ref={viewerRef} documentLoaded={()=>setPreviewDisabled(false)} reportLoaded={()=>setPreviewDisabled(true)} /> </div> </Fragment> ); } FontStore.registerFonts("/activereportsjs/demos/resource/fontsConfig.json"); ReactDOM.render(<App />, document.getElementById("root"));
<!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 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" /> <link rel="stylesheet" href="index.css" /> <!-- SystemJS --> <script src="./vendor/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import("./src/app"); </script> </head> <body> <div id="root"></div> </body> </html>
(function (global) { System.config({ transpiler: "plugin-babel", babelOptions: { es2015: true, react: true, }, meta: { "*.css": { loader: "css" }, }, paths: { // paths serve as alias "npm:": "node_modules/", }, // map tells the System loader where to look for things map: { css: "npm:systemjs-plugin-css/css.js", react: "npm:react/umd/react.production.min.js", "react-dom": "npm:react-dom/umd/react-dom.production.min.js", "@mescius/activereportsjs-react": "npm:@mescius/activereportsjs-react/lib/index.js", "@mescius/activereportsjs/reportviewer": "npm:@mescius/activereportsjs/dist/ar-js-viewer.js", "@mescius/activereportsjs/pdfexport": "npm:@mescius/activereportsjs/dist/ar-js-pdf.js", "@mescius/activereportsjs/tabulardataexport": "npm:@mescius/activereportsjs/dist/ar-js-tabular-data.js", "@mescius/activereportsjs/htmlexport": "npm:@mescius/activereportsjs/dist/ar-js-html.js", "@mescius/activereportsjs/xlsxexport": "npm:@mescius/activereportsjs/dist/ar-js-xlsx.js", "@mescius/activereportsjs/viewer": "npm:@mescius/activereportsjs/dist/ar-js-viewer.js", "@mescius/activereportsjs/reportdesigner": "npm:@mescius/activereportsjs/dist/ar-js-designer.js", "@mescius/activereportsjs/core": "npm:@mescius/activereportsjs/dist/ar-js-core.js", "@mescius/activereportsjs/styles": "npm:@mescius/activereportsjs/styles", "@mescius/activereportsjs-i18n": "npm:@mescius/activereportsjs-i18n/dist/ar-js-locales.js", "@mescius/ar-js-pagereport": "npm:@mescius/activereportsjs/dist/ar-js-core.js", "plugin-babel": "npm:systemjs-plugin-babel/plugin-babel.js", "systemjs-babel-build": "npm:systemjs-plugin-babel/systemjs-babel-browser.js", }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: "jsx", }, node_modules: { defaultExtension: "js", }, }, }); })(this);