Internationalization (i18n)
This article is outdated and it may contain information that is no longer up-to-date. It will be re-written soon!
AdminJS has the default set of texts prepared in English language. But nothing stands in a way for you to change each of them or even translate AdminJS to a different language.
So in order to define how a
new
action is named, simply override it's translation:const options = {
locale: {
translations: {
actions: {
new: 'Let\'s create',
}
}
}
}
const adminJs = new AdminJS(options)
...
but also you can override the name of a
new
action only for a specific resource:const options = {
locale: {
translations: {
actions: {
new: 'New',
},
resources: {
Article: {
actions: {
new: 'New Article'
}
}
}
}
}
}
All the translation keys are divided into the following groups:
- buttons - translations for all kinds of buttons.
- messages - translations for all messages in the app
- labels - translations for all labels - usually one word. Labels are used to translate resource names.
- properties - translations for all properties.
All of them can be specified globally, or for a specific resource.
Let's assume that you want to translate your admin panel to polish.
This is how it could look like:
Take a closer look at this example because it contains a different edge cases like translating theadd new item
button for a particular property, or translating labels for your database enums.
const options = {
locale: {
language: 'pl',
translations: {
actions: {
new: 'Stwórz nowy',
edit: 'Edytuj',
show: 'Detale',
...,
},
buttons: {
save: 'zapisz',
// We use i18next with its pluralization logic.
confirmRemovalMany_1: 'Potwierdź usunięcie {{count}} rekordu',
confirmRemovalMany_2: 'Potwierdź usunięcie {{count}} rekordów',
...
},
properties: {
// labels of properties in all resources with name "name"
// will be translated to "Nazwa".
name: 'Nazwa',
nested: 'Zagniezdzone',
// this is how nested properties (for nested schemas) can be provided
'nested.width': 'Szerokość',
// translate values of boolean property
'isAdmin.true': 'admin',
'isAdmin.false': 'normalny'
// translate values of enums:
'companySize.small': 'mała',
'companySize.medium': 'średnia',
'companySize.big': 'duza',
// tags is an array and we translate button for this array:
'tags.addNewItem': 'Dodaj nowy tag',
},
labels: {
// here we translate the name of a resource.
Comment: 'Komentarze',
},
resources: {
Comment: {
properties: {
// this will override the name only for Comment resource.
name: 'Tytuł'
}
}
}
}
}
}
In the case when you use i18next in your app already, you need to initialize AdminJS in your i18next init callback. In this way AdminJS will add new translations to existing ones:
const loadAdminJS = () => {
const { adminJs, adminRouter } = admin()
app.use(adminJs.options.rootPath, adminMiddleware, adminRouter)
app.use('/admin', adminMiddleware, adminController)
}
i18next.init({...}, (err, t) => {
loadAdminJS()
})
Action#before and Action#after hooks come with an Action#ActionContext param. It combines all the TranslateFunctions like
translateButton
, translateLabel
etc.so you can use them like this:
// before Hook
{
after: async (response, request, context) => {
const { translateMessage } = context
...
}
}
On the backend, we use https://www.i18next.com/ library. So make sure to check out their docs to read more about all the possible options.