If you would like to apply responsive formatting to your numeric values on forms, check out this method of doing so. This method will apply a comma as a thousands delimiter as well as a decimal place to your numeric values as a user types on the form.
The first step you will want to do to implement this method is to add the following line to your app’s footer code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/inputmask/4.0.9/jquery.inputmask.bundle.min.js"></script>
Next, you’ll set up your data structure to support this method. You must use a text field on the form to apply the formatting so you’ll want to have one text field, and then if you would like to use the value for numeric functions in your app, you will also want to have one number field. In the end, both fields will hold the same value so if you don’t need to perform calculations on the value, no need to add the number field.
Once you have configured your fields, add the form to your page with the text field on the form. Before proceeding, edit the field on the form and configure a CSS class for the field. We’ll reference this in the next step.
Before proceeding, please take note of the component ID for the form you would like to apply the formatting to. You can find the component ID by hovering over the info icon in the page builder.
Next, apply the following JavaScript code to your page:
TB.render('component_4', function(data){
data.ele.find('.val input').inputmask({
'alias': 'decimal',
'groupSeparator': ',',
'autoGroup': true,
'digits': 2,
'digitsOptional': false,
'placeholder': '0.00'
});
});
Please be sure to update the component ID and CSS class of your text field in the code accordingly. In my example here, my component ID is component_4 and my field’s CSS class is val.
With the code applied, you can now see the formatting applied to the form on your page. If you would like to save this value to a number type field to be used in further calculations, please continue with the next step. This involves using a table rule and pipe to set the value of the number field based on the text field.
First, ensure that you have the Tadabase Text Utilities pipe installed.
Once the pipe is installed, you’re ready to set up your rule. The pipe will be used to strip the extra characters from the value and then the rule will save the pipe return value to the number field.
The value used for the Actions on the pipe should be set to the following:
replace(‘,’,‘’)
Once this rule is implemented, your numbers will be automatically saved to the number type field and can be used throughout your app for calculation purposes as needed.
