Multilangue

1. Le multilangue côté utilisateur final​

Le multilangue Softyflow permet à une même interface web d'être affichée dans plusieurs langues pour l'utilisateur final. Il se configure au niveau de chaque interface web, depuis le Modeleur Web → Script Editor → panneau Multilingual.

Softyflow supporte 15 langues :

2. Configurer les langues d'une interface​

Ouvrez votre interface dans le Modeleur Web, puis cliquez sur Script Editor. Dans la barre latérale du Script Editor, cliquez sur Multilingual (icône « translate »).

Trois réglages sont disponibles :

• Default Language : langue par défaut de l'interface (utilisée si aucune autre langue n'est applicable). Stockée dans config.language.
• Languages : liste des langues activées pour cette interface (config.languageOptions). La langue par défaut est automatiquement ajoutée à cette liste lors de l'enregistrement.
• Translate : export / import CSV de la table de traduction (voir section 4).

3. Traduire l'interface (table de traduction)​

La table de traduction est un tableau JSON éditable dans l'éditeur Monaco du panneau Multilingual. Chaque ligne représente un texte à traduire et contient :

• id_ : identifiant technique généré (par ex. input1_name, input1_placeholder, btn_submit_buttonName).
• Default language (xx) : la valeur dans la langue par défaut. Cette valeur sert de clé de dictionnaire pour la traduction à l'exécution.
• Une colonne par langue activée (fr, en, de…) contenant la traduction.

À l'exécution, chaque libellé de widget est passé au filtre Vue SF_translate, qui recherche la valeur par défaut dans le dictionnaire et la remplace par la traduction correspondant à la langue active. Si aucune traduction n'existe, la valeur par défaut est affichée telle quelle.

4. Export / Import CSV (Excel)​

Pour traduire hors ligne (par ex. dans Excel), utilisez le flux CSV du panneau Multilingual.

• Download translate file? : télécharge un fichier translate.csv contenant une ligne par texte à traduire.
• Upload CSV : réimporte le fichier CSV modifié vers la table de traduction.

Le CSV est séparé par des points-virgules (;), avec l'en-tête suivant :

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

Exemple de contenu :

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. Éléments pris en charge par la traduction​

Lors de l'export CSV, Softyflow parcourt l'arbre des widgets et collecte automatiquement les textes suivants. Chaque texte devient une ligne du CSV avec un identifiant (id_) déterminé.

Éléments supportés (exportés automatiquement)​

Éléments non supportés (non exportés automatiquement)​

• Libellés des options de listes personnalisées — ils ne figurent pas dans le CSV de l'interface. Ils se traduisent séparément, par option, via les champs label_xx (popover Multilingue ou CSV de la liste personnalisée). À l'exécution : item['label_'+langue] || item.label.
• Titres du menu de navigation — ils ne figurent pas dans le CSV de l'interface. Ils se traduisent par élément de menu via menu[].languages (boîte de dialogue « Title translation » du Menu builder). À l'exécution : el.languages[langue] || el.title.
• Chaînes des actions / scripts — les toasts, confirmations et messages d'erreur écrits dans le Script Editor ne sont pas collectés. Utilisez le mécanisme SF_translate du widget HTML, ou les clés du dictionnaire système le cas échéant.
• Texte HTML brut sans SF_translate — le texte tapé directement dans un widget HTML n'est pas exporté ; seules les chaînes encapsulées avec | SF_translate le sont.
• Messages de validation — seule la clé système required interpole data.label ; les messages de validation personnalisés ne sont pas collectés.
• Textes alternatifs d'images, noms de fichiers, URLs, favicon — non traduisibles.

6. Intégrer des textes personnalisés traduisibles (widget HTML + SF_translate)​

Pour qu'un texte personnalisé (au-delà des champs collectés automatiquement) soit détecté et exporté dans le CSV, utilisez le filtre Vue SF_translate à l'intérieur d'un widget HTML. C'est le seul moyen d'ajouter des chaînes traduisibles personnalisées.

Deux syntaxes sont supportées :

<!-- 1. Contenu texte (interpolation Vue) -->
{{ 'Mon texte personnalisé' | SF_translate }}

<!-- 2. Liaison d'attribut / prop -->
<el-input :placeholder="'Mon texte personnalisé' | SF_translate" />

À l'export CSV, Softyflow scanne le contenu HTML du widget, détecte ces marqueurs SF_translate et ajoute une ligne par chaîne (identifiant <texte>_html_<id du widget>).

7. Traduire les libellés des listes personnalisées​

Les options d'une liste personnalisée se traduisent individuellement via les champs label_xx (une colonne par langue). Ouvrez la configuration du widget lié à la liste personnalisée (ou la liste depuis la collection Custom Lists), puis cliquez sur l'icône Multilingue d'une option pour ouvrir le popover de traduction.

Vous pouvez également importer / exporter les options via un CSV séparé par des virgules (PapaParse). L'en-tête attendu est :

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

À l'exécution, les widgets Select / Radio / Checkbox / Table affichent item['label_'+langue] || item.label.

8. Traduire les titres du menu de navigation​

Les éléments du menu de navigation ne font pas partie de la table de traduction de l'interface — ils se traduisent par élément de menu, depuis le Menu builder. Chaque entrée de menu possède une map languages (une valeur par code de langue) ; à l'exécution, l'en-tête affiche el.languages[langue] || el.title.

Pour traduire un titre de menu :

1. Ouvrez le menu rattaché à l'interface (ou la ressource Menu autonome) dans le Menu builder.
2. Sur la ligne du menu, cliquez sur l'icône Title translation (le bouton « traduire » dans la colonne Actions).
3. Dans la boîte de dialogue Title translation, renseignez un champ par langue, puis enregistrez.

9. Comportement à l'exécution​

Ordre de résolution de la langue​

À l'ouverture d'une interface, la langue active est déterminée dans cet ordre :

1. Le paramètre d'URL ?SF_lg=<code> s'il fait partie des langues activées (languageOptions).
2. Sinon, la langue de l'utilisateur connecté (user.lg) si elle fait partie des langues activées.
3. Sinon, la langue par défaut de l'interface (config.language).

Le sélecteur de langue​

Lorsque l'utilisateur change de langue via le drapeau dans l'en-tête :

• Utilisateur connecté : la préférence lg est enregistrée via PATCH /api/v1/profil, puis la page est rechargée avec ?SF_lg=<code>.
• Utilisateur anonyme : la page est simplement rechargée avec ?SF_lg=<code>.

Même interface dans deux langues​

10. Récapitulatif & langues supportées​

Les 15 codes de langue supportés : en, fr, de, it, es, pt, ar, nl, svSE, nbNO, hu, pl, ja, zhCN, zhTW.