Demos
Code Samples
Viewer
Runtime Data Binding

Runtime Data Binding

These samples show how to supply the data for a report at runtime with Angular, React, Vue, and pure JavaScript applications. For more details, please visit the Data Binding page. To view the code, scroll down the page.

JavaScript
Angular
Vue
React
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.vue
index.html
Copy to CodeMine
loading...
<template>
  <div id="viewer-host">
    <JSViewer ref="reportViewer" theme="ActiveReports"></JSViewer>
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
import { Viewer } from "@mescius/activereportsjs-vue";
import "@mescius/activereportsjs/pdfexport";
import "@mescius/activereportsjs/htmlexport";
import "@mescius/activereportsjs/tabulardataexport";
import Core from "@mescius/activereportsjs/core";

Core.FontStore.registerFonts("/activereportsjs/demos/resource/fontsConfig.json");

export default {
  components: {
    JSViewer: Viewer,
  },
  setup() {
    const reportViewer = ref(null);

    const loadData = async () => {
      const headers = new Headers();

      const dataRequest = new Request(
        "https://demodata.mescius.io/northwind/api/v1/Customers",
        {
          headers: headers,
        }
      );

      const response = await fetch(dataRequest);
      const data = await response.json();
      return data;
    };

    const loadReport = async () => {
      const reportResponse = await fetch(
        "/activereportsjs/demos/resource/reports/CustomersTable.rdlx-json"
      );
      const report = await reportResponse.json();
      return report;
    };

    onMounted(async () => {
      const data = await loadData();
      const report = await loadReport();
      report.DataSources[0].ConnectionProperties.ConnectString =
        "jsondata=" + JSON.stringify(data);
      reportViewer.value.Viewer().open(report);
    });

    return { reportViewer };
  },
};
</script>

<style>
#viewer-host {
  width: 100%;
  height: 600px;
}
</style>
<template> <div id="viewer-host"> <JSViewer ref="reportViewer" theme="ActiveReports"></JSViewer> </div> </template> <script> import { ref, onMounted } from "vue"; import { Viewer } from "@mescius/activereportsjs-vue"; import "@mescius/activereportsjs/pdfexport"; import "@mescius/activereportsjs/htmlexport"; import "@mescius/activereportsjs/tabulardataexport"; import Core from "@mescius/activereportsjs/core"; Core.FontStore.registerFonts("/activereportsjs/demos/resource/fontsConfig.json"); export default { components: { JSViewer: Viewer, }, setup() { const reportViewer = ref(null); const loadData = async () => { const headers = new Headers(); const dataRequest = new Request( "https://demodata.mescius.io/northwind/api/v1/Customers", { headers: headers, } ); const response = await fetch(dataRequest); const data = await response.json(); return data; }; const loadReport = async () => { const reportResponse = await fetch( "/activereportsjs/demos/resource/reports/CustomersTable.rdlx-json" ); const report = await reportResponse.json(); return report; }; onMounted(async () => { const data = await loadData(); const report = await loadReport(); report.DataSources[0].ConnectionProperties.ConnectString = "jsondata=" + JSON.stringify(data); reportViewer.value.Viewer().open(report); }); return { reportViewer }; }, }; </script> <style> #viewer-host { width: 100%; height: 600px; } </style>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>ActiveReportsJS Report Viewer Runtime Data Binding Sample</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.8.94/css/materialdesignicons.min.css" /> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script src="./compiler.js" type="module"></script> <script src="/activereportsjs/demos/arjs/dist/ar-js-core.js"></script> <script src="/activereportsjs/demos/arjs/dist/ar-js-viewer.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" 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("./app.js"); </script> </head> <body style="margin: 0"> <div id="app"></div> </body> </html>
(function (global) { SystemJS.config({ transpiler: "systemjs-plugin-babel", typescriptOptions: { target: "es5", module: "system", }, baseURL: "./node_modules/", packageConfigPaths: [ "./node_modules/*/package.json", "./node_modules/@mescius/*/package.json", "./node_modules/@babel/*/package.json", "./node_modules/@vue/*/package.json", ], map: { vue: "./node_modules/vue/dist/vue.esm-browser.js", "systemjs-babel-build": "systemjs-plugin-babel/systemjs-babel-browser.js", "@mescius/activereportsjs/pdfexport": "@mescius/activereportsjs/dist/ar-js-pdf.js", "@mescius/activereportsjs/tabulardataexport": "@mescius/activereportsjs/dist/ar-js-tabular-data.js", "@mescius/activereportsjs/htmlexport": "@mescius/activereportsjs/dist/ar-js-html.js", "@mescius/activereportsjs/xlsxexport": "@mescius/activereportsjs/dist/ar-js-xlsx.js", "@mescius/activereportsjs-vue": "@mescius/activereportsjs-vue/lib/index.js", "@mescius/activereportsjs/reportviewer": "./reportviewer.js", "@mescius/activereportsjs/viewer": "./reportviewer.js", "@mescius/activereportsjs/reportdesigner": "@mescius/activereportsjs/dist/ar-js-designer.js", "@mescius/activereportsjs/core": "@mescius/activereportsjs/dist/ar-js-core.js", "@mescius/activereportsjs/styles": "@mescius/activereportsjs/styles", "@mescius/activereportsjs-i18n": "@mescius/activereportsjs-i18n/dist/ar-js-locales.js", "@mescius/ar-js-pagereport": "@mescius/activereportsjs/dist/ar-js-core.js", }, meta: { "*.css": { loader: "systemjs-plugin-css" }, "./src/*.vue": { loader: "../plugin-vue/index.js" }, "*.vue": { loader: "./plugin-vue/index.js" }, }, packages: { "vue-demi": { defaultExtension: "mjs", main: "lib/index.mjs", }, }, }); })(this);