Ask questions about installing and configuring ProcessMaker 3

Moderator: ArturoRobles

By azirol
#824113
Hi,
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.

Thanks.
Attachments
Claim Request Dynaform.png
Claim Request Dynaform.png (58.26 KiB) Viewed 4839 times
(18.99 KiB) Downloaded 173 times
By hendrick
#828919
Hi Amos,
I followed your recommended link https://www.pmusers.com/index.php/Reformat_numbers_in_grid_to_sum_column 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
#828920
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
http://www.decorplanit.com/plugin/

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:
https://cdn.bootcdn.net/ajax/libs/autonumeric/1.8.8/autoNumeric.js

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()
$('#txt_apAmount').getControl().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(); 
     $('#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');
Attachments
screenshot-autonumeric-1611818914934.png
screenshot-autonumeric-1611818914934.png (25.71 KiB) Viewed 3559 times
By hendrick
#829142
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
#829143
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].setValue("1");
        aNewRow[0].getControl().autoNumeric();    //index 0 = first column field on new row
        //set the background color of the new row to orange:
        aNewRow[0].el.parentNode.parentNode.style.backgroundColor = "orange";
});
Attachments
pm-inputMask-grid-onAddRow-.png
pm-inputMask-grid-onAddRow-.png (18.94 KiB) Viewed 2841 times
By hendrick
#829145
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
#829146
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].el.parentNode.parentNode.style.backgroundColor = "orange";
});

By hendrick
#829150
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').getControl(1,1).autoNumeric();
$("#gridVar001").onAddRow(function(aNewRow, oGrid, rowIndex) {
//aNewRow[0].setValue("1");
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].el.parentNode.parentNode.style.backgroundColor = "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
Cheers
Attachments
process_maker.png
process_maker.png (31.76 KiB) Viewed 2745 times
User avatar
By kirkwg
#829151
Hi,
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:
Attachments
pm-grid with no record-.png
pm-grid with no record-.png (10.61 KiB) Viewed 2742 times
By hendrick
#829153
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
Cheers
SCHEDULER MISSING

Your article is very good I like it. and also ever[…]

Data Loss

Hi, In some cases I have a problem, the data is a[…]

Enabling SQL Server in Windows

All the stuffs here are new things and interesting[…]

Dispose of your financial task misfortunes by pr[…]