[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

Posts: 66 | Registered: May 20, 2013

CoolGuy

Virtuoso

posted

Hide Post

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.

Posts: 1113 | Location: USA | Registered: January 27, 2015

Ignored post by CoolGuy posted

Show Post

Waz

Expert

posted

Hide Post

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.04	Upgrade:	WebFOCUS 8.2.07	OS:	Linux	Outputs:	HTML, PDF, Excel, PPT
In Focus since 1984
Pity the lost knowledge of an old programmer!

Posts: 6347 | Location: 33°49'23.0"S, 151°11'41.0"E | Registered: October 31, 2006

Ignored post by Waz posted

Show Post

Hallway

Master

posted

Hide Post

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:

Posts: 608 | Location: Salt Lake City, UT, USA | Registered: November 18, 2015

Ignored post by Hallway posted

Show Post

Dave

Master

posted

Hide Post

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

Posts: 668 | Location: Veghel, The Netherlands | Registered: February 16, 2010

Ignored post by Dave posted

Show Post

Joel Elscott

Gold member

posted

Hide Post

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

Posts: 66 | Registered: May 20, 2013

Ignored post by Joel Elscott posted

Show Post

Hallway

Master

posted

Hide Post

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