Dynamically translate form elements

Demonstrates how to dynamically translate labels and choice list options to support multiple languages.

This example demonstrates how to use the SETLABEL and SETCHOICES functions to dynamically update the form elements when a user selects their language from a choice list. The translations are stored as simple JavaScript objects. Note that in addition to labels and choices, you can also use this method to translate field descriptions with SETDESCRIPTION.

Socrata Example

var labels = {
  'name': {
    'Spanish': 'Nombre',
    'French': 'Nom'
  },
  'age': {
    'Spanish': 'Años',
    'French': 'Âge'
  },
  'gender': {
    'Spanish': 'Género',
    'French': 'Sexe'
  }
};

var choices = {
  'gender': {
    'Spanish': [
      {
        'label': 'Varón',
        'value': 'Male'
      },
      {
        'label': 'Hembra',
        'value': 'Female'
      }
    ],
    'French': [
      {
        'label': 'Mâle',
        'value': 'Male'
      },
      {
        'label': 'Femelle',
        'value': 'Female'
      }
    ]
  }
};

function translate(e) {
  var language = CHOICEVALUE($language);
  for (var dataName in DATANAMES()) {
    // Update field labels
    if (labels[dataName]) {
      SETLABEL(dataName, labels[dataName][language]);
    } else {
      SETLABEL(dataName, null);
    }
    // Update choice values
    if (choices[dataName] && choices[dataName][language]) {
      SETCHOICES(dataName, choices[dataName][language]);
    } else {
      SETCHOICES(dataName, null);
    }
  }
}

ON('load-record', translate);
ON('change', 'language', translate);