Associate a Translation Key with a UI Component

When you add a UI component to your App UI, you’ll want to associate a translatable string with it so that the component's text property displays in the correct language once your App UI is deployed.

You can use the Properties pane to bind an existing string to your UI component. Or, if the string you want has not been saved to a translation bundle, you can add it to your extension's translation bundle here. When you add a new string, a key is generated automatically, but you can specify your own key in the dialog box, if desired.

Translatable strings can be static values or expressions in ICU format. If you want to use an expression in your string, refer to Use an Expression in a Translatable String.

To associate a translation key to a UI component's text property:

1. Select the component on the canvas that you want to associate with the translatable string.
2. Hover over a text field in the Properties pane to display the globe icon () above the field. The field could be any text-type field such as text, label, label hint, or placeholder.
3. Click the globe icon () for the text field to open the Translatable String popup.
   
   

   

   
   
4. To use an existing string, choose Use Existing, type the translation key or string in the search box, then select it from the list.

   The popup displays the translation bundle, key, and string.

   
   

   

   
   
5. Click Use to associate the component with this string.
   A JavaScript function call, such as [[$translations.extensionBundle.siteCity()]], replaces the text value in the Properties pane.
6. If you can't find an existing string for your component, create a new one instead.
   1. Choose Create New.
      
      

      

      
      

      The String field displays the text value for the new translatable string key. By default, this is the text value of the component. The Key field displays a unique system-generated key for a new translatable string.

      The popup also contains a Description field that you can use to provide a description of the context for the string. The description text is included as metadata in the translation bundle.

   2. To create an expression or ICU message, click the String Editor icon () to open the String Editor and create your expression. See Use an Expression in a Translatable String.
   3. If desired, replace the system-generated identifier for the key or select a different translation bundle to save it to.
   4. Click Save.
   A JavaScript function call, such as [[$translations.extensionBundle.input_text_label_hint()]], replaces the text value in the Text field.

If you just created a new translation key and want to add metadata, open the translation bundle and set custom or placeholder metadata for the new key. See Create Translation Keys for the steps.

If your string includes an expression, VB Studio uses default values for the expression's parameters. You'll need to use the Expression Editor to replace any variables in the expression with variables defined in the App UI. See Use an Expression in a Translatable String.