How to Use Localization in Retool Apps

1// Transformer: translations
2// Returns a static lookup object — no dependencies, evaluates once
3// Transformers are read-only: cannot trigger queries or setValue()
4
5return {
6  en: {
7    welcomeHeading: 'Welcome to the Dashboard',
8    customerSection: 'Customer Management',
9    newCustomer: 'New Customer',
10    saveButton: 'Save',
11    cancelButton: 'Cancel',
12    confirmDelete: 'Are you sure you want to delete this record?',
13    searchPlaceholder: 'Search by name or email...',
14    noResults: 'No results found',
15    loadingMessage: 'Loading...',
16  },
17  es: {
18    welcomeHeading: 'Bienvenido al Panel',
19    customerSection: 'Gestión de Clientes',
20    newCustomer: 'Nuevo Cliente',
21    saveButton: 'Guardar',
22    cancelButton: 'Cancelar',
23    confirmDelete: '¿Estás seguro de que quieres eliminar este registro?',
24    searchPlaceholder: 'Buscar por nombre o correo...',
25    noResults: 'No se encontraron resultados',
26    loadingMessage: 'Cargando...',
27  },
28  fr: {
29    welcomeHeading: 'Bienvenue sur le Tableau de Bord',
30    customerSection: 'Gestion des Clients',
31    newCustomer: 'Nouveau Client',
32    saveButton: 'Enregistrer',
33    cancelButton: 'Annuler',
34    confirmDelete: 'Êtes-vous sûr de vouloir supprimer cet enregistrement ?',
35    searchPlaceholder: 'Rechercher par nom ou email...',
36    noResults: 'Aucun résultat trouvé',
37    loadingMessage: 'Chargement...',
38  },
39};

1// Temporary State: locale
2// Default value: 'en'
3// Type: String
4
5// Usage in component text:
6{{ translations.value[locale.value].welcomeHeading }}
7
8// Fallback to English if locale key not found:
9{{ translations.value[locale.value]?.welcomeHeading || translations.value.en.welcomeHeading }}
10
11// Read current locale anywhere:
12{{ locale.value }}
13// Returns: 'en' | 'es' | 'fr' etc.

1// languageSelect static options:
2// Label: English    Value: en
3// Label: Español    Value: es
4// Label: Français   Value: fr
5// Label: Deutsch    Value: de
6
7// Default Value: {{ locale.value }}
8
9// JS Query: switchLocale
10// Trigger: languageSelect Change event
11const selectedLocale = languageSelect.value;
12if (selectedLocale && translations.value[selectedLocale]) {
13  await locale.setValue(selectedLocale);
14} else {
15  console.warn(`Locale '${selectedLocale}' not found in translations`);
16  await locale.setValue('en'); // fallback
17}

1// Text component Value:
2{{ translations.value[locale.value].welcomeHeading }}
3
4// Button Label:
5{{ translations.value[locale.value].saveButton }}
6
7// Text Input Placeholder:
8{{ translations.value[locale.value].searchPlaceholder }}
9
10// Confirmation text with variable interpolation:
11{{ translations.value[locale.value].confirmDelete.replace('{name}', table1.selectedRow.data.full_name) }}
12
13// Safe access with English fallback:
14{{ translations.value[locale.value]?.noResults ?? translations.value.en.noResults }}

1// Number formatting — currency:
2{{ new Intl.NumberFormat(locale.value, {
3  style: 'currency',
4  currency: locale.value === 'en' ? 'USD' : locale.value === 'es' ? 'EUR' : 'EUR'
5}).format(amount) }}
6
7// Date formatting:
8{{ new Intl.DateTimeFormat(locale.value, {
9  year: 'numeric', month: 'long', day: 'numeric'
10}).format(new Date(datePicker1.value)) }}
11
12// Examples:
13// locale = 'en': March 25, 2026
14// locale = 'fr': 25 mars 2026
15// locale = 'de': 25. März 2026
16
17// Relative time (last seen):
18{{ new Intl.RelativeTimeFormat(locale.value, { numeric: 'auto' })
19  .format(-2, 'day') }}
20// en: '2 days ago'  fr: 'il y a 2 jours'