Use Translation Strings in JavaScript Files

You can use translation strings in JavaScript files and retrieve the translated text from the bundle when the function is called.

When you use a text string in a JavaScript function, the text string can be externalized to a translation bundle. You can replace the code that produces or uses the untranslated string with code that uses the translations object to retrieve the translated string from the bundle. When you edit the JavaScript function you will need to either hard code the translation key in the code or pass the key into the function as a parameter. To use the translations object in the function, you need to pass the object into the function as a function parameter.

For example, you might have a UI component in your page that displays a text string that comes from a JavaScript function that is called by a callModuleFunction action in an action chain. In the action chain, you can pass the translations object (for example, $application.translations) to the function and then assign the result to a variable bound to the UI component that displays the string.

To display a translated string used in a JavaScript function:

Create a key for the string that you want translated and add the key and string to the translation bundle.

You can use the Make String Translatable button in the Properties pane to create the key in the bundle and generate the expression for the key. Alternatively, you can edit the translation file in the editor to create the key in the bundle and enter the expression for the translation string in the UI component’s Text field in the Properties pane.
Copy the expression containing the bundle name and key. The expression is displayed in the Text field of the component after the string is externalized.

The expression might look similar to [[ $application.translations.app.h1__text_041a ]]. In this example, app specifies the bundle name, and h1__text_041a is the key. The bundle and key are used to evaluate the translated string. $application.translations specifies that the application-scoped translations object is used. The translations object might also be $flow or $page scoped, depending on where the bundle is located.
Modify the JavaScript function so that the translations object $application.translations can be passed to the function from the action chain.

In the following example, the action for calling the function will use translations to pass the object to the function.
```
  PageModule.prototype.getMessageFromBundle = function(translations) {
    ...
  };
```
Edit the function to replace the untranslated text that should be displayed in the component with code that retrieves the translated text using the translations object. When the object is available in the function, the bundle name and key are used to retrieve the translated string from the bundle.

For example, the function can return a simple translated string:
```
  PageModule.prototype.getMessageFromBundle = function(translations) {
    ...
    return translations.app.h1__text_041a;
  };
```
You can also include parameters to generate a formatted message: translations.format('app', 'h1__text_041a', param1, param2)

Create an action chain that calls the function (callModuleFunctionAction) and assigns the result (assignVariablesAction) to a variable (in this example, Value).

In this example you can see that the translations object is a parameter of the callModuleFunction action that is passed to the function, and that assignVariables assigns the result of callModuleFunction to the page variable Value.

      "root": "callModuleFunction1",
      "actions": {
        "callModuleFunction1": {
          "module": "vb/action/builtin/callModuleFunctionAction",
          "parameters": {
            "module": "{{$page.functions}}",
            "functionName": "getMessageFromBundle",
            "params": [
              "{{ $application.translations }}"
            ]
          },
          "outcomes": {
            "success": "assignVariables1"
          }
        },
        "assignVariables1": {
          "module": "vb/action/builtin/assignVariablesAction",
          "parameters": {
            "$page.variables.Value": {
              "source": "{{ $chain.results.callModuleFunction1 }}"
            }
          }
        }
      }

Edit the Text field of the UI component to replace the generated expression with the page variable storing the result of the method. (Value).

Description of the illustration page-designer-translations-labelexample.png

Tip:
Use the Text field’s Select Variable menu to select the correct page variable