Preserving old options in fields

From pmusers
Jump to: navigation, search

When the list of options in a dropdown, checkgroup or radiogroup field depends on a database query or an array which can change over time, this can create problems when redisplaying that field at a later time, because the originally selected option may no longer exist. This example shows how to add JavaScript to a DynaForm to preserve the originally selected option in a field after the option has been deleted from the list of available options.



DynaForm: Review Order List.json (right click and select Save link as)
Process: Preserving_old_options_in_fields-1.pmx (right click and select Save link as)
Author: Amos Batto (amos@processmaker.com)
Version: 1.0 (2018-05-08)
Tested in: ProcessMaker 3.2.1 Community in Debian 8.4 with Firefox 51



In the following example, a DynaForm has a "Payment Method" dropdown whose list of options is provided by the @=paymentOptions case variable. The list of options in this variable can change, so an option selected in the past may no longer exist in the future. If the option no longer exists, then the option will not appear in the dropdown when it is displayed in a DynaForm.

To prevent this problem, the following JavaScript code is added to the DynaForm:

var dropdownId = "paymentMethod"; //set to the ID of a dropdown, checkgroup or radiogroup 
var drpValue = $("#"+dropdownId).getValue();

//if there is a selected option in the field:
if (drpValue != '') {
  var drpLabel = $("#"+dropdownId).getText();
  var aOpts = getFieldById(dropdownId).model.attributes.options;
  var found = false;

  //search for the dropdown's current value in its list of available options:
  for (idx in aOpts) {
    if (aOpts[idx].value == drpValue) {
      found = idx;
      break;
    }
  }

  //if the current value of the field is not in the list of options,
  //then the value has been deleted from the database, so temporarily
  //add it to the list of options so the user can see it:
  if (found === false) {
    $("#"+dropdownId).getInfo().options.push({value: drpValue, label: drpLabel});
    $("#form\\["+dropdownId+"\\]").append( $(new Option(drpLabel, drpValue)) );
    getFieldById(dropdownId).setValue(drpValue);
  }
}

Note that this code will not work with suggest boxes, but it is not needed, since suggest boxes are designed to accept values which are not in their list of available options.

To test this code, import the Preserving_old_options_in_fields-1.pmx process and run a case in it. In between the "Order List Form" and the "Review Order List" form, the list of options in the "Payment Method" dropdown will change, but the originally selected option will still be maintained as an option when the dropdown is displayed a second time in the "Review Order List" form.