---
# System prepended metadata

title: Add Multi Language (Localization)

---

---
id: localization
title: 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.

```js
quick.LR(key: string)
```

<img src="https://stechq.github.io/cdn/documentation/studio/Localization1.gif" width="800px" height="auto" />

## Parametric Localization

 -  Specify the parametric key in the localization definition **in {} characters.**

![GlobalLocalizationExplorer](https://stechq.github.io/cdn/documentation/ui-module/languageManagement/ParametricLocalization.png)

- The values of the parametric keys are specified in the **LR method**. 
```js
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.
```js
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**.
```js
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.


<img src="https://stechq.github.io/cdn/documentation/studio/Localization1.gif" width="650" height="500" />


<img src="https://stechq.github.io/cdn/documentation/studio/Localization2.gif" width="650" height="500" />


### 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](https://stechq.github.io/cdn/documentation/ui-module/languageManagement/UISettingsAddGlobalLocalization.png)


<img src="https://stechq.github.io/cdn/documentation/studio/Localization3.gif" width="650" height="500" />

### 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.


:::info
:information_source: **Info**

To interact with Pipeline, you can see **[Pipeline Management](https://docs.onplateau.com/UI-Screens/UI-Settings/pipeline)**

:::



![PipelineExplorer](https://stechq.github.io/cdn/documentation/ui-module/pipelineManagement/UISettingsAddPipelineFile.png)

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:**
```js
 quick.importLocalization(langCode:string, localization :Record<string, string>, options: { overrite?:boolean } = {})
 ```
**Usage Example:**
 ```js
 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);
  ```
 

:::info
:information_source: **Info**

External Localization usege example in **<a href="https://studio.onplateau.com/standAlone/docsEditor/pipeline" target="_blank">Pipeline</a>**

:::

<img src="https://stechq.github.io/cdn/documentation/studio/Localization4.gif" width="650" height="500" />


## 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.


<img src="https://stechq.github.io/cdn/documentation/studio/Localization6.gif" width="650" height="500" />
<br/>

## Samples Qjson
<a href="https://studio.onplateau.com/standAlone/docsEditor/localization_AddLanguageRTL_Sample" target="_blank">localization_AddLanguageRTL_Sample</a>

