Concatenate grid fields

From pmusers
Jump to: navigation, search

This example shows how to concatenate the contents of grid fields in each row and place the value of that concatenation into the last grid field.


Dynaform: Concatenate grid fields.json (right click and select Save Link As)
Author: Amos Batto <amos[en]processmaker.com>
Version: 1.0 (2019-07-23)
Tested in: PM 3.3.10 with Firefox 60.5


Create the following Dynaform with a grid:

ConcatenateGridFields FormInDesigner.png

This Dynaform has the following fields:

  • A grid field with the ID "clientsList", which has the following fields:
    • A text field with the ID "firstName",
    • A text field with the ID "lastName",
    • A text field with the ID "phoneNumber",
    • A text field with the ID "extension",
    • A text field with the ID "email",
    • A text field with the ID "combined", which holds the concatenated string of all the other grid fields in the same row

Then, add the following JavaScript to the Dynaform:

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

//set to the IDs of the 5 grid fields which should be concatenated:
var aGridFieldIDs = ["firstName", "lastName", "phoneNumber", "extension", "email"];  

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

$("#"+formId).setOnchange( function(fieldId, newVal, oldVal) {
  var aMatch = fieldId.match(reGridField);
   
  if (aMatch) {
    var rowNo = aMatch[1];
    var grdFieldId = aMatch[2]; 
     
    if (aGridFieldIDs.indexOf(grdFieldId) != -1) {
      //subtract because start counting from 0, but rowNo starts counting from 1: 
      var aRowVals = $("#"+gridId).getValue()[rowNo - 1];
      var concat = '';
      
      for (i = 0; i < aGridFieldIDs.length; i++) {
        concat += (concat && aRowVals[i] ? '|' : '') + aRowVals[i];
      }
      
      $("#"+gridId).setValue(concat, rowNo, aGridFieldIDs.length + 1);
    }
  }
});

When a user fills the grid, the first five grid fields are concatenated in the sixth grid field in each row:

ConcateGridFields FilledForm.png

Concatenate Specified Grid Fields

The previous example concatenates all the grid fields. This example shows how to only concatenate specified grid fields and how to concatenate the labels of the fields, rather than their values.



Dynaform: Concatenate specified grid fields.json (right click and select Save Link As)
Author: Amos Batto <amos[en]processmaker.com>
Version: 1.0 (2019-07-25)
Tested in: PM 3.3.10 with Firefox 60.5


With the same Dynaform as before, use the following JavaScript code:

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

//set to the IDs of the grid fields which should be concatenated:
var aGridFieldIDs = ["firstName", "lastName", "email"];
//set to the column numbers of the grid fields which should be concatenated:
var aGridFieldColumns = [1, 2, 5];
//set to column number of the grid field where the concatenation is placed:
var concatFieldColumn = 6; 

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

$("#"+formId).setOnchange( function(fieldId, newVal, oldVal) {
  var aMatch = fieldId.match(reGridField);
   
  if (aMatch) {
    var rowNo = aMatch[1];
    var grdFieldId = aMatch[2]; 
     
    if (aGridFieldIDs.indexOf(grdFieldId) != -1) {
      var oGrid = $("#"+gridId);
      var concat = '';
      
      for (var i in aGridFieldColumns) {
        var label = oGrid.getText(rowNo, aGridFieldColumns[i]);
        concat += (concat && label ? '|' : '') + label;
      }
      
      $("#"+gridId).setValue(concat, rowNo, concatFieldColumn);
    }
  }
});

Now, the first, second and fifth grid fields will be concatenated and the result will be placed in the sixth grid field in each row:

ConcatenateGridFields UpdatedForm.png