[cabrerabenj]

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?

[ziadeh]

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

[cabrerabenj]

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?

[amosbatto]

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.

[cabrerabenj]

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?

[amosbatto]

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

[amosbatto]

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

[cabrerabenj]

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?

[amosbatto]

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.

[cabrerabenj]

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 8276 times

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

Screenshot_4.jpg (27.48 KiB) Viewed 8276 times

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

[amosbatto]

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.

[cabrerabenj]

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

[cabrerabenj]

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

[amosbatto]

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

[cabrerabenj]

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 8252 times

[amosbatto]

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

[cabrerabenj]

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 8231 times

[amosbatto]

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.