Focal Point
[SOLVED] Automatically add comma's to user input fields

This topic can be found at:
https://forums.informationbuilders.com/eve/forums/a/tpc/f/7971057331/m/9837092096

June 01, 2018, 09:49 AM
Joel Elscott
[SOLVED] Automatically add comma's to user input fields
I'm working on an html page in App Studio, which contains several user input fields that will be passed into the reports as parameters. For the numeric edit boxes, is there a way to automatically add comma's as the user types?

This message has been edited. Last edited by: Joel Elscott,


WebFOCUS 8.2.03
z/OS
June 01, 2018, 11:28 AM
CoolGuy
Not sure on the "as they type" part, but once the value is submitted, you can do some formatting before passing it in Js, or in WF before using it in the fex it was passed to. For what you're wanting, you might check the control's properties panel for something like that. They MIGHT have added something in there. Not sure though.


8.2.02M (production), 8.2.02M (test), Windows 10, all outputs.
June 03, 2018, 05:09 PM
Waz
If you mean formatting numbers, say 123456 will be 123,456, then you can create a keyup function to post format the entry box.


Waz...

Prod:WebFOCUS 7.6.10/8.1.04Upgrade:WebFOCUS 8.2.07OS:LinuxOutputs:HTML, PDF, Excel, PPT
In Focus since 1984
Pity the lost knowledge of an old programmer!

June 04, 2018, 05:42 PM
Hallway
To elaborate a bit on what Waz commented, I tried the following Key Up event and it seemed to work:

 
//Begin function edit1_onkeyup
function edit1_onkeyup(event) {
var eventObject = event ? event : window.event;
var ctrl = eventObject.target ? eventObject.target : eventObject.srcElement;
// TODO: Add your event handler code here

  // skip for arrow keys
  if(event.which >= 37 && event.which <= 40) return;

  // format number
  $(ctrl).val(function(index, value) {
    return value

    //eliminate non-digit characters
    .replace(/\D/g, "")

    //add comma for every group of 3 digits
    .replace(/\B(?=(\d{3})+(?!\d))/g, ",")
    ;
  });

}
//End function edit1_onkeyup
 

This message has been edited. Last edited by: Hallway,


Hallway

 
Prod: 8202M1
Test: 8202M4
Repository:
 
OS:
 
Outputs:
 
 
 
 
June 05, 2018, 06:14 AM
Dave
You should use a textarea instead of a inputbox.

if it's linked to a parameter that accepts multiple value it will add OR between all values entered by the user.

The user can use , or ; of linefeeds.

e.g.
user enters product ids : 789,923874,34,754,3957

FEX recieves : 789 OR 923874 OR 34 OR 754 OR 3957
CODE can be : WHERE PRODUCTID EQ &USER_PRODUCT_IDS

Good luck


_____________________
WF: 8.0.0.9 > going 8.2.0.5
June 05, 2018, 09:28 AM
Joel Elscott
Hallway and Waz - Thanks for the suggestion. I'm still learning JavaScript, but how do you trigger this js function? On a "selection changed" criteria in App Studio? I also would have expected to see a reference to the edit box, like edit1 in this code...how does this piece of code know I'm referring to edit1?

Sorry for the noob questions!

Dave - Thanks for the suggestion, but in this case the user wants a formatted dollar amount with commas, not passing in multiple values.


WebFOCUS 8.2.03
z/OS
June 05, 2018, 02:29 PM
Hallway
All that you need to do is go to the properties panel for the input and click on the events (lightning bolt) to bring up the list of available events. The event that you want is "Key Up." This will run the code every time a key is released on the keyboard while inputting text in the input box. Just click in the cell to the right of "Key Up" and you'll see a grey box with an ellipsis show up on the right. Just click on that ellipsis.

This will bring up the Embedded JavaScript tab of the HTML Canvas. You will see that the first 5 lines and the last two lines of the code I posted above were automatically created by AppStudio.

Then just put in the remaining code and it should work

This message has been edited. Last edited by: Hallway,


Hallway

 
Prod: 8202M1
Test: 8202M4
Repository:
 
OS:
 
Outputs:
 
 
 
 
June 05, 2018, 03:53 PM
Joel Elscott
This worked brilliantly! THANK YOU!


WebFOCUS 8.2.03
z/OS
June 06, 2018, 02:07 PM
Hallway
Excellent. I'm glad I was able to help.


Hallway

 
Prod: 8202M1
Test: 8202M4
Repository:
 
OS:
 
Outputs: