WebDesigner Localization

In This Topic

WebDesigner automatically sets the UI language the same as that of the browser for the localizations: English, Japanese, and simplified Chinese. This article discusses setting a web designer UI language different from the browser for the supported localizations and adding custom localization for the languages that are not explicitly supported.

Set WebDesigner UI Language

To specify the UI language of WebDesigner, specify the language 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> <!-- get these files from the installation location for the package: \node_modules\@mescius\activereportsnet-designer\dist --> <link rel="stylesheet" href="web-designer.css" /> <script src="web-designer.js"></script> </head> <body> <div id="ar-web-designer" class="ar-web-designer"> </div> <script> GrapeCity.ActiveReports.Designer.create('#ar-web-designer', { language: 'ja-JP' }); </script> </body> </html>

Index.html

Copy Code

<!DOCTYPE html>
<html>
<head>
    <!-- get these files from the installation location for the package: \node_modules\@mescius\activereportsnet-designer\dist -->
    <link rel="stylesheet" href="web-designer.css" />
    <script src="web-designer.js"></script>
</head>
<body>
    <div id="ar-web-designer" class="ar-web-designer">
    </div>
    <script>
        GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
            language: 'ja-JP'
        });
    </script>
</body>
</html>

Add Custom Localization using Resource Strings

With the WebDesigner NPM Package, you can access the resource strings from the custom-resources.json file available in the activereportsnet-designer\dist\docs folder of the package. In the 'custom-resources.json' file, you will find the resources stored in the file as shown:

Structure of custom-resources.json	Copy Code
{ "ns": "bundle namespace", "lng": "bundle language", "resources": Record<string,any> }

To add custom localization to the web designer UI,

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

Open 'fr-resources.json' file and translate the strings from the ‘resources’ node to a language, say French. Also, set the ‘lng’ node with an appropriate bundle language.
For example, here we are localizing the WebDesigner component for French language, so the strings must be translated to French language and 'lng' must be set to 'fr-FR'.

Note: In web designer, resources should be assigned to their specific namespace, so do not modify the ‘ns’ node when translating resources.

Sample fr-resources.json	Copy Code
[ { "ns": "components", "lng": "fr-FR", "resources": { "appBar": { "btnPreview": "Aperçu", "btnFile": "Déposer", "btnHome": "Maison", "btnInsert": "Insérer", "textUnsavedChanges": "Modifications non enregistrées", "btnParameters": "Paramètres" }, "menu": { "btnClose": "Fermer", "titlePin": "Broche", "btnLayerList": "Couches", "btnGroupEditor": "Éditeur de groupe", "btnReportExplorer": "Explorateur" } } } ]

Sample fr-resources.json

Copy Code

[
   {
     "ns": "components",
     "lng": "fr-FR",
     "resources": {
       "appBar": {
         "btnPreview": "Aperçu",
         "btnFile": "Déposer",
         "btnHome": "Maison",
         "btnInsert": "Insérer",
         "textUnsavedChanges": "Modifications non enregistrées",
         "btnParameters": "Paramètres"
       },
       "menu": {
         "btnClose": "Fermer",
         "titlePin": "Broche",
         "btnLayerList": "Couches",
         "btnGroupEditor": "Éditeur de groupe",
         "btnReportExplorer": "Explorateur"
       }
     }
   }
]

Note: As you may notice,
• We have modified only the resource values and left the bundle namespace (e.g., components) and resource section (e.g., appBar, menu) untouched.
• 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.

Now that we have the translated resource bundles in the 'fr-resources.json' file, load this file and use addLanguage() and language APIs to localize the web designer. .

Index.html	Copy Code
<!DOCTYPE html> <html> <head> <!--get these files from the installation location for the package: \node_modules\@mescius\activereportsnet-designer\dist--> <link rel="stylesheet" href="web-designer.css" /> <script src="web-designer.js"></script> </head> <body> <div id="ar-web-designer" class="ar-web-designer"> </div> <script> fetch("./fr-resources.json").then(res => res.json()).then((res) => { var languageResource = res; GrapeCity.ActiveReports.Designer.addLanguage('fr-FR', languageResource); GrapeCity.ActiveReports.Designer.create('#ar-web-designer', { language: 'fr-FR' }); }); </script> </body> </html>

Index.html

Copy Code

<!DOCTYPE html>
<html>
<head>
 <!--get these files from the installation location for the package: \node_modules\@mescius\activereportsnet-designer\dist-->
    <link rel="stylesheet" href="web-designer.css" />
    <script src="web-designer.js"></script>
</head>
<body>
    <div id="ar-web-designer" class="ar-web-designer">
    </div>
    <script>
        fetch("./fr-resources.json").then(res => res.json()).then((res) => {
            var languageResource = res;
            GrapeCity.ActiveReports.Designer.addLanguage('fr-FR', languageResource);
            GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
                language: 'fr-FR'
            });
        });
    </script>
</body>
</html>

An alternate approach is to pass the translated resource strings from custom-resources.json directly as the JSON object, as shown, and use addLanguage() and language APIs to localize the web designer.

Index.html	Copy Code
<!DOCTYPE html> <html> <head> <!--get these files from the installation location for the package: \node_modules\@mescius\activereportsnet-designer\dist--> <link rel="stylesheet" href="web-designer.css" /> <script src="web-designer.js"></script> </head> <body> <div id="ar-web-designer" class="ar-web-designer"> </div> <script> var resourceBundles = [ { "ns": "components", "lng": "fr-FR", "resources": { "appBar": { "btnPreview": "Aperçu", "btnFile": "Déposer", "btnHome": "Maison", "btnInsert": "Insérer", "textUnsavedChanges": "Modifications non enregistrées", "btnParameters": "Paramètres" }, "menu": { "btnClose": "Fermer", "titlePin": "Broche", "btnLayerList": "Couches", "btnGroupEditor": "Éditeur de groupe", "btnReportExplorer": "Explorateur" } } } ]; GrapeCity.ActiveReports.Designer.addLanguage('fr-FR', resourceBundles); GrapeCity.ActiveReports.Designer.create('#ar-web-designer', { language: 'fr-FR' }); </script> </body> </html>

Index.html

Copy Code

<!DOCTYPE html>
<html>
<head>
    <!--get these files from the installation location for the package: \node_modules\@mescius\activereportsnet-designer\dist-->
    <link rel="stylesheet" href="web-designer.css" />
    <script src="web-designer.js"></script>
</head>
<body>
    <div id="ar-web-designer" class="ar-web-designer">
    </div>
    <script>
        var resourceBundles = [
            {
                "ns": "components",
                "lng": "fr-FR",
                "resources": {
                    "appBar": {
                        "btnPreview": "Aperçu",
                        "btnFile": "Déposer",
                        "btnHome": "Maison",
                        "btnInsert": "Insérer",
                        "textUnsavedChanges": "Modifications non enregistrées",
                        "btnParameters": "Paramètres"
                    },
                    "menu": {
                        "btnClose": "Fermer",
                        "titlePin": "Broche",
                        "btnLayerList": "Couches",
                        "btnGroupEditor": "Éditeur de groupe",
                        "btnReportExplorer": "Explorateur"
                    }
                }
            }
        ];
        GrapeCity.ActiveReports.Designer.addLanguage('fr-FR', resourceBundles);
        GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
            language: 'fr-FR'           
            });
    </script>
</body>
</html>

Developers

WebDesigner API