[]
        
(Showing Draft Content)

Js Viewer Localization

Js Viewer supports English, Japanese, and Chinese localizations for which the localized files are already available. This article discusses setting a Js Viewer UI language from the supported localizations and adding custom localization for the languages that are not explicitly supported.

Set Js Viewer UI Language

To set the UI language of Js Viewer, specify the Js Viewer API while initializing the component. The supported values are 'en-US' (for English), 'ja-JP' (for Japanese), and 'zh-CN' (for simplified Chinese).

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link href="jsViewer.min.css" rel="stylesheet">
    <link href="index.css" rel="stylesheet">
    <script src="jsViewer.min.js"></script>
</head>
<body onload="loadViewer()">
    <div id="viewerContainer">
    </div>
    <script>
        let viewer;
        function loadViewer() {
            viewer = GrapeCity.ActiveReports.JSViewer.create({
                element: '#viewerContainer',
                locale: 'ja-JP'
            });
            viewer.openReport("Report.rdlx");
        }
    </script>
</body>
</html>

Add Custom Localization using Resource Strings

With the Js Viewer NPM package, you can access the resource strings from the custom-locale.json file available in the activereportsnet-viewer\dist folder of the package. By default, the custom-locale.json file contains all the strings in English that are required to localize the viewer.


To add custom localization to the Js Viewer UI,

  1. Copy the 'custom-locale.json' file to the 'wwwroot' folder and rename the file to, say, 'fr-locale.json'.

  2. Open 'fr-locale.json' file and translate the strings in the file to any language, say French. For example, here we are localizing the Js Viewer component for French language, so the strings must be translated to French language.

    {
       "viewer": {
         "toolbar": {
           "refresh": "Rafraîchir",
           "cancel": "Annuler"
         },
         "search": {
           "start-search-btn": "Recherche",
           "paneltitle": "Recherche"
         }
       }
     }
  3. Specify the URL of 'fr-locale.json' file using the Js Viewer API to add localization to the viewer.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <link href="jsViewer.min.css" rel="stylesheet">
        <link href="index.css" rel="stylesheet">
        <script src="jsViewer.min.js"></script>
    </head>
    <body onload="loadViewer()">
        <div id="viewerContainer">
        </div>
        <script>
         let viewer;
         function loadViewer() {
           viewer = GrapeCity.ActiveReports.JSViewer.create({
               element: '#viewerContainer',
               localeUri: './fr-locale.json'
           });
             viewer.openReport("Report.rdlx");
         }
       </script>
     </body>
     </html>

    type=note

    Note: As you may notice, some of the localization strings are skipped in the above example. The values for which localization strings are missing are by default displayed using EN localization data.

An alternate approach is to use the Js Viewer API to directly assign the localized JSON to the viewer, as shown.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link href="jsViewer.min.css" rel="stylesheet">
    <link href="index.css" rel="stylesheet">
    <script src="jsViewer.min.js"></script>
</head>
<body onload="loadViewer()">
    <div id="viewerContainer">
    </div>
    <script>
        let viewer;
        function loadViewer() {
            viewer = GrapeCity.ActiveReports.JSViewer.create({
                element: '#viewerContainer',
                localeData: {
                    "viewer": {
                        "toolbar": {
                            "refresh": "Rafraîchir",
                            "cancel": "Annuler"
                        },
                        "search": {
                            "start-search-btn": "Recherche",
                            "paneltitle": "Recherche"
                        }
                    }
                }
            });
            viewer.openReport("Report.rdlx");
        }
    </script>
</body>
</html>

See Also

Developers

Js Viewer API