Skip to content
Classic documentation
  • There are no suggestions because the search field is empty.

Building multilingual applications

This guide explains how to configure and test the Betty Blocks Translations feature, which enables applications to automatically display the correct language based on a user's browser settings.

Using the Betty Blocks Translations feature, you can create multilingual applications that adapt to local requirements. The feature works by detecting the active language settings in a user’s web browser. If a translation matching the browser's language is available, the application displays it; otherwise, it defaults to the application's Primary Language.

This guide covers how to configure languages, create translation keys, apply them to your interface, and test the results.

How translations work

Instead of hard-coding text (like "Submit" or "Name") directly into your application components, you assign Reference Keys.

  • Key: A unique identifier (e.g., Btn_Submit).
  • Value: The actual text displayed to the user based on the selected language (e.g., "Submit" for English, "Versturen" for Dutch).

Managing languages

Before defining keys, you must set up the languages your application will support.

  1. Open Translations: Click Tools in the Builder Bar and select Translations.
  2. Access Manager: Open the Choose a Primary Language (or Choose a language) dropdown menu and click Manage languages.
  3. Add Languages:
    • Search for a language by name or scroll through the list.
    • Click the Add (+) button next to the desired language. It will appear in the Added Language(s) list.
    • Repeat this for all required languages.
  4. Remove Languages: If needed, click the Bin/Trash icon next to a language in the Added Language(s) list to remove it and its associated translations.
  5. Close the window to return to the main view.

Setting the primary language

The Primary Language is the default text displayed when no specific translation matches the user's browser settings.

  1. In the main Translations view, open the Choose a Primary Language menu.
  2. Select your default language (e.g., English, EN).
  3. A column will appear for this language, allowing you to define the default values for your keys.


Creating keys and values

You need to create a unique key for every text element (buttons, titles, labels) in your application.

Naming Recommendations:

To keep your keys organized, consider using a naming convention such as:

  • Bn to Bnn for Button names
  • Txtn to Txtnn for Text elements
  • FFn to FFnn for Form Field names

How to add a key:

  1. Enter Key Name: In the empty Key column (far left), type your unique code (e.g., Btn_Save).
  2. Add Row: Press Enter or click the Add (+) button to create the row. You can also use Shift + Return to quick-add keys.
  3. Define Primary Value: In the Primary Language column, enter the default text to display (e.g., "Save").

Adding translations (secondary languages)

Once your keys and primary values are set, you can add translations for other languages.

  1. Click the Add translations to another language (+) button next to the primary language column.
  2. Select a language from the dropdown (these are populated from the manage languages settings).
  3. A new column will appear for that language.
  4. Enter the translated text corresponding to each key.
    • Example: For Key St, Primary Value Street, enter Straat in the Dutch column.

Switching Views: If you have multiple secondary languages, use the Choose a Language menu to switch which translation column is currently visible.

Import and export

For large applications, manual entry can be slow. You can use CSV files to manage translations externally.

  • Export: Use the export feature to download a .csv file of your current keys and values. This is useful for sending to colleagues or third-party translation services.
  • Import: You can upload a .csv containing a list of keys and translations.
    • Tip: If you have a standard set of keys you use across multiple applications, export them as a template and import them into new projects to ensure consistency.

Applying translations in the application

After defining keys, you must connect them to your User Interface (UI).

  1. Navigate to the Pages module.
  2. Select a component (e.g., a button or input field).
  3. In the configuration options for that component's text/label, select the Translations button.
  4. Select the appropriate Key from the list.

For full details on applying translations, see this document.

Testing translations

To verify your application adapts correctly:

  1. Set Browser Language: Change the default language settings in your specific web browser to the target language (e.g., change from English to Dutch).
  2. Run Application: Press the Play button in the builder bar.
  3. Verify: The application will open in a new window displaying the text values associated with your browser's active language.

Best practices

  • Consistency: Apply consistent naming conventions for your keys to avoid confusion as the application grows.
  • Field Length: When translating, ensure the translated term fits within the design of your interface (e.g., German words are often longer than English).
  • Completeness: Use the Manage Languages view to check the status of your keys; it displays details on the number of keys versus defined values to help you spot missing translations.