Page 1 of 1

Adding textbox when OTHERS is selected using dropdown in grid

Posted: Mon Feb 11, 2019 3:52 am
by 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?

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

Posted: Mon Feb 11, 2019 5:14 pm
by 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);


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

Posted: Mon Feb 11, 2019 9:02 pm
by 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?

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

Posted: Mon Feb 11, 2019 9:35 pm
by amosbatto
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.

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

Posted: Mon Feb 11, 2019 10:11 pm
by 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?

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

Posted: Mon Feb 11, 2019 11:09 pm
by 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

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

Posted: Mon Feb 11, 2019 11:13 pm
by 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);

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

Posted: Tue Feb 12, 2019 12:14 am
by 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?

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

Posted: Tue Feb 12, 2019 12:48 am
by amosbatto
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.

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

Posted: Tue Feb 12, 2019 1:13 am
by 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
Screenshot_3.jpg (40.73 KiB) Viewed 526 times
But when I am creating this using the ProcessMaker it looks like this.
Screenshot_4.jpg
Screenshot_4.jpg (27.48 KiB) Viewed 526 times
Spaces between the fields are too wide. Is there a way to lessen it?

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

Posted: Tue Feb 12, 2019 2:46 am
by 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.

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

Posted: Tue Feb 12, 2019 2:50 am
by cabrerabenj
How can I add textboxes in the PANEL and still get the data to pass on to the next user?

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

Posted: Tue Feb 12, 2019 2:53 am
by cabrerabenj
Or how can I set fixed widths to every element in my dynaform? I want to try every possible fix. Thanks Sir amosbatto

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

Posted: Tue Feb 12, 2019 3:17 am
by 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");

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

Posted: Tue Feb 12, 2019 4:05 am
by 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
Screenshot_5.jpg (32.05 KiB) Viewed 502 times

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

Posted: Tue Feb 12, 2019 9:47 pm
by amosbatto
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

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

Posted: Wed Feb 13, 2019 2:55 am
by 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
Screenshot_27.jpg (24.93 KiB) Viewed 481 times

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

Posted: Wed Feb 13, 2019 8:30 pm
by amosbatto
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.