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
index.html
Copy to CodeMine
<!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"
    />

    <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="$DEMOROOT$/lib/purejs/license.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"
    />
    <style>
      #viewer-host {
        margin: 0 auto;
        width: 100%;
        height: 600px;
      }
    </style>
  </head>
  <body onload="onLoad()">
    <div id="viewer-host"></div>
    <script>
      async function loadData() {
        // Use the Fetch Api to pull the data https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
        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;
      }

      async function loadReport() {
        // load report definition from the file
        const reportResponse = await fetch(
          "/activereportsjs/demos/resource/reports/CustomersTable.rdlx-json"
        );
        const report = await reportResponse.json();
        return report;
      }

      async function onLoad() {
        MESCIUS.ActiveReportsJS.Core.FontStore.registerFonts(
          "/activereportsjs/demos/resource/fontsConfig.json"
        );
        const viewer = new MESCIUS.ActiveReportsJS.ReportViewer.Viewer(
          "#viewer-host"
        );
        viewer.theme="ActiveReports";
        const data = await loadData();
        const report = await loadReport();
        // update the embedded data
        report.DataSources[0].ConnectionProperties.ConnectString =
          "jsondata=" + JSON.stringify(data);
        viewer.open(report);
      }
    </script>
  </body>
</html>
<!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" /> <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="$DEMOROOT$/lib/purejs/license.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" /> <style> #viewer-host { margin: 0 auto; width: 100%; height: 600px; } </style> </head> <body onload="onLoad()"> <div id="viewer-host"></div> <script> async function loadData() { // Use the Fetch Api to pull the data https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch 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; } async function loadReport() { // load report definition from the file const reportResponse = await fetch( "/activereportsjs/demos/resource/reports/CustomersTable.rdlx-json" ); const report = await reportResponse.json(); return report; } async function onLoad() { MESCIUS.ActiveReportsJS.Core.FontStore.registerFonts( "/activereportsjs/demos/resource/fontsConfig.json" ); const viewer = new MESCIUS.ActiveReportsJS.ReportViewer.Viewer( "#viewer-host" ); viewer.theme="ActiveReports"; const data = await loadData(); const report = await loadReport(); // update the embedded data report.DataSources[0].ConnectionProperties.ConnectString = "jsondata=" + JSON.stringify(data); viewer.open(report); } </script> </body> </html>