Hi,

I'm looking for help to make coma in input field without forge component, if I input 12000 then the coma should be like 120,000.

if 1000 should be 1,000 . if 1000000000 = 1,000,000,000

Thanks

Hi Ayu Andini,

If you used Data Grid, you should set data type is Integer or Decimal or Currency, you can get comma.

Regards,

If is Amount, you should set Data type is Currency,


And when input 1000 >> $1,000.00


Hi Ayu,

I don't think you will be able to do it for input widget without any forge component or JS. I woud suggest you to use any of the below forge component to do this

https://www.outsystems.com/forge/component-overview/2258/input-masks-library

https://www.outsystems.com/forge/component-overview/647/custom-input-masks

Ayu Andini wrote:


Hi,

I'm looking for help to make coma in input field without forge component, if I input 12000 then the coma should be like 120,000.

if 1000 should be 1,000 . if 1000000000 = 1,000,000,000

Thanks


Hello Ayu Andini,

I have added javascript code for this.

Add class to button
In Logic->HttpRequestHandler Add Runjavascript to add your javascript code . In screen I have added Textbox and Button and on button click I have added Screen action ,In screen action Drag and drop Your added Runjavascript file.


Add RunJavaScript File here by rightclicking on HttpRequestHandler and add component :

Then Add this RunJavascript File to the Button Click screen action(or anywhere you want) and add this code:

SyntaxEditor Code Snippet

var jobValue = document.getElementsByClassName('testing');
var value = Number((jobValue[0].value)).toLocaleString();
document.getElementsByClassName('testing')[0].value = '';
document.getElementsByClassName('testing')[0].value = value;



It will Help

Regards,

Tanvi

Hi Ayu Andini,

If you want immediate change then try this script on keyup


function checkId(id){
    var costs = document.getElementById(id).value;    
    var costs = costs.replace(/,/g, '');     
    var cost = costs.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    document.getElementById(id).value = cost;
    return true;
}

 for this make input variable as text and call 'checkId()' javascript function on keyup with input widget id.


Hope this will help you

Regards,

Poonam Verma

Hi Ayu Andini,

You can make use of jquery function. Please the sample code below. You need to add a class 'MyCurrency' to you input value to enable the formating . Find the sample oml file in the attachment

SyntaxEditor Code Snippet

$(document).ready(function(){
function ReplaceNumberWithCommas(yourNumber) {
    //Seperates the components of the number
    var components = yourNumber.toString().split(".");
    //Comma-fies the first part
    components [0] = components [0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    //Combines the two sections
    return components.join(".");
}
$('.MyCurrency').val(ReplaceNumberWithCommas($('.MyCurrency').val()));
});


Thanks and Happy Coding :)

pranav pandey wrote:

Hi Ayu Andini,

You can make use of jquery function. Please the sample code below. You need to add a class 'MyCurrency' to you input value to enable the formating . Find the sample oml file in the attachment

SyntaxEditor Code Snippet

$(document).ready(function(){
function ReplaceNumberWithCommas(yourNumber) {
    //Seperates the components of the number
    var components = yourNumber.toString().split(".");
    //Comma-fies the first part
    components [0] = components [0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    //Combines the two sections
    return components.join(".");
}
$('.MyCurrency').val(ReplaceNumberWithCommas($('.MyCurrency').val()));
});


Thanks and Happy Coding :)

Hi Ayu Andini,

Please find the updated code. Here I have implemented the below logic.

1. The text will be formatted as currency when the page loads.

2. On focus, the comma will be removed so that you can update the value.

3. On focus remove, The comma will appear again automatically.

You just need to add the class '"MyCurrency" to the textbox. Please see the updated query below. Also, find the updated oml in the attachment.

SyntaxEditor Code Snippet

$(document).ready(function(){
//FormatCurrency
function ReplaceNumberWithCommas(yourNumber) {
    //Seperates the components of the number
    var components = yourNumber.toString().split(".");
    //Comma-fies the first part
    components [0] = components [0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    //Combines the two sections
    return components.join(".");
}
//Remove Comma
function RemoveComma(yourNumber){   
    var str = yourNumber.replace(",", "");
    return str;
}
//OnLoad
$('.MyCurrency').val(ReplaceNumberWithCommas($('.MyCurrency').val()));

//OnFocus
$(".MyCurrency").focusin(function(){
    var str = $(this).val();
    $(this).val(RemoveComma(str));
});
//OnFocus Out
$(".MyCurrency").focusout(function(){
    var str = $(this).val();
    $(this).val(ReplaceNumberWithCommas(str));
});

//End Of Main Function
});


I hope this will resolve your issue.


Thanks.

pranav pandey wrote:

pranav pandey wrote:

Hi Ayu Andini,

You can make use of jquery function. Please the sample code below. You need to add a class 'MyCurrency' to you input value to enable the formating . Find the sample oml file in the attachment

SyntaxEditor Code Snippet

$(document).ready(function(){
function ReplaceNumberWithCommas(yourNumber) {
    //Seperates the components of the number
    var components = yourNumber.toString().split(".");
    //Comma-fies the first part
    components [0] = components [0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    //Combines the two sections
    return components.join(".");
}
$('.MyCurrency').val(ReplaceNumberWithCommas($('.MyCurrency').val()));
});


Thanks and Happy Coding :)

Hi Ayu Andini,

Please find the updated code. Here I have implemented the below logic.

1. The text will be formatted as currency when the page loads.

2. On focus, the comma will be removed so that you can update the value.

3. On focus remove, The comma will appear again automatically.

You just need to add the class '"MyCurrency" to the textbox. Please see the updated query below. Also, find the updated oml in the attachment.

SyntaxEditor Code Snippet

$(document).ready(function(){
//FormatCurrency
function ReplaceNumberWithCommas(yourNumber) {
    //Seperates the components of the number
    var components = yourNumber.toString().split(".");
    //Comma-fies the first part
    components [0] = components [0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    //Combines the two sections
    return components.join(".");
}
//Remove Comma
function RemoveComma(yourNumber){   
    var str = yourNumber.replace(",", "");
    return str;
}
//OnLoad
$('.MyCurrency').val(ReplaceNumberWithCommas($('.MyCurrency').val()));

//OnFocus
$(".MyCurrency").focusin(function(){
    var str = $(this).val();
    $(this).val(RemoveComma(str));
});
//OnFocus Out
$(".MyCurrency").focusout(function(){
    var str = $(this).val();
    $(this).val(ReplaceNumberWithCommas(str));
});

//End Of Main Function
});


I hope this will resolve your issue.


Thanks.

Hi Ayu Andini,

Adding to pranav pandey solution, you need to replace all the comma. So you need to use 

SyntaxEditor Code Snippet

var str = yourNumber.replace(/,/g, '');

instead of 

 var str = yourNumber.replace(",", ""); in the remove comma function 


Regards,

S.Ellakkiya