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.
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> |
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,
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" } } } ] |
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> |
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> |