Outline changed grid cells

From pmusers
Jump to: navigation, search

Use JavaScript to change the border color of grid fields when their value has been changed.


DynaForm: Show changed cells in grid.json (right click and select Save link as)
Author: Amos Batto (amos@processmaker.com)
Version: 1.0 (2018-08-14)
Tested in: ProcessMaker 3.2.3 Community in Debian 8.4 with Firefox 51


Create the following grid in a DynaForm:

GridInDesigner.png

Then, add the following JavaScript code to the DynaForm:

var gridId = "orderList"; //set to the ID of the grid

var reGridField = new RegExp("^\\["+gridId+"\\]\\[(\\d+)\\]\\[([a-zA-Z0-9_]+)\\]$");
var formId = $("form").prop("id");

$("#"+formId).setOnchange(function(fieldId, newVal, oldVal) {
  var aMatch = fieldId.match(reGridField);
  
  if (aMatch) {    
    var gridFieldId = "form" + fieldId.replace(/\[/g, '\\[').replace(/\]/g, '\\]');
    $("#"+gridFieldId).css("border-color", "red");
  }   
})

Change the gridId variable to match the ID of your grid.

This code uses the form.setOnchange() method to set an event handler to be executed when the value of a field in the Dynaform changes. The event handler uses .match() to check whether the changed field is found inside the grid. The field ID for a grid field will be something like [orderList][2][price]. The tricky part is constructing the regular expression used by .match(), because [ and ] have to be escaped as \\[ and \\]. If the field that was changed is inside the grid, then the border color of that field is set to red.

showChangedCells.png

If wishing the field's border color to set back to its original color after a fixed amount of time, then use setTimeout() to change the border color. In this example, the border color will be set back after 10 seconds:

var gridId = "orderList"; //set to the ID of the grid

var reGridField = new RegExp("^\\["+gridId+"\\]\\[(\\d+)\\]\\[([a-zA-Z0-9_]+)\\]$");
var formId = $("form").prop("id");

$("#"+formId).setOnchange(function(fieldId, newVal, oldVal) {
  var aMatch = fieldId.match(reGridField);
  
  if (aMatch) {    
    var gridFieldId = "form" + fieldId.replace(/\[/g, '\\[').replace(/\]/g, '\\]');
    $("#"+gridFieldId).css("border-color", "red");
    
    setTimeout(function(){ $("#"+gridFieldId).css("border-color", ""); }, 10000);
  }   
})