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 AddingLocales 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.

Locale Handling

frevvo supports localization from the browser's locale setting. frevvo will recognize the browser locale and alter displays and input formats as well as language according to the user's setting. Setting this preference is browser-specific. Refer to the www.w3.org Internationalization website for information about language preferences and how to change those in a number of popular browsers. Here is an example using the Firefox browser:

To change your language preferences in the Firefox browser:

1. Click on the File menu, then select Options
   
   
2. Click the Content tab and then click the Choose button in the Language section.
   
3. Click on the dropdown arrow to select the preferred language from a long list of choices.
   
4. Click the Add button to add the selection to the list and then use the Move Up and Move Down buttons to modify the order of preference. Click OK to save your selections. 
   
   

Locale URL Parameter

You can override the browser locale with the special frevvo locale URL parameter. This is often very useful for testing your language-specific localizations. The locale parameter is of the form ISO_639_2_CODE | ISO_639_1_CODE [ _ISO_3166_1_CODE ]  - where:

• ISO 639-2 Code - The 3-letter ISO 639-2 languages code or ISO 639-1 Code - The 2-letter ISO 639-1 languages code. Either one or the other is required.
• ISO 3166-1 Code - The 2 letter ISO 3166 alpha 2 country code. This is Optional.

https://app.frevvo.com/frevvo/web/tn/frevvodocs/u/e1dd0efb-f368-4e60-937a-fe08849485d5/app/_2oWtYWSkEeu7yproembD1w/formtype/_nM_xMPU0EeuztqyQmKh8FQ/popupform?locale=spa

There is a built-in locale method in frevvo that you can use in a Business Rule. This method returns the locale from the browser URL.

Translating Your Form

You can easily localize any form by clicking Upload Translation in the form's Action Menu on the Forms & Workflows Home Page. This opens the Multi-Language Support home page for that form. The default locale is the original language you used in the form designer. Each new locale you create will appear on this page. In the example below this form was translated to Spanish.

The steps below describe the process of creating, testing, and using a Spanish locale translation for a form named Travel Request Form.

Download and Translate

1. Click the download  icon to download the default locale. Save the file named TravelRequestForm_default.properties to your disk
2. Rename this file to your locale language. Though this is not required it is helpful so you will later know which translation this file contains. In this example, we renamed the file to: TravelRequestForm_spanish.properties
3. Edit TravelRequestForm_spanish.properties in a simple editor like Wordpad on Windows

Here is an example locale properties translation file. This form contains several controls labeled in English. Also, you will always see the labels for the submit button and the save, load, and print icons. These can be localized too. In this example, only the field labels were translated.

# Default strings for formtype: Travel Request Form 
# Note that spaces in keys must be properly escaped with a '\' 
# Generated on: Wed Jul 15 21:49:45 EDT 2009
Buiness\ Purpose=Negocio Propósito 
Car\ class="Coche" Clase 
Departure\ Date=Salida Fecha 
Departure\ Time=Salida Tiempo 
EMail\ Address=Correo Electrónico 
Submit= 
load= 
print= 
save= 

You will see a line for every control label in your form, message control text (if Save Value is checked), hint, help, etc. in the format:

<Text String>=

Add translations for each text string to the right of the equal sign:

<Text String>=<Text String in Spanish>

For example:

First\ Name=Primero Nombre

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.

Save\ failed.\ Status=
Save\ successful=
Save\ this\ form=
Saving=
Section\ A=
Sign\ this\ section=
load=
save=

Text strings inside of controls, such as the Add Files text in the Upload control are also translated using these files. 

Translation Considerations

• 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.

  # 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.

• Translate the string "You can't leave this empty" to show an error message if data is not entered into a required field. See the Error Message property for more information.

Upload and Test

Upload your translation file.

1. Choose the locale from the dropdown. In this example we choose Spanish.

   1. On Premise customers - your frevvo system administrator can configure the list of available locales.

   2. Cloud customers - contact Support to request additions to the locale list.

2. Browse to your translation file - TravelRequestForm_spanish.properties.
3. Click the upload button. You will see the new locale appear in the list above, named Spanish::locale=spa
4. Click the Test  icon to view the form with your translation to this new language.

The important point to note is that the &locale=spa URL parameter is directing the frevvo server to translate your form into Spanish. The Test button and the Share button on the Locale Home Page add the locale URL parameter automatically. The Test & Share buttons on the Forms and Workflows Home Page do not set the locale URL parameter and thus revert to the browser's default locale.

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 ServerCustomization is done in the translation file located in the <frevvo-home>/tomcat/webapps/frevvo directory.  

Update a Translation

To update an existing locale translation, edit the downloaded .properties file and re-upload it choosing the same locale name from the Choose Locale dropdown. This will replace the existing translation with the new translation.

Use Translated Forms and Workflows

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 LocaleHandling 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.

Server Customization

frevvo On Premise supports the ability to customize runtime and design-time strings and add additional locales and RTL languages. Follow these steps to make any of these changes to your On Premise frevvo installation.

1. Stop frevvo.
2. Open the directory <frevvo-home>/tomcat/webapps/frevvo.
3. Copy the /WEB-INF/data directory to a temporary location.
4. Modify the files in /WEB-INF/data as described in the topics Adding Locales, Runtime Strings, and Design-Time Strings below. These files contain all of the strings that have been externalized as well as the list of supported locales and directions.
5. Replace the /WEB-INF/data directory with your modified version.
6. Re-start frevvo.

Adding Locales

To add new locale codes to the Choose Locale dropdown and add/change which locales are right to left languages, update these two properties files located in the <frevvo-home>/tomcat/webapps/frevvo/Web-INF/data/users directory.

•  /WEB-INF/data/users/locale.directions - add/remove locale codes to this file that need to be displayed in RTL format
•  /WEB-INF/data/users/locales.properties - add/remove locale codes here from the Choose Locale dropdown - when adding locales, ensure that strings are unique and conform to ISO 639-2 (three-character code) standards

Refer to the steps above under Server Customization for the instructions to replace the /WEB-INF/data directory.

Creating Runtime and Design-Time Translations

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:

1. Refer to steps 1 and 2 above under ServerCustomization.
2. 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.

3. 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'.  
   

   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.

4. 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)

5. 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

6. Edit the new language file and add your translations.
7. Refer back to steps 4 - 6 under ServerCustomization for the instructions to complete.

Here is a section of the chi (Chinese) translation file with translations for the palette controls in the designer. This file is included in the frevvo directory.

# Default strings in the frevvo UI
# Form designer
Text=他饿小他
TextArea=他饿小他啊人饿啊
Date=的啊他饿
Time=他没饿
Date/Time=的啊他饿／他没饿
EMail=饿没啊一了
Money=没哦年饿有
Phone=批和哦年饿
Quantity=去哦哦年他哦他有
Number=年哦没不饿人
BooleanCheckbox=他／发
Image=哦没啊个饿
Video=我哦的饿哦
Submit=是哦不没哦他
Cancel=才啊年才饿了
Dropdown=的人哦批的哦我年
Radio=人啊的哦批
Checkbox=才和饿才可不哦小
Section=是饿才他哦哦年
Repeat=人饿批饿啊他
Tabs=他啊不是
Tab=他啊不
Panel=批啊年饿了
Table=他啊不了饿
Col=才哦了
Message=没饿是是啊个饿
Link=了哦年可
Trigger=他人哦个个饿人
Upload=哦批了哦啊的

Setting the Firefox browser language to Chinese displays the designer palette controls as shown:

http://localhost:8082/frevvo/web/tn/(tn.id)/subject/(subject.id)/tasks?locale=spa

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 ServerCustomization:

frevvo.date.format="EEE, MMM d, ''yy"

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 Picker

The 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 ServerCustomization.

For example, Let's say you add the properties below to a Chinese translation file named zh:

frevvo.date.month.1=JaC
frevvo.date.month.2=FeC
frevvo.date.month.3=MaC
frevvo.date.month.4=ApC
frevvo.date.weekday.1=Mc
frevvo.date.weekday.2=Tc
frevvo.date.weekday.3=Wc
frevvo.date.weekday.4=Tc  

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.

International Characters for PDFs

You can add support for International characters for a form's Print view and submission PDFs by adding Unicode fonts with broad language support to the frevvo war file. Refer to this documentation for the details.

Internationalization of the Task List / Workflow Designer

The Task list and workflow designer are not fully translated - they will be completed in a future release.

Switch Form Language

Since the form language is dictated by the URL locale parameter, you can allow users to switch the form language on demand using a link control in your form. Take the form's Raw Share URL (no iframe), append the desired locale, and put it in a Link Control. On the Link Control properties, uncheck "New Window" so the existing browser tab will refresh. When the user clicks the link, the form will reload with the locale parameter in the URL and the form in the translated state. It is important to note that reloading the form in this way will erase any existing data entered. Consider using a business rule to prevent the user from filling out any data until they've selected a language.

In this simple example we have added two link controls:

• Spanish: <raw form url>?locale=spa
• Arabic: <raw form url>?locale=ar

We've also set the control to disabled by default and added a trigger named 'BeginForm'. When the trigger is clicked, the language links and the trigger itself become hidden, and the control becomes enabled.