Localization in Reporting for Angular
- 3 minutes to read
In the Angular application you should import the localized JSON resources and use the CustomizeLocalization callback to call the LoadMessages method that loads localized strings.
Obtain JSON Files from the Localization Service
Log into the DevExpress website.
Open the DevExpress Localization Service.
Select your target language, modify translations, and click the Download button. Refer to the Localization Service documentation topic for more information.
Unpack the downloaded executable file to get the satellite assemblies and json resources directory. This directory contains the following JSON files required to localize the reporting controls (where xx is a culture name):
File Name | Localization Strings |
---|---|
dx-analytics-core.xx.json | Shared Components: Query Builder, Data Source Wizard, Filter Editor, Expression Editor |
dx-reporting.xx.json | Web Document Viewer, End-User Report Designer and other reporting-specific components |
Tip
The component’s UI is built on DevExtreme widgets, so to localize the editors you should also use one of the approaches described in the following topic: DevExtreme - Localization. Specify web server’s thread culture to apply culture-specific formats to numbers and dates.
Note
The complete sample project How to Localize the Reporting Controls in an Angular JavaScript Application is available in the DevExpress Examples repository.
Localize the Application
The steps below are based on an Angular Reporting application created from DevExpress template as described in the following help topics:
- Create an Angular Application with a Document Viewer From Template
- Create an Angular Application with a Report Designer From Template
Copy the dx-analytics-core.xx.json and dx-reporting.xx.json files (where xx is the culture identifier) to the root application folder (in this example, ClientApp\src).
Open a View file and insert the code that handles the CustomizeLocalization callback:
<dx-report-viewer [reportUrl]="reportUrl" height="800px"> <dxrv-request-options [invokeAction]="invokeAction" [host]="hostUrl"> </dxrv-request-options> <dxrv-calbacks (CustomizeLocalization)="CustomizeLocalization($event)"> </dxrv-callbacks> </dx-report-viewer>
Add the Angular compiler options to import local JSON modules. Open the tsconfig.json file and set the resolveJsonModule and esModuleInterop options to true:
"compilerOptions": { "resolveJsonModule": true, "esModuleInterop": true, }
Open a View Model file and add the CustomizeLocalization event handler. Add import directives and use the LoadMessages method to load localized strings.
// ... import localAnalyticMessages from "../../dx-analytics-core.xx.json"; import localReportingMessages from "../../dx-reporting.xx.json"; // ... export class ReportViewerComponent { reportUrl: string = "TestReport"; invokeAction: string = '/DXXRDV'; CustomizeLocalization(event) { event.args.LoadMessages(localAnalyticMessages); event.args.LoadMessages(localReportingMessages); }
Recompile the project and open the application in the browser (default URL is http://localhost:4200/).