Enable or disable a required grid field

From pmusers
Jump to: navigation, search

This example shows how to enable or disable a required field in a grid based on the value in another field in the same row of the grid.



Dynaform: Enable or disable grid fields.json (right click and select Save Link As)
Author: Amos Batto <amos[at]processmaker.com>
Version: 1.0 (2019-05-14)
Tested in: ProcessMaker 3.3.4 Enterprise with Debian 9.5 and Firefox 60.5


Create the following Dynaform which contains the "Product List" grid to fill out a list of the inventory in a store.

EnableDisableGridFields InDesigner.png

This Dynaform contains the following fields:

  • A grid with the ID "productList" which contains the following fields:
    • A textbox with the ID "productName"
    • A dropdown with the ID "inStock", which contains the options of "True" or "False". By default, "False" is selected.
    • A textbox with the ID "quantityInStock".
  • A submit button

If the value of the "inStock" dropdown box is set to "False", then the required property of the "quantityInStock" field in the same row should be disabled and the field should be disabled, so it is greyed out, so the user won't try to enter a value in the field.

To implement this functionality, add the following JavaScript to the Dynaform:

var gridId = "productsList";        //set to ID of grid
var valueToCheckId = "inStock";     //set to ID of grid field whose value will be checked to disable or require 
var valueToCheckColNo = 1           //set to column number of grid field whose value will be checked. Counting starts from 0.
var requiredId = "quantityInStock"; //set to ID of grid field to disable or require
var requiredColNo = 2;              //set to column number of grid field to disable or require. Counting starts from 0.

var aGridVals = $("#"+gridId).getValue();
var reGridField = RegExp("^\\["+gridId+"\\]\\[(\\d+)\\]\\["+valueToCheckId+"\\]$");
var formId = $("form").prop("id");

function setGridField(valueToCheck, rowNo) {
  //"True" is the value of a selected option in grid's dropdown:
  if (valueToCheck == "True") {    
    $("#form\\["+gridId+"\\]\\["+rowNo+"\\]\\["+requiredId+"\\]").prop("disabled", false);
    getFieldById(gridId).gridtable[rowNo-1][requiredColNo].enableValidation();
  }
  else {
    $("#form\\["+gridId+"\\]\\["+rowNo+"\\]\\["+requiredId+"\\]").prop("disabled", true);
    getFieldById(gridId).gridtable[rowNo-1][requiredColNo].disableValidation();
  }
}

//set the field in each row in the grid when the Dynaform loads:
for (var i = 0; i < aGridVals.length; i++) {
  setGridField(aGridVals[i][1], i+1); //add 1 because counting starts from 0.
}

//when a value changes in the form:
$("#"+formId).setOnchange( function(fieldId, newVal, oldVal) {
  var aMatch = fieldId.match(reGridField);
  
  if (aMatch) {
    setGridField(newVal, aMatch[1]);  
  }
});  

$("#"+gridId).onAddRow( function(aNewRow, oGrid, rowIndex) {
  var val = aNewRow[valueToCheckColNo].getValue();
  setGridField(val, rowIndex);
});

When this Dynaform is filled when running a case, the "quantityInStock" field will be disabled and its required property deactivated in the rows where the "instock" dropdown is set to "False".

EnableDisableGridFields FilledForm.png