Download and Upload Translation Bundles

If you plan to translate your App UI into one or more languages, now is the time to send your translation resources for translation. VB Studio can provide your translation files in either the JSON or the industry standard XLIFF (XML Localization Interchange File Format) format.

To translate your App UI, download the translation bundles, translate the strings into the desired languages, and then update the locale for each translation file. You can choose to download the full set of translatable strings, or just download the strings you've added or changed since the last time you downloaded.

When you prepare your translation files for upload, save the translation files for each language in a separate folder using the locale code for the folder name. For example, if you translate the extensionBundle-i18n.json bundle into Icelandic, save it to a folder named is for the Icelandic locale code, like this:

is\extensionBundle-i18n.json

When you’re ready to upload your new files, add them to a zip file, taking care to use the same folder structure as the downloaded zip file. Suppose the downloaded zip included two translation bundles for your root locale, extensionBundle1 and extensionBundle2, with translation files for the Arabic and Korean languages. The structure will look like this:

.
.\extensionBundle1-i18n.json
.\extensionBundle2-i18n.json
.\ar
.\ar\extensionBundle1-i18n.json
.\ar\extensionBundle2-i18n.json
.\ko
.\ko\extensionBundle1-i18n.json
.\ko\extensionBundle2-i18n.json

If you translate each root translation file into German, you would create a folder (de) at the top-level of the zip and save the new translation files in this folder, like this:

.\de
.\de\extensionBundle1-i18n.json
.\de\extensionBundle2-i18n.json

Note:

The XLIFF files you download from VB Studio use the XLIFF file structure but include message strings in the ICU format. This is because XLIFF messages don’t support the full feature set provided by ICU.
  1. Open the Translations tab (Translations).
  2. Click the Upload or Download Translation Bundles icon (Upload or Download Translation Bundles icon) to open the Upload or Download Translation Bundles dialog box.

    Upload or Download Translation Bundle popup

  3. To download the complete set of translation strings, click the JSON or XLIFF download button under All Strings.
    To download only new or changed strings, use the buttons under New and Changed Strings instead.

    Visual Builder Studio downloads a zip file containing all the translation bundles for your extension, including those with overrides from any read-only bundles.

    Initially, your extension translation bundle will include only the default language JSON file, <bundleName>-i18n.json.

  4. Unzip the files to your desktop.
    After the files have been unzipped, you'll see the root bundles at the top level as well as separate folders for each language the bundles have been translated into.
  5. Create a new file for each language you want to support and translate the strings into that language:
    1. Open each translation file and translate the strings into the desired language.
      Here is a sample of a JSON file showing header details, such as bundle name, path, and locale. It also shows the first key-value pair for the Application Navigation Drawer.
      {
        "@@x-bundleName" : "extensionBundle",
        "@@x-bundlePath" : "extension/sources/translations/self/extensionBundle-i18n",
        "@@locale" : "en",
        "app_title_navigation_drawer" : "Application Navigation Drawer",
        "@app_title_navigation_drawer" : {
          "description" : "Title Application Navigation Drawer",
          "source_text" : "Application Navigation Drawer"
        },
    2. Modify the locale value of the file to include the two-letter language code for the translation language. For example, use fr for your French language file, de for your German file, and so on.
      The locale attribute for the French file should appear like this: "@@locale" : "fr",
    3. Create folders for each language using the locale code for the folder name. In this example, you would need a folder named fr for your French language translation file.
    4. Save your files to the appropriate folder.

      Your translation files should use this format for the file name:

      <bundleName>-i18n.json

      The relative path for a French language translation file using bundle name extensionBundle should look like this:

      fr\extensionBundle-i18n.json

  6. Add all new and updated folders and files to a zip file.

    When you create your zip file, it must have the same structure as the downloaded zip file, with the root bundles at the top level and each translation file in a separate language folder underneath.

  7. Open the Upload or Download Translation Bundles popup and drag the updated zip file to the Drag and Drop area.
    You'll see a notification about the number of new and updated bundles that you have just uploaded.