Highlight row of marked checkbox in grid

From pmusers
Jump to: navigation, search

This programming example shows how to use JavaScript to detect if checkbox has been marked inside a grid and then change the background color of its whole row to light blue.


DynaForm: Highlight selected rows in grid.json (right click and select Save link as)
Author: Amos Batto (amos@processmaker.com)
Version: 1.0 (2018-11-13)
Tested in: ProcessMaker 3.2.3 Community in Debian 9.5 with Firefox 52


Create the following DynaForm which contains a grid which contains a list of products which can be shipped abroad:

HighlightGridRow-InFormDesigner.png

This DynaForm contains the following fields:

  • A grid with the ID "productsList", which contains the following fields:
    • A checkbox with the ID "shipAbroad". When marked, the product will be shipped abroad.
    • A textbox with the ID "name" to enter the name of the product,
    • A textbox with the ID "price" to enter the product's price,
    • A textarea with the ID "description" to enter the product's description.
  • A submit button.

When the "shipAbroad" checkbox is marked, the background color of the enclosing row is changed to light blue. If unchecked, then the row is changed back to its original color. To implement this functionality, add the following JavaScript code to the DynaForm:

var gridId     = "productsList"; //set to the ID of the grid
var checkboxId = "shipAbroad";   //set to the ID of the checkbox field inside the grid

var reGridField = new RegExp("^\\["+gridId+"\\]\\[(\\d+)\\]\\["+checkboxId+"\\]$");
var formId = $("form").prop("id");

$("#"+formId).setOnchange( function(fieldId, newVal, oldVal) {
  var aMatch = fieldId.match(reGridField);
  
  if (aMatch) {
    var rowNo = aMatch[1];
    var gridFieldId = "form\\["+gridId+"\\]\\["+rowNo+"\\]\\["+checkboxId+"\\]";
    
    if (newVal == '"1"') {
      $("#"+gridFieldId).closest("div.pmdynaform-grid-row").css("background-color", "#e8f8f5");
    }
    else {
      $("#"+gridFieldId).closest("div.pmdynaform-grid-row").css("background-color", "");
    }
  }   
})

The code creates a regular expression based on the ID of the grid and the grid's checkbox which is used to determine whether the changed field is a checkbox inside the grid. Remember when dynamically creating regular expressions to use \\ (two backslashes) to escape characters like [ and ] so they will be treated as literals.

The form.setOnChange() method is used to set an event handler which fires when a field's value is changed in the DynaForm. The regular expression in this example will search for a changed field whose ID is "[productsList][N][shipAbroad]" where N is a row number in the grid. If the checkbox has been checked, then its value is '"1"' and the row's background color will be changed to signal that the product has been selected to ship abroad. jQuery's .closest() method is used to find the enclosing row, which is a <div> with the class pmdynaform-grid-row.

When the DynaForm is used in a case, the user can select which products will be shipped abroad by marking the checkbox in the grid:

HighlightGridRow-UsedInCase.png

'