Editable grid fields when checkbox is marked

From pmusers
Jump to: navigation, search

Most Dynaform input fields (except checkgroups, files, multipleFiles and grids) can be made editable (allow input from user) with the following JavaScript code:

$("#fieldID").getControl().attr("disabled", false);

Similarly, all the input fields in a grid can made editable with the following code:

$("#gridID").find("input,textarea,").attr("disabled", false);

and they can all be disabled with the the following code:

$("#gridID").find("input,textarea,").attr("disabled", true);

However, the user may need finer control over which grid fields are enabled or disabled, so the user will only edit parts of the grid. The following JavaScript example shows how to only enable certain fields in a grid row for editing when a checkbox inside that row is marked.



Dynaform: Editable fields in grid.json (right click and select Save link as)
Author: Amos Batto <amos[at]processmaker[dot]com>
Version: 1.0 (2019-03-26)
Tested in: ProcessMaker 3.3.4 Enterprise in Debian 9.5 with Firefox 60.5


Create the following Dynaform which holds a "Product List" which a manager can edit:

EditableFieldsInGridInDesigner.png

The "productList" grid in the Dynaform has the following fields:

  • Checkbox with ID "editable", which will cause the other fields in the grid row to become editable (i.e., enabled) when marked.
  • Text field with ID "productName"
  • Textarea with ID "description"
  • Text field with ID "price"

Add the following JavaScript code to the Dynaform:

var gridId = "productList";  //set to ID of grid
var editCheckboxId = 'editable'; //set to ID of "Editable?" checkbox

//set to the IDs of the grid fields that will be made editable when the
//"editable" checkbox is marked:
var aGridFieldsEditable = ['productName', 'description', 'price'];

var reGridCheckbox = RegExp("\\["+gridId+"\\]\\[(\\d+)\\]\\["+editCheckboxId+"\\]");
var formId = $("form").prop("id");

//function to make grid fields editable when "editable" checkbox is marked:
function editableFieldsInRow(rowNo, checkboxVal) {
  console.log(checkboxVal);

  for (i in aGridFieldsEditable) {
    var disableState = true; 
    if (checkboxVal == "1" || checkboxVal == '"1"' || checkboxVal == '["1"]') {
      disableState = false; //editable
      //console.log(disableState);
    }
    console.log( $("[id='form["+gridId+"]["+rowNo+"]["+aGridFieldsEditable[i]+"]']") );  
    $("[id='form["+gridId+"]["+rowNo+"]["+aGridFieldsEditable[i]+"]']").prop("disabled", disableState);
  }
}

$("#"+formId).setOnchange( function (fieldId, newVal, oldVal) {
  var aMatch = fieldId.match(reGridCheckbox);
  
  if (aMatch) {
    editableFieldsInRow(aMatch[1], newVal);
  }
} );
                         
//set editable fields in each grid row when the Dynaform loads:
var aGridVals = $("#"+gridId).getValue();

for (var i = 0; i <= aGridVals.length; i++) {
  //Add 1 to row number, because start counting grid rows from 1, but array counts from 0.
  //If checkbox isn't the first grid field, then change [0] to another number:  
  editableFieldsInRow(i + 1, aGridVals[i][0]);
} 


$("#"+gridId).onAddRow( function(aNewRow, oGrd, rowIndex) {
  //if checkbox isn't the first field in grid, then change 1:
  editableFieldsInRow(rowIndex, oGrd.getValue(rowIndex, 1));
} );

Change the IDs at the beginning of the code to match your grid. If the checkbox is not the first field in the grid, then also change the column number in the code.

When the user marks the "editable" checkbox, the other fields in the same row will become editable (i.e., enabled). Those rows whose checkbox is not marked will have uneditable (i.e., disabled) fields.

EditableGridFieldsInUse.png