Localizing an application

How to localize SynergiWeb using the culture specified on the user

Localizing strings while developing

Translating in JavaScript is as simple as using the getLocalizedString method in the appframe-core package.

A basic example:

import { getLocalizedString } from "@olenbetong/appframe-core";

export function ComponentWithLocalizedString() {
  return <div>{getLocalizedString("Please translate this text")}</div>;
}

You can also use localize if you want to translate strings with dynamic content.

Formatting dates and numbers using the users culture

It is recommended to use the Intl browsers API's to format dates and numbers. Pass the users culture as the first argument to make sure they get their preferred format (af.userSession.culture)

// Note that creating a formatter is a relatively expensive operation,
// and should be done outside of React components
let formatter = new Intl.DateTimeFormat(af.userSession.culture, {
    year: "numeric",
    month: "short",
    date: "numeric"
});

function FormattedDate({ date }: { date: Date }) {
    return <time>{formatter.format(date)}</time>
}

Translations in Synergi

When you open the application in SynergiWeb, any string run through localize or getLocalizedString will be added to the application base strings if they are not alread there.

Translate any unlocalized strings in the Manage Translations project in SynergiWin. When you are done translating, you have to to clear the localized string cache (/api/debug/cache) before the strings are translated in the application.