Automatic Language Translation

ExtraView can be configured to translate a text area field (or similar type of field) from one language to another. This configuration can be fully automated, or may be driven by a button or other control on an add or edit screen. The feature utilizes the Google Ajax Language API. At the time of writing, this API supports translations between 50 languages.

The feature has been implemented in a configurable way within ExtraView so that the administrator can tailor its implementation to the work flow needed. This page shows a typical implementation, but with a little work in JavaScript, this feature may be used in a whole variety of different ways. The example shows how to translate a text area field from English to French automatically when the field containing the English text is modified.

The ExtraView behavior setting named ENABLE_GOOGLE_LANGUAGE_API must be set to a value of YES to enable the feature. This provides the infrastructure within the add and edit screens to support the translations. Note that all users must have Internet access to reach the Google server to use this feature.

For this example, we are assuming that we will enter or modify text in the DESCRIPTION field, and place the translated results into a field named TRANSLATE_RESULTS. The logic is controlled by two JavaScript functions placed in the UserJavaScript.js file. Follow these steps to configure:

  • Turn the behavior setting named ENABLE_GOOGLE_LANGUAGE_API to YES
  • We have a function in the UserJavaScript.js file named ev_translate. The default looks like this:

    function ev_translate(from_lang, to_lang) {
  try {
    var d = document.editForm;
    google.language.translate(d.p_description.value, from_lang, to_lang, function(result) 
      {var regex = new RegExp("'", "gi");
        d.p_translate_result.value = result.translation.replace(regex ,"'");})
  } catch (err) {
    // just ignore
  }
}

    This function may be modified, for example to alter the names of the fields being referenced or to define a different structure for the two languages being referenced. For example, you might want to trigger the language for the result to be selected from a list.

  • The second function in UserJavaScript.js provides the call back to the Google API. It is provided as:

    function onloadCallback() {
  try {
    var d = document.editForm;
    google.language.translate(d.p_description.value, 'en', 'fr', function(result) {
      var regex = new RegExp("'", "gi");
      if (!(typeof(d.p_description=='undefined') 
          || typeof(d.p_translate_result=='undefined'))) {
        d.p_translate_result.value = result.translation.replace(regex ,"'");
      }
    })
  } catch (err) {
    // just ignore
  } 
}

    Again, significant modification may be made to this function. The example here simply translates the text in the DESCRIPTION field from English to French and places the result in the TRANSLATE_RESULT field.

  • Make sure you place the DESCRIPTION and the TRANSLATE_RESULT fields on the layouts where they are to be used and make sure that they have read and write permission
  • To trigger the translation, you simply create an HTML modifier in the DESCRIPTION field within the add or edit screens where you want to use the feature. This example simply looks for a change in the content to trigger the translation:

    onchange=ev_translate('en', 'fr');