Languages & Localization

Discover how to add multiple languages within your project.

PandaSuite does not automatically translate your content, but the tool greatly facilitates the integration of your content in multiple languages.

Add a language

By default, your project is built in a single language.

Before editing contents in another language, it is necessary to add this language to your project to facilitate your configuration and have the ability to switch from one to another.

To add the new language:

Go to the Project properties.
In the Languages section, click on + Add.
First, declare the initial language of the project, the one in which you have worked until now.

⚠️ It is essential to select this initial language correctly, as it serves as a reference for all others. All layout changes in this language will be automatically applied to other languages. Likewise, once the initial language is set, it is not possible to change it without deleting all associated content.

💡 The languages indicated in PandaSuite Studio are only for reference to assist in your configuration. If the language of your choice is not present in PandaSuite Studio, do not hesitate to contact our team or use another one.

Add one or more other languages. You can add as many languages as necessary.
The pin icon allows you to set the default language, which will automatically apply when the project is opened.

Edit a language

When you want to edit another language, click on the flag located at the bottom right of your workspace and select the flag corresponding to that language.

You can change texts, images, audio & video contents ( Video Player and Fullscreen Video). When you change the source of the images, make sure to add a new image with the same ratio, otherwise, it may distort.

It is also possible to change certain properties by language. In the case of an URL Media Player or a Web component, it is possible, for example, to change the URL by language. It is not yet possible to change actions (for example, Open an external URL) by language, but you can add a data binding on this URL to a variable by language. To automatically adjust the size of a block based on the language, we recommend using the Flexbox component.

The reference layout is that of the initial language. Therefore, it is not possible to modify the layout for a specific language. If you change the size of a block in a language (because of a longer translation, for example), this change will be reflected in all versions.

Create a language switch menu

You have the freedom to create your language switch menu.

To change the language at the interface level:

Select your trigger (flags, FR/EN, etc.) and add a new action.
Choose a trigger and the action Change language for the desired language.
The application will automatically adapt to the chosen language.

Automatic localization according to the device's language

To offer an optimal user experience, you can automatically synchronize your application with the device's language. You have access to the locale data coming from the device's context.

Here's how to do it:

Add a Condition component and create a condition per language
Activate the Automatic evaluation option so that the condition is automatically evaluated
In the If field, choose the Project > Context > locale, function Starts with and set the value corresponding to the desired language (for example, "fr" for French, "en" for English, etc.). To know the code corresponding to the language: Language designators with region
Set the action: if the condition is met (i.e., if the device's language matches the defined value), choose the action Change language and select the appropriate language.
Repeat these steps for each language you have integrated into your application.

Languages and dynamic content

It is also possible to add languages to the PandaSuite database.

First, make sure that the desired languages are added to your project.

Once this is done, you can enrich your PandaSuite database with additional translations for each key. Each piece of dynamic content can have versions in all the languages you have defined.