Js Viewer Localization

In This Topic

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 locale API while initializing the component. The supported values are 'en-US' (for English), 'ja-JP' (for Japanese), and 'zh-CN' (for simplified Chinese).

index.html	Copy Code
<!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>

index.html

Copy Code

<!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,

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

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.

Sample fr-locale.json	Copy Code
{ "viewer": { "toolbar": { "refresh": "Rafraîchir", "cancel": "Annuler" }, "search": { "start-search-btn": "Recherche", "paneltitle": "Recherche" } } }

Specify the URL of 'fr-locale.json' file using the localeUri API to add localization to the viewer.

index.html	Copy Code
<!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>

index.html

Copy Code

<!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>

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 localeData API to directly assign the localized JSON to the viewer, as shown.

index.html	Copy Code
<!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>

index.html

Copy Code

<!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>

Developers

Js Viewer API