Internationalization (i18n) & Localization: Translating UI Bakery Apps

In this example, we will add the possibility to switch to German in the app. Check out the instruction below👇

The feature allows you to translate not only the app content but also text that is not user controlled, such as interaction, hints, selection, pagination, messages, and validation.

1. Navigate to the App triggers section in the right side panel and create a new action for the On App Load trigger.

2. Select the JavaScript Code type and specify the following code to initialize all the translations using i18n.init({...}):

The default interpolation in UI Bakery is { prefix: '{', suffix: '}' }. Therefore, you should use single curly braces to insert your values into the string.

i18n.init({
  lng: 'de',
  ns: ['translation', 'uibakery'],
  defaultNs: ['translation'],
  resources: {
    en: {
      translation: {
        english: 'English',
        german: 'German',
        welcome: 'Welcome!',
        total: 'There are {total} users in total',
      },
      uibakery: {
        interactions: {
          ok: 'OK',
          cancel: 'Cancel',
          edit: 'Edit',
          save: 'Save',
          upload: 'Upload',
        },
        hints: {
          add_new_row: 'Add new row',
          cancel_adding_row: 'Cancel adding row',
          cancel_edit: 'Cancel edit',
          cancel_editing_row: 'Cancel row edit',
          cancel_rows_edit: 'Cancel rows edit',
          cancel_row_addition: 'Cancel row addition',
          confirm_and_save_added_row: 'Confirm and save added row',
          confirm_and_save_edited_rows: 'Confirm and save edited rows',
          confirm_and_save_row_edit: 'Confirm and save row edit',
          delete_row: 'Delete row',
          download_data_as: 'Download data as CSV',
          edit_data: 'Edit data',
          edit_multiple_rows: 'Edit multiple rows (Bulk edit)',
          edit_row: 'Edit row',
          reload_data: 'Reload Data',
        },
        selection: {
          clear_selection: 'Clear selection',
          select_all: 'Select all',
          reset_all: 'Reset all',
          selected: 'selected',
        },
        pagination: {
          items: 'items',
          page: 'Page',
          of: 'of',
          show_items: 'Show {value} items',
        },
        messages: {
          no_data_to_display: 'No data to display',
          no_file_selected: 'No file selected',
          not_available: 'N/A',
        },
        validation: {
          this_field_is_required: 'This field is required',
          enter_valid_email_address: 'Enter a valid email address',
          please_match_requested_format: 'Please match the requested format',
          enter_valid_url: 'Enter a valid url',
          color_is_not_valid: 'Color is not valid',
          invalid_json: 'Invalid JSON',
          date_must_be_on_or_after: 'Date must be on or after {date}',
          date_must_be_on_or_before: 'Date must be on or before {date}',
          some_of_uploaded_files_are_larger_than: 'Some of uploaded files are larger than {size}Mb',
          uploaded_file_is_larger_than: 'Uploaded file is larger than {size}Mb',
          invalid_date_format: 'Invalid date: "{value}", date should be in "{dateFormat}" format',
          this_field_must_contain_between_characters: 'This field must contain between {min} and {max} characters',
          this_field_must_contain_at_least_characters: 'This field must contain at least {min} characters',
          this_field_must_be_less_than_or_equal_characters:
            'This field must be less than or equal to {max} characters',
          this_field_must_be_between: 'This field must be between {min} and {max}',
          this_field_must_be_greater_than_or_equal: 'This field must be greater than or equal to {min}',
          this_field_must_be_less_than_or_equal: 'This field must be less than or equal to {max}',
          only_user_defined_mime_types_are_allowed: 'Only user-defined MIME types are allowed',
          only_expected_file_types_are_allowed: 'Only {expectedType} files are allowed',
          no_text_selected: 'No text selected',
          the_selected_text_is_already_annotated: 'The selected text is already annotated',
        },
      },
    },
    de: {
      translation: {
        english: 'Englisch',
        german: 'Deutsch',
        welcome: 'Willkommen!',
        total: 'Es gibt insgesamt {total} benutzer',
      },
      uibakery: {
        interactions: {
          ok: 'OK',
          cancel: 'Abbrechen',
          edit: 'Bearbeiten',
          save: 'Speichern',
          upload: 'Hochladen',
        },
        hints: {
          add_new_row: 'Neue Zeile hinzufügen',
          cancel_adding_row: 'Zeilenhinzufügen abbrechen',
          cancel_edit: 'Bearbeiten abbrechen',
          cancel_editing_row: 'Zeilenbearbeitung abbrechen',
          cancel_rows_edit: 'Zeilenbearbeitung abbrechen',
          cancel_row_addition: 'Zeilenhinzufügen abbrechen',
          confirm_and_save_added_row: 'Hinzufügen der Zeile bestätigen und speichern',
          confirm_and_save_edited_rows: 'Bearbeitete Zeilen bestätigen und speichern',
          confirm_and_save_row_edit: 'Zeilenbearbeitung bestätigen und speichern',
          delete_row: 'Zeile löschen',
          download_data_as: 'Daten als CSV herunterladen',
          edit_data: 'Daten bearbeiten',
          edit_multiple_rows: 'Mehrere Zeilen bearbeiten (Massenbearbeitung)',
          edit_row: 'Zeile bearbeiten',
          reload_data: 'Daten neu laden',
        },
        selection: {
          clear_selection: 'Auswahl aufheben',
          select_all: 'Alle auswählen',
          reset_all: 'Alle zurücksetzen',
          selected: 'Ausgewählte',
        },
        pagination: {
          items: 'Elemente',
          page: 'Seite',
          of: 'von',
          show_items: '{value} Elemente anzeigen',
        },
        messages: {
          no_data_to_display: 'Keine Daten zum Anzeigen',
          no_file_selected: 'Keine Datei ausgewählt',
          not_available: 'N/A',
        },
        validation: {
          this_field_is_required: 'Dieses Feld ist ein Pflichtfeld',
          enter_valid_email_address: 'Geben Sie eine gültige E-Mail-Adresse ein',
          please_match_requested_format: 'Bitte beachten Sie das gewünschte Format',
          enter_valid_url: 'Geben Sie eine gültige URL ein',
          color_is_not_valid: 'Farbe ist ungültig',
          invalid_json: 'Ungültiges JSON',
          date_must_be_on_or_after: 'Datum muss am oder nach {date} liegen',
          date_must_be_on_or_before: 'Das Datum muss am oder vor {date} liegen',
          some_of_uploaded_files_are_larger_than: 'Einige der hochgeladenen Dateien sind größer als {size} MB',
          uploaded_file_is_larger_than: 'Die hochgeladene Datei ist größer als {size} MB',
          invalid_date_format: 'Ungültiges Datum: "{value}". Das Datum sollte im Format "{dateFormat}" angegeben werden',
          this_field_must_contain_between_characters: 'Dieses Feld muss zwischen {min} und {max} Zeichen enthalten',
          this_field_must_contain_at_least_characters: 'Dieses Feld muss mindestens {min} Zeichen enthalten',
          this_field_must_be_less_than_or_equal_characters: 'Dieses Feld muss kleiner oder gleich {max} Zeichen sein',
          this_field_must_be_between: 'Dieses Feld muss zwischen {min} und {max} liegen',
          this_field_must_be_greater_than_or_equal: 'Dieses Feld muss größer oder gleich {min} sein',
          this_field_must_be_less_than_or_equal: 'Dieses Feld muss kleiner oder gleich {max} sein',
          only_user_defined_mime_types_are_allowed: 'Nur benutzerdefinierte MIME-Typen sind zulässig',
          only_expected_file_types_are_allowed: 'Nur {expectedType}-Dateien sind zulässig',
          no_text_selected: 'Kein Text ausgewählt',
          the_selected_text_is_already_annotated: 'Der ausgewählte Text ist bereits kommentiert',
        },
      },
    },
  },
});

For a Form, for example, you may also want to add translation for the Submit button. Simply add this field to the code above (e.g.: submit: 'Einreichen') and add {{i18n.t('submit')}} to the Submit button text's value in the Form settings.

1. Add a Select component to the working area and add the languages you need to the Options field, for example:

[
  {
    "value": "en",
    "title": {{i18n.t('english')}}
  },
  {
    "value": "de",
    "title": {{i18n.t('german')}}
  }
]

window.i18next.t is now i18n.t.

1. In the component's Value field, specify {{i18n.language}}.

2. Next, navigate to the Select component's Triggers section and create a new action for the On Change trigger.

3. Select the JavaScript Code step and specify the following code:

i18n.changeLanguage(data)

1. Finally, add translations anywhere you need to the text by using the i18n.t function. In our example here, we've added translation to the Heading component:

{{i18n.t('welcome')}}

Done! Now when you select a different language in the Select component, your app will be translated automatically.