Internationalisation

FormKrafter sépare deux choses que la plupart des bibliothèques confondent : le contenu d’un formulaire (écrit par celui qui l’a construit) et le chrome du builder (l’UI que vos utilisateurs manipulent). Ils sont localisés indépendamment, et aucun des deux ne renifle jamais la langue du navigateur — l’hôte décide, la bibliothèque suit.

Couche 1 — le contenu du formulaire

Tout libellé, placeholder, message ou liste d’options d’un spec peut être une simple chaîne ou un objet indexé par locale :

Un libellé localisé

{ "label": { "en": "Full name", "fr": "Nom complet" } }

Passez locale au renderer pour le résoudre :

React

<FkFormRender spec={spec} locale="fr" />

Vue

<FkFormRender :spec="spec" locale="fr" />

Web Components

document.querySelector('fk-form-render').locale = 'fr'

Dans le builder, passez locales pour obtenir un sélecteur de langue d’édition — les champs du panneau lisent et écrivent alors la langue sélectionnée :

<FkFormBuilder locales={['en', 'fr']} />

Astuce

Les messages de validation se résolvent par le même mécanisme : { "message": { "en": "Required", "fr": "Obligatoire" } } fonctionne donc exactement comme un libellé. Voir validation.

Couche 2 — le chrome du builder

La palette, le panneau de propriétés, les boutons et les noms de bricks représentent environ 90 clés de traduction. L’anglais est intégré et le français est livré dans le package :

Avant de monter le builder

import { setFkTranslations, frFkTranslations } from '@streamline-pulse/formkrafter-wc'

setFkTranslations(frFkTranslations)

Pour toute autre langue, passez votre propre dictionnaire — il est fusionné par-dessus l’anglais intégré, donc une traduction partielle est valide :

setFkTranslations({
  'palette.search': 'Bausteine suchen…',
  'panel.validation': 'Validierung',
})

Attention

Ne remontez pas les composants pour changer de langue — cela efface le formulaire en cours de saisie ou de construction. Appelez setFkTranslations d’abord, puis changez la prop locale : le renderer re-résout ses libellés et le builder re-rend sa toolbar, sa palette et son panneau en place.

Choisir une locale

Comme rien n’est automatique, le choix vous revient explicitement — un segment d’URL, une préférence utilisateur, un cookie. Un branchement typique :

La locale vient de la route

import { setFkTranslations, frFkTranslations } from '@streamline-pulse/formkrafter-wc'

const locale = useRouteLocale()            // votre routeur, votre règle
if (locale === 'fr') setFkTranslations(frFkTranslations)

return <FkFormRender spec={spec} locale={locale} />

Étapes suivantes

ValidationComment les messages de validation localisés se superposent aux messages par défaut.

ThemingL'autre moitié du white-labeling du builder pour vos utilisateurs.

Specs de formulaireOù vit le texte localisé dans les configs d'une brick.