ProcessMaker Forum | BPM Workflow Simplified

Posted: **Mon Feb 11, 2019 3:52 am**

I have a grid where items can be selected. "OTHERS" can be selected in this list. How can I generate a textbox within the grid if "OTHERS" is selected in the list?

Posted: **Mon Feb 11, 2019 5:14 pm**

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);

Posted: **Mon Feb 11, 2019 9:02 pm**

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?

Posted: **Mon Feb 11, 2019 9:35 pm**

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.

Posted: **Mon Feb 11, 2019 10:11 pm**

Does that mean that I need to copy the code given as it is and change nothing aside from the ID of the grid and the id of the dropdown inside the grid?

Posted: **Mon Feb 11, 2019 11:09 pm**

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

Posted: **Mon Feb 11, 2019 11:13 pm**

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);

Posted: **Tue Feb 12, 2019 12:14 am**

Thanks Sir amosbatto! The code works fine. Another question is, can I add a text or any label under a textbox aside from the text on the left-hand side?

Posted: **Tue Feb 12, 2019 12:48 am**

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.

Posted: **Tue Feb 12, 2019 1:13 am**

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 (40.73 KiB) Viewed 8278 times

But when I am creating this using the ProcessMaker it looks like this.

Screenshot_4.jpg (27.48 KiB) Viewed 8278 times

Spaces between the fields are too wide. Is there a way to lessen it?

Posted: **Tue Feb 12, 2019 2:46 am**

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.

Posted: **Tue Feb 12, 2019 2:50 am**

How can I add textboxes in the PANEL and still get the data to pass on to the next user?

Posted: **Tue Feb 12, 2019 2:53 am**

Or how can I set fixed widths to every element in my dynaform? I want to try every possible fix. Thanks Sir amosbatto

Posted: **Tue Feb 12, 2019 3:17 am**

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");

Posted: **Tue Feb 12, 2019 4:05 am**

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 (32.05 KiB) Viewed 8254 times

Posted: **Tue Feb 12, 2019 9:47 pm**

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

Posted: **Wed Feb 13, 2019 2:55 am**

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 (24.93 KiB) Viewed 8233 times

Posted: **Wed Feb 13, 2019 8:30 pm**

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.

ProcessMaker Forum | BPM Workflow Simplified

Adding textbox when OTHERS is selected using dropdown in grid

Adding textbox when OTHERS is selected using dropdown in grid

Re: Adding textbox when OTHERS is selected using dropdown in grid

Re: Adding textbox when OTHERS is selected using dropdown in grid

Re: Adding textbox when OTHERS is selected using dropdown in grid

Re: Adding textbox when OTHERS is selected using dropdown in grid

Re: Adding textbox when OTHERS is selected using dropdown in grid

Re: Adding textbox when OTHERS is selected using dropdown in grid

Re: Adding textbox when OTHERS is selected using dropdown in grid

Re: Adding textbox when OTHERS is selected using dropdown in grid

Re: Adding textbox when OTHERS is selected using dropdown in grid

Re: Adding textbox when OTHERS is selected using dropdown in grid

Re: Adding textbox when OTHERS is selected using dropdown in grid

Re: Adding textbox when OTHERS is selected using dropdown in grid

Re: Adding textbox when OTHERS is selected using dropdown in grid

Re: Adding textbox when OTHERS is selected using dropdown in grid

Re: Adding textbox when OTHERS is selected using dropdown in grid

Re: Adding textbox when OTHERS is selected using dropdown in grid

Re: Adding textbox when OTHERS is selected using dropdown in grid