Ask questions about installing and configuring ProcessMaker 3

Moderator: ArturoRobles

By azirol
Can someone help me to define number.integer format in the dynaform.
I've half multiple field which require user to key the amount of the claim. i tried to make dynaform automatically change once user key in any number for example if they key in "50", dynaform convert to 50.00 or if 1200 = 1,200.00

i have a grid type and text type which calculate the total (please see attached). unfortunately the text file works fine but not for the "total" field in grid area. in grid if user put 1,200 it will convert to 1 in total field and shown 1.00 in text field.

its already been 1 month tried this but no luck.

Claim Request Dynaform.png
Claim Request Dynaform.png (58.26 KiB) Viewed 4778 times
(18.99 KiB) Downloaded 171 times
By hendrick
Hi Amos,
I followed your recommended link and downloaded Reformat numbers to sum grid column.json and tried it, but it did not work. The form has no external lib. I tried to add jquery.masknumber.js as external lib. It didn't work. I change the external lib with jquery.maskedinput.min.js, it still did not work. Is there anything wrong with what I did? Please help. :?: Thanks
User avatar
By kirkwg
Hi there,

I tried several external jquery Lib for mask input as well, finally I selected autoNumeric() that you may try. It is easy to use so far, but you need to play around it first in order to understand how to use.

//doc for autoNumeric v1.8

Note, don't use any latest version of autoNumeric() as it may NOT compatible with jQuery. Use my recommended version as I already tested and used with ProcessMaker v3.x at least.

Steps to be noticed:
1. put the link below into the "external Libs" property of your Dynaform:

2. Create at least 2 or 3 textboxes and 1 grid with a textbox in Dynaform for testing
i.e. 1 textbox for user inputting raw number or integer with decimal figure
i.e. 1 textbox for copying the 1st textbox value into this 2nd textbox with autoNumeric init, and set methods etc.

3. Show you some examples of the tricky syntax below.

4. Kindly try, if still not working for you, I could show you an example of how to use it next time, good luck!
Let me know any progress, cheers...
Code: Select all
//JS code
//e.g. initialize 1-time only for which textbox that will use autoNumeric()

//e.g.update the total invoice amount txt_apTIAmount by:
        var summary = $("#"+gridId).getSummary("txt_amount");
        $("#txt_apAmount").getControl().autoNumeric("set", summary); 

//e.g. apply autoNumeric() on a textbox in a Grid
     $('#grid01').getControl(1,1).autoNumeric('set', 0);  //or
     $('#grid01').getControl(1,1).autoNumeric('set', summary);

//get back the raw numeric from formatted textbox
var rawAmount = $('#grid01').getControl(1,1).autoNumeric('get');
screenshot-autonumeric-1611818914934.png (25.71 KiB) Viewed 3498 times
By hendrick
Hi, @kirkwg
Just to update you. I have tried all the codes you gave, but only the following codes work:
$('#txt_apAmount').getControl().autoNumeric(); // this works well
$('#grid01').getControl(1,1).autoNumeric(); //it works but this line of code only works for the first row in the grid and when I add a second row, it does not change the format for the second row. Is there any workaround so that the format is changed for all rows in the same column.
Thanks in advance.. cheers
User avatar
By kirkwg
Hi Hendrick,

Thanks for letting me know the status. I tested the code below it works for adding new rows on grid. Enjoy..
see attached screen shot as well ^^
Code: Select all
$("#grid01").onAddRow(function(aNewRow, oGrid, rowIndex) {
        aNewRow[0].getControl().autoNumeric();    //index 0 = first column field on new row
        //set the background color of the new row to orange:
        aNewRow[0] = "orange";
pm-inputMask-grid-onAddRow-.png (18.94 KiB) Viewed 2780 times
By hendrick
Hi Kirkwg.
It works like charm. Thank you so much :D :D :D
I hope you don't mind if I ask you another question. If I insert another text column in the grid, the change only affects the first column, the other column is not changed. Is there a solution to change the other columns in the grid, or is there a solution to change specific columns (for example only column 3 and column 5).
Sorry for the question. I am a newbie and not a developer :cry: :cry: :cry:
User avatar
By kirkwg
Assuming the grid you have defined 10 columns, simplly apply autoNumeric to the column text fields you want by
Code: Select all
$("#grid01").onAddRow(function(aNewRow, oGrid, rowIndex) {
        aNewRow[0].getControl().autoNumeric();    //index 0 = first column field on new row

       aNewRow[2].getControl().autoNumeric();    //index 2 for column 3
      aNewRow[4].getControl().autoNumeric();     //index 4 for column 5
        //set the background color of the new row to orange:
        aNewRow[0] = "orange";

By hendrick
HI Kirkwg,
I have tried your code, it works well. However I am wondering why it works only starting from the second row onward while the first row remains unchanged except the first column.
Please help check what is wrong with the following:
$("#gridVar001").onAddRow(function(aNewRow, oGrid, rowIndex) {
aNewRow[0].getControl().autoNumeric(); //index 0 = first column field on new row
aNewRow[1].getControl().autoNumeric(); //index 1 for column 2
aNewRow[3].getControl().autoNumeric(); //index 3 for column 4
//set the background color of the new row to pale_turquoise:
aNewRow[0] = "PaleTurquoise";

What should I do if I want the change to only affect column 2 and 4 right from the start. This code "$('#gridVar001').getControl(1,1).autoNumeric(); only change column 1 .

Thanks for your help
process_maker.png (31.76 KiB) Viewed 2684 times
User avatar
By kirkwg
You have to try understand the logic behind, otherwise you will get so many questions.

JS code syntax is about "$('#gridVar001').getControl(row,column).autoNumeric();

You haven't initialize those 2 fields that why no effect on it.
For Grid get started and displayed in 1 empty record/row, then we need initialize the first row:
Code: Select all
$('#gridVar001').getControl(1,1).autoNumeric();    //row 1, column 1
$('#gridVar001').getControl(1,2).autoNumeric();    //row 1, column 2
$('#gridVar001').getControl(1,4).autoNumeric();   //row 1, column 4
For Grid get started and displayed with NO record or NO row, then grid.onAddRow() is enough.. it will do all rows for you
See screenshot for No records like for a grid below:
pm-grid with no record-.png
pm-grid with no record-.png (10.61 KiB) Viewed 2681 times
By hendrick
Hi Kirkwg,
Now I understand.
Thanks..You have been very helpful and I appreciate it. I owe you a glass of beer :D :D :D

We currently have recently upgraded to 3.5.7 and w[…]

Hi everyone, I need your help, I am programming […]

Case History is not opening

Hi....Thnaks for your pormpt replay........your so[…]

Documentos de entrada y formularios

A lo mejor encuentras algo en algún sitio a[…]