| Table of Contents |
|---|
Overview
The internationalization feature enables you to easily localize your forms for target audiences that vary in culture, region, and language. frevvo supports all ISO 639-2 languages worldwide including RTL (right-to-left) languages. The list of available languages and locale codes can be 1507407366 Adding Locales in your instance of frevvo (On Premise only). Translations use UTF-8 encoding by default, but you may also upload ISO 8859-1 (Unicode) strings.
...
| Info |
|---|
|
You may find some strings in the default properties file that are not applicable to your form. Here are a few example strings that are only applicable if you're using the save/load feature or Electronic Signatures.
...
Some browsers have problems with apostrophe characters. To ensure that your translations are ok on all browsers you should use the HTML escape character in place of the apostrophe. Refer to this additional information describing HTML Reserved Characters.
Code Block # If this does not work in your browser: Initializing\ form=l'initialisation de la forme # Instead use the html apostrophe escape sequence like this Initializing\ form=l'initialisation de la forme
- Check the 'Save Value' property for Message controls that you will want to translate.
- Messages formatted in HTML that contain newline characters in the text may not translate properly. For Example, the Text "Trip Itinerary <br/> Please Complete" in a message control to label the Trip Itinerary section of the Travel Request form will appear on the screen to have a new line in it. New Lines are ignored by HTML. Do not use newlines in forms that require localization.
Use English alphabet characters only when naming controls. For example, controls named with ó as in Póliza may cause issues when the control is used in a business rule and with submission data.
- The frevvo Preview and Test functions display in the default locale. This is as designed. Go to the Multi-Language Support (Upload Translation) page to test the use mode form in the target locale/language.
- Be careful when internationalizing markup. Do not assume that the string property name is valid markup. For Example: Let's say you had a field called FirstName in your form with this styling applied to the label: <span style="color:red;font-weight:bold;">FirstName</span>. The default strings properties file shows the property name as: <span\ style"color:red;font-weight:bold;">FirstName</span>. It is missing the '=' after style. This is intentionally stripped out because otherwise if it was left in, the = would be interpreted as the end of the property name. Adding <span style="color:red;font-weight:bold;">Primero Nombre</span> to the right side of the "=" sign, in this case, will translate this label successfully. If you see the error message " Failed to generate PDF snapshot: Could not generate PDF", or if the PDF prints with the HTML code instead of the expected formatted text, check the markup in your translation files.
- Buttons in the frevvo UI, such as "Set" in the Visual Rule Builder or "Log In" in the Form/Workflow Settings Document Action tab, may not resize to fit translated text that has more characters than the original text. In this scenario, consider using a different label or abbreviating to ensure the text fits neatly.
...
Translations use UTF-8 encoding by default but you may also upload ISO 8859-1 (Unicode) strings. If you are using Unicode, check the ISO checkbox above the upload button.
Error message strings that the designer adds to a form using the error message property are translated using these uploaded translation files. The translation of frevvo 1507407366Server Customization is done in the translation file located in the <frevvo-home>/tomcat/webapps/frevvo directory.
| Note |
|---|
| You can only specify one translation per language. For example, if a browser locale is set to ger (German) or de-at (German/Austria), your form will be translated using the one german translation you uploaded. If you click the test button you'll see the URL with &locale=ger and you'll see your form translated to your german strings. And if you manually change the URL to &locale=de_at you will still see your german strings. frevvo falls back to the single german translation file. |
...
frevvo will recognize the browser locale and alter displays and input formats as well as language according to the user's browser setting. Refer to browser 1507407366 Locale Handling for the details. You can override the browser's locale setting via the form's locale URL parameter which is typically only done for testing your translations. For example to render the form in Spanish rather than the default browser locale, add &locale=spa to the form Url. The Test button and the
Share button on the Locale Home Page do that for you automatically. The Test & Share buttons on the Forms and Workflows Home Page do not set the locale parameter and thus use the browser's default locale setting.
...
Runtime strings such as those found when a user logs in to access their task list, the login page, access denied messages, etc and Design-time strings such as those found in the palette controls, wizards, built-in error messages, etc. are localized in the default file in the WEB-INF/data/locale directory.
Follow these steps:
- Refer to steps 1 and 2 above under 1507407366 Server Customization.
- Find the file named "default" located in /WEB-INF/data/locales. This file contains all of the runtime and designer strings that have been externalized. Notice there are partially completed Chinese and German sample translation files provided in this directory as well.
Copy the file "default" to a new file named using the ISO 639-2 three-character or the ISO 639-1 two-character language codes. For example, the German translation file can be called 'ger' or 'de', for English, you can use 'eng' or 'en'. The Portuguese translation file can be named 'por' or 'pt' and the Chinese translation file can be 'chi' or 'zh'.
Tip Translation files can also be named to specify a country code. In this case, you must name the file using this format: <language code>_<country code>. For Example, let's say the Firefox browser is set for de-at (German/Austria). The translation file in the frevvo Web_INF/data/locales directory MUST be named de_AT. The de represents the german language, followed by the underscore followed by a capitol AT which is the country code for Austria. These file names are case-sensitive.
There are several files for specific areas of the application. The names of these files indicate the area for which the file contains externalized text strings:
form-designer-properties
flow-designer-properties
flow-designer-step-properties
rule-builder (includes javascript rule validation hints)
frevvo-ui (currently covers the template install dialog)
Pre-pended the locale onto the file. For example for french, "form-designer-properties" becomes "fr-form-designer-properties". All 6 files are required for each locale in order for this to work properly. For example for french (fr), you must place the following files into WEB-INF/data/locales, even if not all of them are translated:
fr
fr-form-designer-properties
fr-flow-designer-properties
fr-flow-designer-step-properties
fr-rule-builder
fr-frevvo-ui
- Edit the new language file and add your translations.
- Refer back to steps 4 - 6 under 1507407366 Server Customization for the instructions to complete.
...
frevvo will detect the language setting of the browser and search for a corresponding ISO named translation file in the WEB-INF/data/locale directory. If a translation file exists, the designer and server-wide runtime strings display with the translations specified in this file. If the translation file does not exist, the designer and server-wide runtime strings display in English - the language of the default translation file. If a locale-specific file does not contain a particular property or string, then the English translation in the default file is used.
When you first examine the locale directory, you will notice a sample translation file named ger (German). Let's say you copy/modify the default translation file to make a second file for German named with the ISO 639-1 two-character code - de. Then you create/modify another German translation file and name it de_AT for German/Austria.
Select German/Austria (de-at) as the language in the Firefox browser and log in to frevvo as a designer user. The designer displays the translations from the de_AT file. If the de_AT translation file was not present in the WEB-INF/data/locale directory, the designer and server-wide runtime strings display the translations specified in the ger (German) file. If the ger file was not present in the locale directory, the translations in the default file (English) would be used.
To display the designer and server-wide runtime strings using the translations from the de (German) file, you would have to change the language in the browser to German (de).
ISO 8559-1 Unicode Characters
There are two options for the runtime and design-time translation strings.
- UTF-8 encoded language files named with ISO language codes without any extension. Examples would be spa, ger, de, es, de_AT, etc.
- Unicode versions use the same name but with an extension of .unicode. For example, the French unicode language file would be named fre.unicode. This file must contain the unicode equivalent for any international characters that cannot be properly represented in the UTF-8 language file. Here are some examples.
For example, let's say you are translating the designer to French (fr) and the French word for the Upload control is télécharger.
- Follow the steps above to copy the default properties language file to make the fre.unicode file.
- Provide the translations.
- To properly represent the é, you must provide its unicode equivalent. You can use a tool such as native2ascii, which is included in the JDK, to convert the international characters to their unicode equivalents. Be sure to save the file with UTF-8 encoding before running the conversion.
- Or you can manually encode international characters by replacing it with \uxxxx where the xxxx is the 4 digit hex value for the unicode character.
- Refer back to steps 4 - 6 under 1507407366Server Customization for the instructions to complete.
Here is what the Upload control looks like in the designer if the entry in the fre.unicode file for the French word for video contains the unicode equivalent for the é (\u00e9). The language of the browser is set to French.
| Unicode File with Unicode Equivalent | Upload Control in Palette |
|---|---|
| Upload=t\u00e9l\u00e9charger |
|
.PNG?version=1&modificationDate=1717437262691&cacheVersion=1&api=v2&width=250){kind=spacer}
The UTF-8 and unicode files for a language must reside in the <frevvo-home>/tomcat/webapps/locale directory. You can mix the two different file types with regards to different languages. For a particular language/locale, the system will try to load the UTF-8 version first.
Testing Runtime and Design-Time Translations
Runtime Translations:
To test that your Runtime string translations show up as expected, for example on your Task list, follow these steps.
- Get the share URL to your task list.
- In another browser window/tab, paste the URL and append "&locale=yyy" where yyy is the target language code and the name of the target language file that was added to the WEB-INF file.
| Code Block |
|---|
http://localhost:8082/frevvo/web/tn/(tn.id)/subject/(subject.id)/tasks?locale=spa |
If you append &locale=spa to the task list as a test as discussed above you will notice that frevvo' surrounding page content is visible (as expected) and is not localized. This is correct and expected behavior. You are expected to embed the task list in your own localized website.
Design Time Translations:
Test that your designer translations show up as expected by:
- Set your browser to the target language.
- Login to the frevvo as a designer user.
- Edit a form to verify the designer strings are translated to the language specified by the language file that was added to the war file. An example is shown in the Chinese translation example above.
Date and Time Controls
| Excerpt | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Date, Time, and Date/Time controls are locale-aware for both parsing and format. When the Automatic format is selected, both date and time entry and display formatting will be locale-specific. The designer has the option to set a particular date or time format independent of the locale by using the date format or time format property, but this is not recommended because it is not responsive to user locale. Here is an image of Date/Time controls with the browser language set for German and the Date/Time controls set for Automatic. Notice the date format is DD.MM.YYYY and the time format is HH:MM:
Changing the Firefox browser language setting to Lithuanian displays the dates and times using the format YYYY-MM-DD and HH:MM respectively:
The automatic locale-specific formatting and parsing for date, time, and date/time controls can be configured by manually adding the following properties in the locale properties file:
For example, let's say you want to change the MM.DD.YYYY to display as "Day of the week, Month Day, year" in the German locale. Simply add the following to the ger locale file located in the WEB-INF/data/locale directory as explained above:
After replacing the /WEB-INF/data directory file with the updated one, the date will display as shown in the Firefox browser set for the German locale:
Date PickerThe Date picker will be automatically translated according to the browser locale. You can override the browser setting by adding the properties shown below to the locale file. This localization only applies to the date picker on the desktop as the native date picker will be shown on mobile devices. You can translate (locale-specific) month names and abbreviated day of week names (two characters). The days of the week will always be shown as Sunday through Saturday, left to right on the date picker. Only the Gregorian calendar system is supported. To localize the date picker on the desktop, manually add the following properties in the appropriate locale properties file in the WEB-INF/data/locale directory as explained 1507407366 Server Customization.
For example, Let's say you add the properties below to a Chinese translation file named zh:
After replacing the modified /WEB-INF/data directory file, restarting frevvo and setting the Firefox browser to Chinese - zh, the date picker will display as shown in the image:
Notice the month is displayed as JaC and the days of the week show Mc, Tc, Wc and Tc for Sunday - Wednesday as specified by the format properties we added to the locale file. Thursday, Friday, and Saturday display in Chinese - the language setting of the browser in this example. Entries for the Today and Close buttons on the Date Picker are already included in the default locale file so all you need to do is add your translations for them in the locale file you are going to use. Internationalization of Date Picker for iOS.The locale of the date picker on the safari browser changes with the iPhone/iPad's "Region Format" settings, not the language settings. After setting the language in iOS, set the appropriate country/region format in the iPhone general settings. Navigate these settings to change the Country/Region Format on iOS devices: General>International>Region Format: Select the Appropriate Country. |
...