Demos
Code Samples
Designer
Integration

Designer Component Integration

These samples show how to integrate the ActiveReportsJS Designer component into Angular, React, Vue, and pure JavaScript applications. For more details, please visit the Integration 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! :)
index.html
Copy to CodeMine
loading...
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>ActiveReportsJS Report Designer Integration Sample</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <script src="/activereportsjs/demos/arjs/dist/ar-js-core.js"></script>
    <script src="/activereportsjs/demos/arjs/dist/ar-js-designer.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-designer.css"
    />
    <style>
      #designer-host {
        width: 100%;
        height: 550px;
      }
    </style>
  </head>
  <body>
    <div id="designer-host"></div>
    <script>
      var designer = new MESCIUS.ActiveReportsJS.ReportDesigner.Designer(
        "#designer-host");
      designer.setReport({ id: "blank.rdlx-json", displayName: "my 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 Designer Integration Sample</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="/activereportsjs/demos/arjs/dist/ar-js-core.js"></script> <script src="/activereportsjs/demos/arjs/dist/ar-js-designer.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-designer.css" /> <style> #designer-host { width: 100%; height: 550px; } </style> </head> <body> <div id="designer-host"></div> <script> var designer = new MESCIUS.ActiveReportsJS.ReportDesigner.Designer( "#designer-host"); designer.setReport({ id: "blank.rdlx-json", displayName: "my report" }); </script> </body> </html>