Questions and discussion about using ProcessMaker: user interface, running cases & functionality

Moderator: amosbatto

#822865
You can add OTHERS textbox in the grid and hide it, once selected OTHERS show it.

lets say that you have dropdown list in the grid with the followings options:
Code: Select all
<select id="Items">
      <option value="testItemA">Test Item A</option>
      <option value="testItemB">Test Item B</option>
      <option value="others">OTHERS</option>
</select>

Your code should be:
Code: Select all

var gridId  = "#gridId"; //set to the ID of the grid
var gridItems = "Items";  //set to the ID of the field in grid
var gridItemsIndex = 2;  //set to column number in grid of the DROPDOWN that has the OTHERS option
var gridOthersIndex = 3; //set to column number in grid of the OTHERS text field

$(gridId).hideColumn(gridOthersIndex);
$(gridId).getControl(1, gridOthersIndex).hide();

$(gridId).onAddRow(function(aNewRow, oGrid, rowIndex ) {

$(gridId).getControl(rowIndex, gridOthersIndex).hide(); 
      UpdateShowHideOthers(rowIndex);
});
 
function UpdateShowHideOthers(rowIndex) { 
  $("#form\\[gridId\\]\\["+rowIndex+"\\]\\["+gridItems+"\\]").change( function() {
    setTimeout(function() {
      updateSelectedItem();
    },0);
  }); 
}

function updateSelectedItem() { 
  var numRows = $(gridId).getNumberRows();
  hasShowOthers = false;
  for (var i=1; i <= numRows; i++) { 
      var getVal = $(gridId).getValue(i, gridItemsIndex);
      if(getVal == 'others') {
          $(gridId).getControl(i, gridOthersIndex).show();
          hasShowOthers = true;
      } else {
          $(gridId).getControl(i, gridOthersIndex).hide();
      }
}
  if(hasShowOthers) {
        $(gridId).showColumn(gridOthersIndex);
  } else {
   	$(gridId).hideColumn(gridOthersIndex); 
  }
}

UpdateShowHideOthers(1);

#822868
cabrerabenj wrote:The #form is the ID of the current dynaform right? Should I still change the rowIndex? How can I know the rowIndex the grid is using?
Fields in grids have IDs like:
form[myGrid][2][myField]
Where myGrid is the ID of the grid and myField is the ID of the grid field.

When a new row is added to the grid, it sets an onchange event handler to hide or show the textbox in the new row, depending on the selection in the dropdown box. You don't need to know the rowIndex, because each onchange event handler only operates on a single row. Just try his code and you will see.
#822874
You only have to change the first four variables to match your Dynaform:
Code: Select all
var gridId  = "#gridId"; //set to the ID of the grid
var gridItems = "Items";  //set to the ID of the field in grid
var gridItemsIndex = 2;  //set to column number in grid of the DROPDOWN that has the OTHERS option
var gridOthersIndex = 3; //set to column number in grid of the OTHERS text field
#822875
Here is the code, so you don't have to alter anything, except the top variables:
Code: Select all
var gridId  = "gridId"; //set to the ID of the grid
var gridItems = "Items";  //set to the ID of the field in grid
var gridItemsIndex = 2;  //set to column number in grid of the DROPDOWN that has the OTHERS option
var gridOthersIndex = 3; //set to column number in grid of the OTHERS text field

$("#"+gridId).hideColumn(gridOthersIndex);
$("#"+gridId).getControl(1, gridOthersIndex).hide();

$("#"+gridId).onAddRow(function(aNewRow, oGrid, rowIndex ) {

$("#"+gridId).getControl(rowIndex, gridOthersIndex).hide(); 
      UpdateShowHideOthers(rowIndex);
});
 
function UpdateShowHideOthers(rowIndex) { 
  $("#form\\["+gridId+"\\]\\["+rowIndex+"\\]\\["+gridItems+"\\]").change( function() {
    setTimeout(function() {
      updateSelectedItem();
    },0);
  }); 
}

function updateSelectedItem() { 
  var numRows = $("#"+gridId).getNumberRows();
  hasShowOthers = false;
  for (var i=1; i <= numRows; i++) { 
      var getVal = $("#"+gridId).getValue(i, gridItemsIndex);
      if(getVal == 'others') {
          $("#"+gridId).getControl(i, gridOthersIndex).show();
          hasShowOthers = true;
      } else {
          $("#"+gridId).getControl(i, gridOthersIndex).hide();
      }
}
  if(hasShowOthers) {
        $("#"+gridId).showColumn(gridOthersIndex);
  } else {
   	$("#"+gridId).hideColumn(gridOthersIndex); 
  }
}

UpdateShowHideOthers(1);
#822878
cabrerabenj wrote:Another question is, can I add a text or any label under a textbox aside from the text on the left-hand side?
You can add this JavaScript to your Dynaform:
Code: Select all
$("#myTextID").getControl().parent().append("<p>My extra text</p>");
Where myTextID is the ID of your text field.
#822880
Thanks again Sir amosbatto! I greatly appreciate your help.

Would like to get your help again regarding this one.

I want to create a form like this one.
Screenshot_3.jpg
Screenshot_3.jpg (40.73 KiB) Viewed 427 times
But when I am creating this using the ProcessMaker it looks like this.
Screenshot_4.jpg
Screenshot_4.jpg (27.48 KiB) Viewed 427 times
Spaces between the fields are too wide. Is there a way to lessen it?
#822882
If you are using a Dynaform, then it automatically adjusts to the width of your screen.
The only way to get around that problem, is either to use JavaScript to set fixed widths to
every element or create your form with HTML in a "panel" field.

Most people create their printable forms in Output Documents if they want to control spacing.
#822887
You can set the width property for each element in the HTML in a panel or use this JavaScript for each field:
Code: Select all
$("#myfield").css("width", "400px");
Where myfield is the ID of the field.

The easiest solution is to simply set a fixed width for your entire form with this JavaScript:
Code: Select all
$("form").css("width", "1000px");
#822888
Thanks for your big help sir!

I also have a problem here in my flow.

When the user sends a form, it will be both sent to the Engring SM and the Accting SM.

But when somebody or any of the 2 SMs rejected the form, it will be sent back to the user and the other copy of the form will be gone to the other SM even he/she didn't reject. The rejection of form is only based on 1 SM.
Screenshot_5.jpg
Screenshot_5.jpg (32.05 KiB) Viewed 403 times
#822898
cabrerabenj wrote:When the user sends a form, it will be both sent to the Engring SM and the Accting SM.

But when somebody or any of the 2 SMs rejected the form, it will be sent back to the user and the other copy of the form will be gone to the other SM even he/she didn't reject. The rejection of form is only based on 1 SM.
This example will help you:
https://www.pmusers.com/index.php/Loop_ ... prior_task
#822903
Thanks again for your help sir. Ill just review the content of the link.

Another problem that I need your help with is how can I get the report of the form I have accepted.
This shows up when I am trying to view all the forms in the Participated. Is this related to giving permissions?
Screenshot_27.jpg
Screenshot_27.jpg (24.93 KiB) Viewed 382 times
#822916
cabrerabenj wrote: Wed Feb 13, 2019 2:55 am Another problem that I need your help with is how can I get the report of the form I have accepted.
This shows up when I am trying to view all the forms in the Participated. Is this related to giving permissions?

Screenshot_27.jpg
You need to assign Process Permissions to your users to be able to access the cases when they aren't the current assigned users of tasks.

Learn how to increase the max upload size setting […]

To fix this, you will have to edit the code for[…]

Using RTL.CSS in dynaforms

I reinstalled the processmaker and used the po fil[…]

Hi Member's I am trying to create a Dashboard of […]