Localize your application for various languages

Discover how to make your application accessible in multiple languages.

Difficulty: beginner
Prerequisites: have an application on Bonita UI Builder

Suppose you’re creating an application and want to allow users to easily switch between several languages by choosing a language option. While UI Builder currently doesn’t have a built-in feature for making an application multilingual, the steps below describe an example of the recommended way to do so.

1. Design the application’s interface

Drag and drop a Select widget onto your interface, name it SelectLanguage, and configure the Source Data property as follows:

[
  {
    "key": "English",
    "value": "en"
  },
  {
    "key": "Français",
    "value": "fr"
  },
  {
    "key": "Spanish",
    "value": "es"
  }
]

Now, drag and drop a Text widget onto your interface and add a sentence into its Text property. For example: This is a sample application to demonstrate the possibility of making it available in multiple languages.

2. Define JS objects

Go to the JS section, create a new JavaScript object, and name it localization. Then, define keys for each language to correspond with the values set for the SelectLanguage widget.

Include the words or sentences along with their translations as key-value pairs for all languages, as shown in the code snippet below:

export default {
	translations: {
		en: {
			"This is a sample application to demonstrate the possibility of making it available in multiple languages.": "This is a sample application to demonstrate the posibility of making it available in multi-languages."
		},
		fr: {
			"This is a sample application to demonstrate the possibility of making it available in multiple languages.": "Il s'agit d'un exemple d'application visant à démontrer la possibilité de la rendre disponible en plusieurs langues."
		},
		es: {
			"This is a sample application to demonstrate the possibility of making it available in multiple languages.": "Esta es una aplicación de muestra para demostrar la posibilidad de hacerlo disponible en varios idiomas."
		}
	}
}

Ensure that all language keys match the values set in the SelectLanguage source data, such as en, fr, and es, etc.

To keep the codebase organized, define another JavaScript object and name it i18n. Then, copy and paste the JavaScript code below:

export default {
	languageKeys: {},
	onLanguageChange() {
		this.languageKeys = localization.translations[SelectLanguage.selectedOptionValue];
	},
	setLangugeKey() {
		this.languageKeys = localization.translations["en"];
		return this.languageKeys;
	}
}

This JavaScript module manages language translations using the languageKeys property. The onLanguageChange() method updates languageKeys based on the selected language, while setLangugeKey() sets it to the default English translations and returns the updated object.

Ensure that the Run on page load setting is enabled for the setLanguageKey function.

3. Bind JS objects to widgets

Come back to the UI section and select the SelectLanguage widget.
Set its Label to {{i18n.languageKeys["Select language"]}}.
In the Events property, set {{i18n.onLanguageChange();}} to invoke the function when the language changes.
Then, select the text widget and set the Text property to {{i18n.languageKeys["This is a sample application to demonstrate the possibility of making it available in multiple languages."]}}.

Since the goal of this example is to provide best practices for managing several languages, it does not address cookies. It is of course possible to define JS objects that manage cookies according to your needs.