Localize Digital Customer Service for Multilingual Support

This topic describes how to localize Digital Customer Service for multilingual support.

How You Create Localized Digital Customer Service Applications

You can create localized versions of your application by translating the UI text and messages in your application into other languages. The localized strings are displayed in the application during runtime. When you run the staged or published application, a localized version is displayed based on the language settings of your browser.

A Digital Customer Service application created using the Reference Implementation template includes translations to the 25 languages supported by Oracle Fusion Service. While the Reference Implementation template is delivered with these translation strings and files, any modifications that you apply to the strings in your Digital Customer Service application will require additional translation.

The supported default language locales are as follows: ar, cs, da, de, es, fi, fr-CA, fr, hu, it, iw, ja, ko, nl, no, nl, pt-BR, ro, ru, sk, sv, th, tr, zh-CN, zh-TW.

The resource bundles provide an initial set of translated strings for the majority of the application that you can use for your own translation files. To populate the rest of the translation files for the languages you want to support, follow the instructions for generating files for new languages, and then use the existing translated files to obtain translations for use in your new file.

The Digital Customer Service Reference Implementation template comes with a single, application specific bundle. If you create strings, you must add the translations to the bundle, or create bundles.

For comprehensive information about adding translated text to your application, refer to the Work with Translations topic in the Develop Applications chapter of the Developing Applications with Oracle Visual Builder guide in the Related Topic.

Configure Languages Available in your Digital Customer Service Application

By default, the preferred language specified in the viewing browser is used to display your Digital Customer Service application to users. In the Digital Customer Service Reference Implementation template, a languages menu can be configured to list the specific languages that you want to make available to your users, should they want to use another language.

To configure the languages available to your Digital Customer Service application users:

Sign in to Oracle Visual Builder.
Open your Digital Customer Service application.
Click Web Applications .
In the Web Apps tree, expand dcs.
Click the Variables tab.
Select localeList from the Constants section.
Copy the language that you want to include in the languages menu from the Description.
For example, if you want to make Italian available, copy the following string: { code: "it", name: "Italiano"}
Add it to the default value ensuring that the JSON is correctly formatted, commas between entries in the array and no trailing comma after the last entry.
Click the Run icon to view the change in your application.
Click the Globe icon (Languages) to verify that the language that you added appears in the list of available languages.

Set a Non-English Default Language

By default the starting language for your application is English, if you want to change this there you must modify variable values. Use the list of supported locales outlined earlier in this topic for the correct format. For this exercise, we'll use Spanish as an example:

In the index.html page, do the following: locate the following entry:
1. Locate the following entry: <html lang="en">
2. Change the entry to: <html lang="es"> .
3. Now, locate the var lang entry: var lang =window.localStorage.getItem('odcs-reference-implementation.locale') || navigator.language;
4. Change the entry to: var lang = window.localStorage.getItem('odcs-reference-implementation.locale') || "es";
Now, in the app-flow.json file, and do the following:
1. Locate the entry to:"{{ window.localStorage.getItem('odcs-reference-implementation.locale') || navigator.language }}"
2. Change that entry to: "locale": "{{ window.localStorage.getItem('odcs-reference-implementation.locale') || 'es' }}"
The default language is now Spanish. Use these examples and substitute your locale code as needed.

Create Translations for New Languages

You can introduce a new language beyond the ones delivered with a Digital Customer Service application that was created using the Reference Implementation.

For more information, refer to the Work with Translations topic in the Developing Applications with Oracle Visual Builder in the Related Topics.

To introduce a new language beyond the ones delivered with a Digital Customer Service application that was created using the Reference Implementation, follow these steps:

Sign in to Oracle Visual Builder.
Open your Digital Customer Service application.
Click the Menu icon in the editor, and select Settings.

The Settings tab appears.
Click the Translations secondary tab.
Download the latest language bundle by clicking the ARB or XLIFF download link in the Download all strings section.

A zip file is downloaded.
Open your zip file.
Extract the app-strings file.
Rename the app-strings file to app-strings-<locale>.arb or app-strings-<locale>.xliff, depending on the downloaded file type. Where <locale> is the language locale.

For example, for a file containing Welsh translations, the modified file name should be: app-strings-cy.arb or app-strings-cy.xliff.

Open your app-strings-<locale> file in a text editor. The first few lines of the file will resemble the following:

{
  "@@x-bundleName" : "app",
  "@@x-bundlePath" : "webApps/dcs/resources/strings/app/nls/app-strings",
  "common_save" : "Save",
  "@common_save" : {
    "description" : "Used by components that perform a saving operation.",
    "source_text" : "Save"
  },
  "common_cancel" : "Cancel",
  "@common_cancel" : {
    "description" : "Used by components that cancel the current operation.",
    "source_text" : "Cancel"
  },
  "common_done" : "Done",
  "@common_done" : {
    "description" : "Used by components that finish an operation causing no changes.",
    "source_text" : "Done"
  },
  "common_download" : "Download",
  "@common_download" : {
    "description" : "Used by components that require a download label.",
    "source_text" : "Download"

Replace the English strings with the translation for the language you are creating. Consider the following Cancel string:
```
  },
  "common_cancel" : "Cancel",
  "@common_cancel" : {
    "description" : "Used by components that cancel the current operation.",
    "source_text" : "Cancel"
  },
```
You would want to replace the string after the "common_cancel": " with the translated language equivalent. In this example, you would want to replace the string Cancel with the Welsh equivalent for Cancel, which is Canslo. The modified text will look similar to the following:
```
  },
  "common_cancel" : "Canslo",
  "@common_cancel" : {
    "description" : "Used by components that cancel the current operation.",
    "source_text" : "Cancel",
     },
```
Repeat step 10 for all the strings in the language that you are creating.
Save your app-strings-<locale> file.
Add the app-strings-<locale> file to the zip file that you downloaded in step 5, and save the updated zip file.
Click the Menu icon in the editor, and select Settings.

The Settings tab appears.
Click the Translations secondary tab.
Upload the zip file that you saved in step 13, containing your new app-strings-<locale> file to the Uploaded updated bundle section.

The language is added to the bundle.

Add New String Translations for Existing Languages

You can translate additional strings after modifying strings in your Digital Customer Service application generated from the Reference Implementation template.

For more information, refer to the Work with Translations topic in the Developing Applications with Oracle Visual Builder in the Related Topics.

To add new string translations for existing languages:

Sign in to Oracle Visual Builder.
Open your Digital Customer Service application.
Click the Menu icon in the editor, and select Settings.

The Settings tab appears.
Click the Translations secondary tab.
Download the latest language bundle by clicking the ARB or XLIFF download link in the Download new and changed strings section.

A zip file is downloaded.
Open your zip file.
Extract the app-strings file.
Rename the app-strings file to app-strings-<locale>.arb or app-strings-<locale>.xliff, depending on the downloaded file type. Where <locale> is the language locale.

x

For example, for a file containing French translations, the modified file name should be: app-strings-fr.arb or app-strings-fr.xliff.
Open your app-strings-<locale> file in a text editor.
Replace the English strings with the translation for the language you are updating. Consider the following Submit Now string:
```
   },
  "common_submit_now" : "Submit Now",
  "@common_submit_now" : {
    "description" : "Used to submit data entered in a form immediately.",
    "source_text" : "Submit Now",
  },
```
You would want to replace the string after the "common_submit_now": " with the translated language equivalent. In this example, you would want to replace the string Submit Now with the French equivalent for Submit Now, which is Soumettre Maintenant. The modified text will look similar to the following:
```
  },
  "common_submit_now" : "Soumettre Maintenant",
  "@common_submit_now" : {
    "description" : "Used to submit data entered in a form immediately.",
    "source_text" : "Submit Now",
  },
```
Repeat step 10 for all the strings in the language that you are creating.
Save your app-strings-<locale> file.
Add the app-strings-<locale> file to the zip file that you downloaded in step 5, and save the updated zip file.
Click the Menu icon in the editor, and select Settings.

The Settings tab appears.
Click the Translations secondary tab.
Upload the zip file that you saved in step 13, containing your new app-strings-<locale> file to the Uploaded updated bundle section.

The language bundle is updated with the new string translations for the existing language.