UI Bakery Docs
RoadmapRelease notesSign In
  • 👋Welcome to UI Bakery!
  • 🌟Overview
    • 💡Video intro
    • ✨Main features
    • 🔖Glossary
  • 🛠️Getting started
    • Create an application
    • Build UI
      • Data mocking methods
    • Link components
    • Connect a data source
    • Load data
    • Bind data to UI
    • Transform data with JavaScript
      • Data mapping & transforming
    • Change component data
    • Send a form
    • Create a filter
    • Note on debugging
    • Deploy your application & invite users
  • 📌Concepts
    • Components
      • Component basics
      • Component methods
      • Components best practices
        • Input validation
        • Linking a Table to a Form/Detail
        • Using a single Form to add and update data
        • Searching Table based on input value
        • Configuring server-side pagination
        • Managing Date object time zones
        • Role-based Menu component items
        • Field types & types recognition
          • Select/Tag field: Utilizing Tag mapper
        • Expanding component to fit screen/container
        • Controlling component's visibility
    • Custom components
      • Unrestricted custom components
    • Data sources
      • Data source environments
      • Connecting local database via ngrok
      • SSH Tunneling
    • Actions
      • Actions basics
        • Calling actions from code
      • Actions management & shortcuts
      • Actions settings
      • Actions library
      • Server actions
      • Logs and debugging
    • UI Bakery variables
    • State variables
    • Local storage
    • Modules
    • Custom JavaScript
      • JavaScript files
    • Workspace management
      • Account & workspace
      • Seats & Shared permission groups in UI Bakery
      • Roles in UI Bakery
      • Role permissions
      • Explore the interface
      • App environments
        • Release management
      • Audit logs
      • Multi-factor authentication
    • Export & import an app
    • Mobile layout
    • Theme editor
      • Changing theme from the app
    • UI Bakery source control
      • Git controls overview
      • Migrating your app model to the latest version
  • ⚡How-tos
    • File management
      • Working with PDF files
      • CSV import & export
      • Uploading files using methods
      • Displaying files from Google Drive and Dropbox
      • Parsing and sending XML
    • Styling
      • Modifying components with CSS
    • Layout & navigation
      • Adding navigation to application
      • Reading query params from URL
      • Hiding UI Bakery loader in the Embedded mode
    • Data
      • Managing user data with the {{user.email}} variable
      • Using JS libraries
        • Internationalization (i18n) & Localization: Translating UI Bakery Apps
      • Implementing row-level security
      • Copying to clipboard
    • Custom code
      • Communicating with external sites via Iframe
      • Implementing custom app hotkeys
      • Retrying API with HTTP status code 202
  • 🔎Extras
    • UI Bakery Automations
      • Environment and release strategy
      • Git in automations
      • Using external Node libraries
    • UI Bakery Database
      • Database migration
  • 💻On-premise
    • UI Bakery on-premise
    • Install & update
      • Installing on-premise
        • Azure virtual machine
        • Azure container instance
        • AWS EC2 instance
        • Google Cloud Compute Engine VM instance
        • DigitalOcean 1-click droplet
        • Manual w/ docker compose
        • Manual w/ docker run
        • Windows installation
        • Kubernetes
          • AWS EKS with Fargate
          • Scaling and resource optimization
      • Troubleshooting installation errors
      • Updating on-premise
      • Updating license key
      • Updating environment variables
      • Recommendations
        • Architecture overview
        • UI Bakery in production
        • Resource optimization
        • Running a standalone database instance
        • Generating custom secrets
    • On-premise features
      • External analytics
      • Branding
      • Embedding
      • SCIM 2.0
      • Instance API
      • Activating features under a feature flag
    • Additional configurations
      • Health check API
      • Email configuration
      • Google Sheets connection setup
      • Salesforce connection setup
      • Azure blob storage configuration
      • Adding python backend code to existing installation
      • UI Bakery Postgres
    • Networking & security
      • Setting up a domain name
      • Configuring custom certificate authority
      • Custom base URL
      • Getting requests to the local network
      • Setting up SSL on Ubuntu
    • SSO
      • OpenID
        • Google OAuth2
        • Okta ODIC
        • Azure AD OAuth2
        • Token refresh
      • SAML
        • Okta SAML
        • Azure AD SAML
      • Role synchronization
      • Multiple SSO
      • Logout redirect
      • Troubleshooting
    • Git source control
      • Manage multi-instance deployment
      • Custom PR URL
      • Automate GitHub releases
      • Automate GitLab releases
      • Automate Bitbucket releases
    • Environment variables
  • 📚Reference
    • Data security measures
    • Improving app security
    • ✨AI Assistant
    • List of Components
      • Azure Blob Storage file uploader
      • Accordion
      • Alert
      • Avatar
      • Boolean
      • Breadcrumbs
      • Bubble map
      • Button
      • Card
      • Chart
      • Chat
      • Checkbox
      • Collapsible card
      • Color picker
      • Composite form
      • Container
      • Context menu button
      • Currency
      • Currency input
      • Date picker
      • Date & time
      • Date & time picker
      • Detail
      • Divider
      • Email input
      • Embedded App
      • File
      • File dropzone
      • File picker
      • Flex container
      • Form
      • Frame drawer
      • Grid view
      • Heading
      • Horizontal menu
      • Icon
      • iFrame
      • Image
      • Image picker
      • JSON editor
      • JSON viewer
      • Link
      • List view
      • Map
      • Menu
      • Metric
      • Modal
      • Multi-select
      • Number
      • Number input
      • Password input
      • PDF viewer
      • Percent
      • Pop-up form
      • Progress bar
      • QR code
      • Radio
      • Range slider
      • Rating
      • Reusable header
      • Reusable sidebar
      • Select
      • Signature
      • Slider
      • Steps
      • Stepper
      • S3 file uploader
      • Table
        • Conditional formatting based on cell value
        • Display name instead of ID for relation
        • Row context referencing
        • Select multiple table rows
        • How to Highlight Text in a Table Using mark.js
      • Tabs
      • Tabset
      • Tags
      • Text
      • Text annotate
      • Text input
      • Time picker
      • Toggle
      • Tree component
      • Video
      • Dynamic structure properties
      • Card (deprecated)
      • Input (deprecated)
    • Upgrading components
    • List of Data sources
      • Airtable
      • AWS API
      • AWS Athena
      • AWS DynamoDB
      • AWS Lambda
      • AWS Redshift
      • AWS S3
        • S3 compatible endpoints (DigitalOcean spaces)
      • Azure Blob Storage
      • Big Query
      • Databricks
      • Exasol
      • Firestore, Firebase Auth & Realtime DB
        • Firebase authentication
        • Managing database data
        • Firebase client-side SDK
        • Firebase libraries
      • GitHub
      • Google Sheets
      • GraphQL
      • HTTP API
        • API Authentication
      • HubSpot
      • JDBC
      • MariaDB
      • MongoDB
      • MySQL
      • OpenAI
      • OpenAPI
      • Oracle
      • PostgreSQL
      • Presto
      • Redis
      • Salesforce
      • SAP Hana
      • SendGrid
      • Slack
      • SMTP
      • Snowflake
      • Spanner
      • SSH
      • Stripe
      • SQL Server
      • Supabase
      • Twilio
      • UI Bakery AI
    • List of Action steps
      • AI Action
      • Azure Blob Storage Query
      • Bulk Create Rows
      • Bulk Delete Rows
      • Condition
      • Create Row
      • Delete Row
      • DynamoDB Request
      • Execute Action
      • Firebase Query
      • Generate File
      • GraphQL Query
      • HTTP Request
      • Interval
      • JavaScript Code
      • Load Table
      • Load Row
      • Loop Action
      • MongoDB Command
      • Navigate
      • Open API Request
      • Python Backend Code
      • Redis Command
      • Save to Local Storage
      • Save to State
      • Show Notification
      • Slack messages
      • SMTP Request
      • SSH Command
      • SQL Query
        • Writing SQL Queries
      • S3 Query
      • Update Row
    • Troubleshooting techniques
    • Performance optimization
Powered by GitBook

© 2025 UI Bakery

On this page

Was this helpful?

Export as PDF
  1. How-tos
  2. Data
  3. Using JS libraries

Internationalization (i18n) & Localization: Translating UI Bakery Apps

PreviousUsing JS librariesNextImplementing row-level security

Last updated 5 days ago

Was this helpful?

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.

⚡
👇