Studio Developer Manual / 9.4 Localizing Labels

Studio Developer Manual / Version 2401

9.4 Localizing Labels

Many labels besides content types and property names can also be localized. Typical cases are labels or button texts, error messages or window titles. The localized texts are stored in property files. To use these property values, classes are generated by the TypeScript compiler following the singleton pattern. Property classes can be adapted as described in Section 5.6, “Localization”, typically overriding the existing value with values from a new customizing property class.

CKEditor: Note that in contrast to this, the Richtext Editing component based on CKEditor requires a different approach for localization. For details have a look at Section 10.3.2, “Localizing CKEditor 5”.

Predefined property classes of CoreMedia Studio

The following classes are some of the predefined property classes defining labels and messages used throughout CoreMedia Studio.

Actions_properties
DeviceTypes_properties
Editor_properties
EditorErrors_properties
Publisher_properties
Validators_properties
ContentTypes_properties
ContentActions_properties

See the TypeScript documentation for a list of defined properties.

Predefined property files of Blueprint Studio

The module @coremedia-blueprint/studio-client.main.blueprint-forms contains several property files with localization entries. These files are used to localize several features of Studio, for example tab titles, content type names or validator messages.

You can simply change the value of any of the properties as needed. While you can also add new properties to these files when building extensions of CoreMedia Studio, it is preferable to put new localization keys into new property files.

Adding a new resource bundle

If you want to add a new property file which contains your own localization keys, proceed as follows:

Create a directory corresponding to the desired location of your resource bundle, for example <ModuleName>/src/bundle/.
Create new properties files following the naming schema: <PropertyFileName>_properties and <PropertyFileName>_de_properties.
Add one or more keys and values in the form shown in the example below.
Optionally, add the same key to each locale-specific properties file, using an appropriate translation.
Import the resource bundle in other Typescript files like importing any other class.
Address the resource bundle and key in the text attribute of the component where you want to use the label: BundleName_properties.KEY_NAME. You will get code completion in a properly configured IDE for the keys of your resource bundle.

Example: Adding a Search Button

In order to introduce a new localized button to the favorites toolbar you could add the following component to the file BlueprintFormsStudioPlugin.ts for the component FavoritesToolbar.

import Config from "@jangaroo/runtime/Config";
import Component from "@jangaroo/ext-ts/Component";
import AddItemsPlugin from "@coremedia/studio-client.ext.ui-components/plugins/AddItemsPlugin";
import ShowCollectionViewAction from "@coremedia/studio-client.main.editor-components/sdk/actions/ShowCollectionViewAction";
import BlueprintStudio_properties from "@coremedia-blueprint/studio-client.main.blueprint-forms/BlueprintStudio_properties";
import EditorMainNavigationToolbar from "@coremedia/studio-client.main.editor-components/sdk/desktop/maintoolbar/EditorMainNavigationToolbar.ts"

//...
Config(Component, {
  plugins: [
    Config(AddItemsPlugin, {
      items: [
        Config(EditorMainNavigationToolbar, {
          baseAction: Config(ShowCollectionViewAction, {
            published: false,
            editedByMe: true,
            contentType: "CMArticle",
            text: BlueprintStudio_properties.doc_example_txt,
          }),
        }),
      ],
      after: [
        Config(Component, { itemId: EditorMainNavigationToolbar.NEW_MENU_BUTTON_ITEM_ID }),
      ],
    }),
  ]
});

Example 9.13. Adding a search button

The attribute text of the ShowCollectionView Element defines the text to be displayed in the Studio web application.

In order to have the label you want, you need to add it to the properties file. The BlueprintStudio_properties file starts like this after adding a string for the label:

interface BlueprintStudio_properties {
  //...
  doc_example_txt: string;
  //...
}

const BlueprintStudio_properties: BlueprintStudio_properties = {
  //...
  doc_example_txt: "My Example Button",
  //...
};

Example 9.14. Example property file

Override Standard Studio Labels

It is also possible to override the standard Studio labels, like so:

Create a property file with all labels you want to override, for example CustomLabels_properties and CustomLabels_de_properties.
Search for the key of the property that should be changed. All the keys are documented in the TypeScript API, such as Action_withdraw_tooltip in the resource bundle class Actions_properties.
In your CustomLabels bundle, set the new value for the key.
In the configuration section of your Studio plugin, override the Actions_properties bundle with the following code:

import resourceManager from "@jangaroo/runtime/l10n/resourceManager";
import CopyResourceBundleProperties from "@coremedia/studio-client.main.editor-components/configuration/CopyResourceBundleProperties";
import Actions_properties from "@coremedia/studio-client.main.editor-components/sdk/Actions_properties";
import CustomLabels_properties from "@coremedia-blueprint/studio-client.main.ec-studio/CustomLabels_properties";

//...

//override the standard studio labels with custom properties
new CopyResourceBundleProperties({
    destination: resourceManager.getResourceBundle(null, Actions_properties),
    source: resourceManager.getResourceBundle(null, CustomLabels_properties),
})

Example 9.15. Overriding properties

This can be done with every property of Studio. Examples for this can also be found in the BlueprintFormsStudioPlugin.

Search Results

Table Of Contents

Filter