Localization

• 1 minute to read

Localization allows your customers to interact with interfaces in their native languages, making it easier for them to navigate and understand the features of your integration.

To ensure that your customers can effectively use your application in their native language, the Handy Editor can switch the default language and replace the default translations to provide a fully localized experience.

Changing a language

When creating an editor instance, you can pass the following localization object to change the localization settings. In the config of this workflow element, you can specify the language of the user interface.

{
    ...
    localization: {
        language: "en"
    }
}

At the moment, the Handy Editor provides only English (en) and Russian (ru) localizations.

Overriding text

Using the localization.data object, you can override predefined text in either the workflow file or your integration code as follows:

{
    ...
    localization: {
        language: "en", // The current language for the application.
        data: {
            "en": { // The language code for which overrides are provided.
                "assetLibrary.panel.footerLabel": "New footer label" // Overrides the label.
            }
        }
    }
    ...
}

You can find the predefined localization files on the CDN and use them to get a list of all string labels available for translation.

https://staticjs-aurigma.azureedge.net/libs/us/workflow-elements/handy-editor/assets/translations/en.json

Adding new languages

In the localization object, you can also define additional languages if needed. For example, you can retrieve the key list from the en.json file and translate the first five labels into Spanish as shown below:

{
    ...
    localization: {
        language: "es",
        data: {
            "es": {
                "designViewer.contextMenu.cutLabel": "Cortar",
                "designViewer.contextMenu.copyLabel": "Copiar",
                "designViewer.contextMenu.pasteLabel": "Pegar",
                "designViewer.contextMenu.deleteLabel": "Eliminar",
                "designViewer.contextMenu.duplicateLabel": "Duplicar",
                ...
            }
        }
    },
    ...
}

Changing localization at runtime

To change the localization language while the editor is running, you can call the update() method on the web component again with a partial configuration:

handyEditor.update({
    "localization": { "language": "es" }
});