Studio Developer Manual / Version 2506.0
Table Of ContentsWorkflow localization follows the same approach as content type localization described in Section 9.5.1, “Localizing Types and Fields”. Localizations are added or modified using a registry. Just as for content type localization, icons are provided in terms of SVG icons, so the same prerequisites as described previously hold.
One particular aspect to take care of here is how to localize the resource bundle properties that are used
for the workflow names and states. For the Content App, an ExtJs-based mechanism takes care
of loading just the required locale-version ("en", "de", "ja") of the resource bundle.
As the Workflow App is a React-based application, resource bundle properties localization
requires a small additional effort. As the example below shows, an additional "de" or "ja" locale has to be
registered via registerLocale() and useLocalizer() has to be used to localize the
resource bundle properties.
The following code example shows an excerpt of the localization of the Global Link translation workflow.
import GccWorkflowLocalization_properties from "./GccWorkflowLocalization_properties";
import gccIcon from "./icons/global-link-workflow_24.svg";
import { workflowLocalizationRegistry }
from "@coremedia/studio-client.workflow-plugin-models";
import { getLocalizer, registerLocale } from "@coremedia/studio-client.i18n-models";
registerLocale(GccWorkflowLocalization_properties, "de", async () => {
await import("./GccWorkflowLocalization_de_properties");
});
const getGccProcessLocalization = async (): Promise<WorkflowLocalization> => {
const localize = await getLocalizer(GccWorkflowLocalization_properties);
return {
displayName: localize("TranslationGlobalLink_displayName"),
description: localize("TranslationGlobalLink_description"),
svgIcon: gccIcon,
states: {
Translate:
localize("TranslationGlobalLink_state_Translate_displayName"),
DownloadTranslation:
localize("TranslationGlobalLink_state_DownloadTranslation_displayName"),
ReviewDeliveredTranslation:
localize("TranslationGlobalLink_state_ReviewDeliveredTranslation_displayName"),
ReviewCancelledTranslation:
localize("TranslationGlobalLink_state_ReviewCancelledTranslation_displayName"),
...
},
tasks: {
Prepare:
localize("TranslationGlobalLink_task_Prepare_displayName"),
AutoMerge:
localize("TranslationGlobalLink_task_AutoMerge_displayName"),
SendTranslationRequest:
localize("TranslationGlobalLink_task_SendTranslationRequest_displayName"),
...
},
};
}
getGccProcessLocalization().then((gccProcessLocalization) => {
workflowLocalizationRegistry._.addLocalization("TranslationGlobalLink", gccProcessLocalization);
});
const getGccIssuesLocalization = async (): Promise<WorkflowIssuesLocalization> => {
const localize = await getLocalizer(GccWorkflowLocalization_properties);
return {
dateLiesInPast_globalLinkDueDate:
localize("dateLiesInPast_globalLinkDueDate_text"),
dateInvalid_globalLinkDueDate:
localize("dateInvalid_globalLinkDueDate_text"),
...
}
}
getGccIssuesLocalization().then((gccIssuesLocalization) => {
workflowLocalizationRegistry._.addIssuesLocalization(gccIssuesLocalization);
});
Example 9.113. Workflow localization example
Display name, description and icon are defined for the workflow. As described earlier in Section 9.27.2, “Workflow Steps”, tasks and state are distinguished. Consequently, they are localized separately. Note that each task and state can also be localized with a separate display name and description instead of just with a string.
The example also shows that issues are localized with the workflowLocalizationRegistry as well.
