Use Squidex to manage translations for your web application

Most of the applications now a days need/have to support multiple languages, especially in Europe, where languages are only spoken by relatively few people. It is easy to build your own translation management tool with Squidex and in this article I will tell you how.

Our Requirements

Let’s talk about our requirements first:

1. We want to group translations by feature section or page and also have some shared translations, therefore we want a group field with values like common, home, checkout, products.
2. Each translation needs a key, that can not be changed once it has been created.
3. Each translation item has a content field, which the texts in different languages.
4. English is our main language, therefore the content is required.
5. German is our second important market, therefore we want to have all translations in german as well.
6. French is nice to have, because we just entered this market.

Implementation Part 1: Languages

Let’s have a look to our language configuration first:

Languages

English is our master language, German is just selected as a default language and French is marked as optional. This means that even if we mark a field as required, it will not have any effect in that language.

Implementation Part 2: The Schema

Let’s have a look at our schema.

Our schema

1. The group field is a drop down field with predefined values and is required.
2. The key is a required input field.
3. The translations field is a required input field and has set to “inline editable”.

But what is about the name field?

Implementation Part 3: Calculate the name

In our list of translations I would like to have 2 columns only. One column should represent the group and name and the other column the translation. Therefore I introduced the name field, which is filled by a script.

Autocalculate the name field.

Read more about scripts at: https://medium.com/squidex/updates-from-squidex-e3e6550d8cd1

Implementation Part 4: Ensure that group and key are not changed.

To ensure that the group and key fields are not changed, we can write another script. We just reject the update when the group or key has passed to the API and is different to the current state (aka oldData).

Reject updates when key or group has been changed.

Done: Add translations

That’s it, we can easily manage translations now with Squidex. Here is how it will look like.

Translations with inline editing