Custom Picklist Behavior

Sometimes during data collection it is required for the values of one pick-list to change based on the selection of another pick-list. For instance, if we have primary pick list with following values:

• Electric
• Water

The secondary pick-list would have different values depends on selection of primary pick-list.

If Electric is selected in primary pick list, the secondary pick-list shall have values:

• Main
• Primary
• Secondary

If Water is selected, the secondary pick-list shall have values:

• Distribution
• Interceptor

To achieve this behavior we need to create two pick-lists in the schema editor with integer values.

Primary:

 Secondary

The mobile forms will be generated automatically. We just need to add some logic to control the content of the secondary pick-list. Following is an example of Javascript code to do that. This code shall be added to the mobile Edit and  Create forms.

<script>

$(document).ready(function () {
    setTimeout(function () {
       var primaryPickList = $('#picklist-primary');
       var secondaryPickList = $('#picklist-secondary');
       updateSecondaryPicklist( primaryPickList, secondaryPickList );
       primaryPickList.change(function () {
          updateSecondaryPicklist( primaryPickList, secondaryPickList );
       });
    }, 500);
});

function updateSecondaryPicklist( pPickList, sPickList ) {
  var value = sPickList.val();
  sPickList.children().remove();
  if (pPickList.val() == 0) {
     sPickList.append($('<option value=\"0\">Main</option>'))
     sPickList.append($('<option value=\"1\">Primary</option>'))
     sPickList.append($('<option value=\"2\">Secondary</option>'))
  } else if (pPickList.val() == 1) {
      sPickList.append($('<option value=\"3\">Distribution</option>'))
      sPickList.append($('<option value=\"4\">Interceptor</option>'))
  }
   sPickList.val( value );
}
</script>