Multi-Language: Translate Web Interfaces for End Users

1. End-User Multi-Language​

Softyflow multi-language lets a single web interface be displayed in several languages to end users. It is configured per web interface, from Web Modeler → Script Editor → Multilingual panel.

Softyflow supports 15 languages:

2. Configuring Interface Languages​

Open your interface in the Web Modeler, then click Script Editor. In the Script Editor sidebar, click Multilingual (the "translate" icon).

Three settings are available:

• Default Language — the fallback language of the interface (used when no other language applies). Stored as config.language.
• Languages — the list of languages enabled for this interface (config.languageOptions). The default language is automatically added to this list on save.
• Translate — CSV export / import of the translation table (see section 4).

3. Translating the Interface (Translation Table)​

The translation table is a JSON array editable in the Monaco editor of the Multilingual panel. Each row represents a text to translate and contains:

• id_ — a generated technical identifier (e.g. input1_name, input1_placeholder, btn_submit_buttonName).
• Default language (xx) — the value in the default language. This value is the dictionary key used for translation at runtime.
• One column per enabled language (fr, en, de…) containing the translation.

At runtime, each widget label is passed through the SF_translate Vue filter, which looks up the default value in the dictionary and replaces it with the translation for the active language. If no translation exists, the default value is shown as-is.

4. CSV (Excel) Export / Import​

To translate offline (e.g. in Excel), use the CSV flow in the Multilingual panel.

• Download translate file? — downloads a translate.csv file with one row per text to translate.
• Upload CSV — re-imports the edited CSV back into the translation table.

The CSV is semicolon-separated, with the following header:

id_;Default language(fr);en;de;es;...

Example content:

id_;Default language(fr);en;de
input1_name;Nom;Name;Name
input1_placeholder;Entrez votre nom;Enter your name;Geben Sie Ihren Namen ein
btn_submit_buttonName;Soumettre;Submit;Absenden

5. Supported Translation Elements​

On CSV export, Softyflow walks the widget tree and automatically collects the following texts. Each text becomes a row in the CSV with a determined identifier (id_).

Supported (auto-exported)​

Not supported (NOT auto-exported)​

• Custom list option labels — not in the interface CSV. They are translated separately, per option, via label_xx fields (Multilingual popover or the custom-list CSV). At runtime: item['label_'+lang] || item.label.
• Navigation menu titles — not in the interface CSV. They are translated per menu item via menu[].languages (Menu builder "Title translation" dialog). At runtime: el.languages[lang] || el.title.
• Action / script strings — toasts, confirmations, and error messages written in the Script Editor are not collected. Use the HTML widget SF_translate pattern, or the built-in dictionary keys where applicable.
• Plain HTML text without SF_translate — text typed directly in an HTML widget is not exported; only strings wrapped with | SF_translate are.
• Validation messages — only the built-in required key interpolates data.label; custom validation messages are not collected.
• Image alt text, file names, URLs, favicon — not translatable.

6. Integrating Custom Translatable Strings (HTML Widget + SF_translate)​

To make a custom text (beyond the auto-collected fields) detectable and exported in the CSV, use the Vue SF_translate filter inside an HTML widget. This is the only way to add custom translatable strings.

Two syntaxes are supported:

<!-- 1. Text content (Vue interpolation) -->
{{ 'My custom text' | SF_translate }}

<!-- 2. Attribute / prop binding -->
<el-input :placeholder="'My custom text' | SF_translate" />

On CSV export, Softyflow scans the HTML widget content, detects these SF_translate markers, and adds one row per string (id <text>_html_<widget id>).

7. Translating Custom List Labels​

Custom list options are translated individually via label_xx fields (one column per language). Open the configuration of the widget bound to the custom list (or the list from the Custom Lists collection), then click the Multilingual icon on an option to open the translation popover.

You can also import / export the options via a comma-separated CSV (PapaParse). The expected header is:

label,value,colorLight,colorDark,label_en,label_fr,label_de,label_it,label_es,label_pt,label_ar,label_nl,label_svSE,label_nbNO,label_hu,label_pl,label_ja,label_zhCN,label_zhTW

At runtime, the Select / Radio / Checkbox / Table widgets display item['label_'+lang] || item.label.

8. Translating Navigation Menu Titles​

Navigation menu items are not part of the interface translation table — they are translated per menu item, from the Menu builder. Each menu entry has a languages map (one value per language code); at runtime the header renders el.languages[lang] || el.title.

To translate a menu title:

1. Open the menu attached to the interface (or the standalone Menu resource) in the Menu builder.
2. On the menu row, click the Title translation icon (the notebook/translate button in the Actions column).
3. In the Title translation dialog, fill in one field per language, then save.

9. Runtime Behavior​

Language resolution order​

When an interface is opened, the active language is determined in this order:

1. The URL parameter ?SF_lg=<code> if it is among the enabled languages (languageOptions).
2. Otherwise, the connected user's language (user.lg) if it is among the enabled languages.
3. Otherwise, the interface default language (config.language).

The language switcher​

When the user switches language via the header flag:

• Logged-in user — the lg preference is saved via PATCH /api/v1/profil, then the page reloads with ?SF_lg=<code>.
• Anonymous user — the page simply reloads with ?SF_lg=<code>.

Same interface in two languages​

10. Reference & Supported Languages​

The 15 supported language codes: en, fr, de, it, es, pt, ar, nl, svSE, nbNO, hu, pl, ja, zhCN, zhTW.