Show or hide fields in grids

From pmusers
Jump to: navigation, search

This example shows how to show or hide a textarea field inside a grid depending on the option selected in a dropdown box in the same row of the grid.



Dynaform: Show and hide grid fields.json (right click and select Save Link As)
Author: Amos Batto <amos[at]processmaker[dot]com>
Version: 1.0 (2018-03-25)
Tested in: PM 3.3.4 Enterprise in Debian 9.5 with Firefox 60.5



Create the following Dynaform where the manager can decide which items in the "Purchase List" should be approved or rejected:

ShowAndHideGridFieldsInDesigner.png

The "purchaseList" grid contains the following fields:

  • Text field with ID "item"
  • Text field with ID "quantity"
  • Text field with ID "price"
  • Dropdown box with ID "decision", where the manager can select "Approve" or "Reject"
    OptionsInDecisionDropdownInGrid.png
  • Textarea with ID "reason".


The "reason" textarea will be hidden if the manager selects "Approve", and it will be shown if "Reject" is selected, so that the manager can enter a reason why the requested purchase was rejected.

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

var gridId          = 'purchaseList'; //set to ID of grid
var fieldToCheckVal = 'decision';     //set to ID of field in grid whose value is checked
var fieldToHide     = 'reason';       //set to ID of field in grid to show/hide

var reGridFieldChanged = RegExp("\\["+gridId+"\\]\\[(\\d+)\\]\\["+fieldToCheckVal+"\\]");

//if the "decision" is "reject" in grid, then hide the "reason" field; otherwise, show it. 
function showOrHideGridField(fieldId, newVal, oldVal) {
  var aMatch = fieldId.match(reGridFieldChanged);
  
  if (aMatch) {
    var rowNo = aMatch[1];
    
    if (newVal == 'approve') {
      $("[id='form["+gridId+"]["+rowNo+"]["+fieldToHide+"]']").css("visibility", "hidden");
      //Note: .css("visibility", "hidden") hides field but keeps space. 
      //Use .css("visibility", "none") to not keep space
    }
    else {
      //show field:
      $("[id='form["+gridId+"]["+rowNo+"]["+fieldToHide+"]']").css("visibility", "");
    }
  }
}

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

//Execute when a value is changed in the Dynaform
$("#"+formId).setOnchange( showOrHideGridField );

//Show/hide field in each grid row when the form loads:
var nRows = $("#"+gridId).getNumberRows();

for (var i = 1; i <= nRows; i++) {
  showOrHideGridField( "["+gridId+"]["+i+"]["+fieldToCheckVal+"]", 
    $("[id='form["+gridId+"]["+i+"]["+fieldToCheckVal+"]']").val(), "");
}

//execute when another row is added to the grid:
$("#"+gridId).onAddRow( function(aNewRow, oGrid, rowIndex) {
  showOrHideGridField( "["+gridId+"]["+rowIndex+"]["+fieldToCheckVal+"]", 
    $("[id='form["+gridId+"]["+rowIndex+"]["+fieldToCheckVal+"]']").val(), "");
});

To use this code, change the first three lines to match the IDs of the grid and its two fields. Also change the following line to match a value in the dropdown:

    if (newVal == 'approve') {

When the user fills in the Dynaform, the "Reason" field will be hidden or shown, depending on which option was selected in the grid row's "Decision" dropdown:

ShowOrHideGridFieldsFormInUse.png