Verify filled fields in grid rows

From pmusers
Jump to: navigation, search

The following example shows how to verify that certain fields in each row in a grid have been filled when submitting a Dynaform. In this example, the Dynaform is only allowed to be submitted if each grid row either has a filled "Product Comments" field or an uploaded file in the "Comments File" field.



Dynaform: Products.json (right click and select Save Link As)
Author: Amos Batto (amos@processmaker.com)
Version: 1.0 (2019-01-25)
Tested in: PM 3.3.2 Community in Debian 9.5 with Firefox 52


Create the following Dynaform which contains the "Products List" grid:

VerifyFilledGrid FormInDesigner.png

The "Products List grid has the ID "productsList" and it contains the following fields:

  • A text field with the ID "productName"
  • A textarea field with the ID "productComments"
  • A MultipleFile field with the ID "commentsFile"

Add the following JavaScript code to the Dynaform:

var gridId = "productsList"; //set to ID of grid
var commentsColNo = 1;       //set to column number of comments field in the grid (counting starts from 0)
var fileColNo = 2;           //set to the column number of the file field in the grid

var formId = $("form").prop("id");

//when the form is submitted, verify that each row in the "productsList" grid 
//either has filled the "productComments" field or has selected a file in the "commentsFile"
getFormById(formId).setOnSubmit( function() {
  var aGridTable = getFieldById(gridId).gridtable;
   
  for (var i = 0; i < aGridTable.length; i++) {
    
    if (aGridTable[i][commentsColNo].getValue() == '' && 
        aGridTable[i][fileColNo].getInfo().fileCollection.length == 0) 
    {
      alert("Please either enter a comment or upload a comments file in row "+(i+1)+".");
      return false; //stop submit action
    }
  }
});

Change the gridId to the ID of the grid and set commentsColNo and fileColNo to the column numbers in the grid of the textarea and MultipleFile fields.

When the Dynaform is submitted the custom event handler set by grid.setOnSubmit() will be executed. This submit event handler will get the contents of the grid with its gridtable property, which is an array of rows in the grid. Each row holds an array of the row's fields.

Then code loops through each grid row and checks whether both the "Product comments" textarea and "Comments File" multipleFile fields are empty. It uses getValue() to get the value of the textarea and it uses the getInfo().fileCollection.length to check the number of uploaded files. If both fields in a grid row are empty, then it displays an alert telling the user to either enter a comment or upload a file in the row and then returns false to stop the form's submit action.

When a case is run and the user attempts to submit the grid with a row which lacks a comment and an uploaded file, the following error message is displayed:

VerifyFilledGrid ErrorMessage.png

After the user enters a comment or uploads a file in each grid row, then the Dynaform can be submitted:

VerifyFilledGrid EachRowIsFilled.png