Localization of user interface elements

Last update: November 3, 2023

CREATED FOR:

  • Developer
  • User

Certain content that the Flyout Viewer displays is subject to localization. This content includes user interface element tool tips and information messages that are displayed by the flyout zoom view on load.

Every textual content in the viewer that can be localized is represented by a special Viewer SDK identifier called SYMBOL. Any SYMBOL has a default-associated text value for the English locale ( "en") supplied with the out-of-the-box viewer. It may also have user-defined values set for as many locales as needed.

When the viewer starts, it checks the current locale to see if there is a user-defined value for each supported SYMBOL for the locale. If there is, it uses the user-defined value; otherwise, it falls back to the out-of-the-box default text.

User-defined localization data can be passed to the viewer as a localization JSON object. Such object contains the list of supported locales, SYMBOL text values for each locale, and the default locale.

An example of such a localization object is the following:

{
"en":{
"FlyoutZoomView.TIP_BUBBLE_OVER":"Mouse over to zoom",
"FlyoutZoomView.TIP_BUBBLE_TAP":"Tap and hold to zoom"
 },
 "fr":{
"FlyoutZoomView.TIP_BUBBLE_OVER":"Passez la souris sur pour zoomer",
"FlyoutZoomView.TIP_BUBBLE_TAP":"Appuyez et maintenez pour agrandir"
},
defaultLocale:"en"
}

In the above example, the localization object defines two locales ( "en" and "fr") and provides localization for two user interface elements in each locale.

The web page code should pass the localization object to the viewer constructor, as a value of the localizedTexts field of the configuration object. An alternative option is to pass the localization object by calling the setLocalizedTexts(localizationInfo) method.

The following SYMBOLs are supported:

SYMBOLDescription
Container.LABELARIA label for top-level viewer element.
FlyoutZoomView.ROLE_DESCRIPTIONARIA role description for main view component.
FlyoutZoomView.USAGE_HINTARIA usage hints for keyboard users.
FlyoutZoomView.TIP_BUBBLE_OVERInformation message for desktop systems.
FlyoutZoomView.TIP_BUBBLE_TAPInformation message for touch devices.
ScrollLeftButton.TOOLTIPTooltip for scroll left button.
ScrollRightButton.TOOLTIPTooltip for scroll right button.
ScrollUpButton.TOOLTIPTooltip for scroll up button.
ScrollDownButton.TOOLTIPTooltip for scroll down button.

Experience Manager