Demos
Code Samples
Designer
Default Report Item Properties

Default Report Item Properties

These samples show how to configure default report item properties for the designer component. Try adding a textbox into a report and notice that it has the preconfigured background color, text alignment, font family, and font size properties. For more details, please visit the documentation. To view the code, scroll down the page.

JavaScript
Angular
Vue
React
app.jsx
index.html
index.css
Copy to CodeMine
import React from "react";
import ReactDOM from "react-dom";
import { Designer } from "@mescius/activereportsjs-react";

import {FontStore} from '@mescius/activereportsjs/core';

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

const initTemplates = {
  imperialTemplates: [
    {id: "templates/imperial-template.rdlx-json"}
  ],
  metricTemplates: [
    {id: "templates/metric-template.rdlx-json"}
  ]
}

function onInit() {
  return {
      customInitTemplates: initTemplates
  };
}

function App() {
  return (
    <div id="designer-host">
      <Designer
        onInit={onInit}
      ></Designer>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));
import React from "react"; import ReactDOM from "react-dom"; import { Designer } from "@mescius/activereportsjs-react"; import {FontStore} from '@mescius/activereportsjs/core'; FontStore.registerFonts("/activereportsjs/demos/resource/fontsConfig.json"); const initTemplates = { imperialTemplates: [ {id: "templates/imperial-template.rdlx-json"} ], metricTemplates: [ {id: "templates/metric-template.rdlx-json"} ] } function onInit() { return { customInitTemplates: initTemplates }; } function App() { return ( <div id="designer-host"> <Designer onInit={onInit} ></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 Custom Defaults 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);