Demos
Code Samples
Designer
Localization

Designer Component Localization

These examples illustrate how to localize the ActiveReportsJS Designer component's user interface in Angular, React, Vue, and pure JavaScript applications. The Designer's UI is set to use the Japanese language ("ja"). Other supported languages include "fr" (French), "zh" (Chinese), and the default language "en" (English). For more details, please visit the Localization page. To view the code, scroll down the page.

JavaScript
Angular
Vue
React
app.vue
index.html
Copy to CodeMine
<template>
  <div id="designer-host">
    <arjs-designer :onInit="onInit" />
  </div>
</template>

<script>
import { Designer } from "@mescius/activereportsjs-vue";
import "@mescius/activereportsjs-i18n-ja";

export default {
  components: { "arjs-designer": Designer },
  methods: {
    onInit() {
      return {
        language: "ja",
      };
    },
  },
};
</script>

<style>
@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;
}
</style>
<template> <div id="designer-host"> <arjs-designer :onInit="onInit" /> </div> </template> <script> import { Designer } from "@mescius/activereportsjs-vue"; import "@mescius/activereportsjs-i18n-ja"; export default { components: { "arjs-designer": Designer }, methods: { onInit() { return { language: "ja", }; }, }, }; </script> <style> @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; } </style>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>ActiveReportsJS Report Designer Localization Sample</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- 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> 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": "./reportdesigner.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", "@mescius/activereportsjs-i18n-ja": "@mescius/activereportsjs-i18n/dist/designer/ja-locale.js", "@mescius/activereportsjs-i18n-zh": "@mescius/activereportsjs-i18n/dist/designer/zh-locale.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);