ActiveReports 15 .NET Edition
ActiveReports 15 User Guide / Preview Reports / JavaScript / UI Localization
In This Topic
    UI Localization
    In This Topic

    JSViewer automatically detects the user's language and supports English, Japanese, and Chinese localizations. Here are examples of localizing JSViewer UI in an Angular application.

    Setting JSViewer UI language

    To set the UI language of JSViewer, the locale property can be used during initialization or at runtime. The supported values are 'en-US' (for English), 'ja-JP' (for Japanese), and 'zh-CN' (for Chinese).

    app.component.ts
    Copy Code
    import { Component } from '@angular/core';
    declare var GrapeCity: any;
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html'
    })
    export class AppComponent {
      title = "app";
      viewer: any;
      ngAfterViewInit() {
        this.viewer = new GrapeCity.ActiveReports.JSViewer.create({
          element: '#viewer-host',
          locale : "ja-JP"
        });
        this.viewer.openReport("DemoReport.rdlx");
      }
    }
    

    Adding custom localization

    To add custom localization to JSViewer, specify the URL of the JSON file containing the localization data using localeUri:

    app.component.ts
    Copy Code
    import { Component } from '@angular/core';
    declare var GrapeCity: any;
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html'
    })
    export class AppComponent {
      title = "app";
      viewer: any;
      ngAfterViewInit() {
        this.viewer = new GrapeCity.ActiveReports.JSViewer.create({
          element: '#viewer-host',
          localeUri: './custom-locale.json'
        });
        this.viewer.openReport("DemoReport.rdlx");
      }
    }
    

    You can also pass the JSON object directly using localeData:

    app.component.ts
    Copy Code
    import { Component } from '@angular/core';
    declare var GrapeCity: any;
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html'
    })
    export class AppComponent {
      title = "app";
      viewer: any;
      ngAfterViewInit() {
        this.viewer = new GrapeCity.ActiveReports.JSViewer.create({
          element: '#viewer-host',
          localeData: JSON.parse(`{
            "export":  {
              "boolTextFalse": "いいえ",
              "boolTextTrue": "はい"
            },
            "viewer": {
              "toolbar": {
              "refresh": "更新"
            }
            }
          }`
          ),
        });
        this.viewer.openReport("DemoReport.rdlx");
      }
    }