Skip to main content

Add Multi Language (Localization)

LR Method​

  • To access the localization, you need to create a key and type the localization of this key.

  • Then, you can use this key anywhere in the page with LR method.

This method returns the language equivalent of the given key parameter with the current language of the system.

quick.LR(key: string)

Parametric Localization​

  • Specify the parametric key in the localization definition in {} characters.

GlobalLocalizationExplorer

  • The values of the parametric keys are specified in the LR method. 
quick.LR('UserName', { firstName: 'Ahmet', lastName: 'Yıldız' });

Set Language​

You can set the system language to given parameter if you add it beforehand in the localization file.

quick.Quick.setLanguage(LRType: string);

Get Language​

You can get your default system language value by using the code below.

Your default system language value is tr-TR.

quick.Quick.getLanguage();

Localization Types​

There are 3 different localization structures:

  • Page Localization : Localization information that is valid only on the page where it is defined.

  • Global Localization : Localization information that is valid throughout the entire application.

  • External Localization : Localization information obtained from an external service or database. External Localization information is added to the Global Localization information.

Page Localization​

You can access it by navigating to the Localization, then Local Resources menu in the top menu in editor.

You can add, modify and delete new localization. You can also Export the Localization information you defined to Excel file and Import it from Excel file to Localization.

Global Localization​

You can access the Global Localization by clicking the + button on the right side of the UI Settings module in the Explorer tab in Plateau Studio and selecting Global Localization in the menu that opens.

It is also possible for you to use the localization information you defined in the Global Localization page on other pages in your app.

You can also Export the Localization information you defined to excel file and Import it from excel file to Global Localization.

GlobalLocalizationExplorer

External Localization​

You can access the Pipeline File by clicking the + button on the right side of the UI Settings module in the Explorer tab in Plateau Studio and selecting Pipeline File in the menu that opens.

Note

To interact with Pipeline, you can see Pipeline Management

PipelineExplorer

A service call should be made in the PreRender event of the PageComponent on the Pipeline to get localization information.

In the onSuccess event that will run when your service call is successful, the localization information from the service is added to the Global Localization information with the quick.importLocalization() method.

If the language is changed in the application, there is no need to do anything extra. quick.setLanguage("en-US") is enough to do.

overrite = true: If Global Localization has same key, then overrite it and take external localization value.

overrite = false: If Global Localization has same key, then don't take external localization value, ignore it.

Import Localization parameters as follows:

 quick.importLocalization(langCode:string, localization :Record<string, string>, options: { overrite?:boolean } = {})

Usage Example:

let langCode = "en-US"; 
let localization = {
     pageTitle: "Page Title:",
     pageNumber: "Page Number:",
     totalPageCount : "Total Page Count:"
 };
let options = { overrite: true };   
quick.importLocalization(langCode, localization, options);
Note

External Localization usege example in Pipeline

Multi Language And ( LTR / RTL )​

Add New Language With ( LTR / RTL )​

There are 2 default languages: tr-TR and en-US. Apart from these languages, you can add new language to your application. You can add and delete the new language from the Localization, and then Add Language screen in the menu. When adding a new language, you can specify the language's 'Right To Left' or 'Left to Right' property depending on the language.

You can add languages in 2 ways:

  • You can do it on a page basis. In this case, it will only be valid for the relevant page.

  • You can add the Global Localization page to the b located in the Explorer window and add, modify and delete new localization here. You can use the localization information you defined in the Global Localization page on other pages in your app.

  • You can also define the rootLangCode value in the Settings File like this ( rootLangCode : ar-XA ). For projects with webSdk integration, you can specify the application rootLangCode in the config definition passed in containerServices ( config.LRType = lang; ) . This value will be the opening language code of the application.


Samples Qjson​

localization_AddLanguageRTL_Sample