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.

import React from "react"; import ReactDOM from "react-dom"; import { Designer } from "@mescius/activereportsjs-react"; function App() { return ( <div id="designer-host"> <Designer report={{ id: "blank.rdlx-json", displayName: "my report" }} ></Designer> </div> ); } 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 Designer Integration Sample</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <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>
@import url("/activereportsjs/demos/arjs/styles/ar-js-ui.css"); @import url("/activereportsjs/demos/arjs/styles/ar-js-designer.css"); #designer-host { width: 100%; height: 550px; }
(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/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-react": "npm:@mescius/activereportsjs-react/lib/index.js", "@mescius/activereportsjs/reportviewer": "npm:@mescius/activereportsjs/dist/ar-js-viewer.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-ja": "npm:@mescius/activereportsjs-i18n/dist/designer/ja-locale.js", "@mescius/activereportsjs-i18n-zh": "npm:@mescius/activereportsjs-i18n/dist/designer/zh-locale.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);