Localization

ActiveReportsJS Localization module

ActiveReportsJS provides the localization module that includes translations of the Report Designer UI texts to Japanese(ja), Chinese(zh), and French(fr) languages. This module is available in the dist\locales folder of the download package

In addition, the localization module is distributed within @grapecity/activereports-localization package

Importing ActiveReportsJS Localization module

In Pure JavaScript applications, the localization module scripts can be referenced with script tag, for example:

<script type="text/javascript" src="scripts/locales/designer/ja-locale.js"></script>
<script type="text/javascript" src="scripts/locales/designer/zh-locale.js"></script>

Angular, React, or Vue applications can import the localization scripts from the @grapecity/activereports-localization package, for example:

import "@grapecity/activereports-localization/dist/designer/ja-locale";
import "@grapecity/activereports-localization/dist/designer/zh-locale";

Setting Report Designer UI language

The Angular, Vue, React and Svelte report designer components expose the onInit property that should resolve to a function returning the DesignerConfig object which includes the language property. Here is an example for React.

import React from "react";
import { Designer } from "@grapecity/activereports-react";

function onInit() {
  return {
      language: "fr"
  };
}

function App() {
  return (
      <Designer onInit={onInit} />
  );
}

In a pure JS application, the Designer constructor accepts the DesignerConfig object as the second parameter:

var designer = new Designer("#designer-host", { language: "fr" });

The Integration page contains more information on integrating the ActiveReportsJS Report Designer component in various applications.

You could also visit the Live Demo for the complete samples for pure JavaScript, Angular, Vue, and React applications.