Display a numeric value in 2 decimal places in a Custom Component?

App Development
1

I can’t display my value to two decimal places in a custom component, does anyone know how to achieve this? I should point out that it displays correctly elsewhere just not within a Custom Component so it’s either a little bug or I need to apply some Javascript or formatting to it in the Custom Component perhaps??

I’m multiplying two values together, a PRICE and an EXCHANGE RATE. For this example the price is 10.00 and the EXCHANGE RATE is 1.3285.

10.00 x 1.3285 = 13.285 and when rounded to 2 decimal places is 13.29. All fields are set to 2 dp.

If I display that same field in a standard table or in HTML it correctly displays it as 13.29 but if I display it in a custom component it display 13.285 (to 3 decimal places).

It I attempt to ROUND() that result in another number formula field it will just truncate that to 13.28 so regardless what I try I can’t get it to be consistent and display 13.29 in a Custom Component.

Any ideas anyone ?

2

Hey @GREDDIE, you can use the built-in Handlebarsjs “toFixed” helper.

Let’s say PRICE is field_1 and EXCHANGE RATE is field_2. We can add the following to a custom component.

{{toFixed (multiply field_1 field_2) 2}}
1 Like
3

Thanks @Chem that’s it, Sorted :+1: thank you !

I’d played with toFixed but my implementation / syntax was wrong, I was trying .toFixed(number, 2)

Thanks again, each mini JS lesson is super helpful, I’ll know in future how to apply handlebar helpers :crossed_fingers:

1 Like
4

One related question if I may…

If I have a Number Formula (Basic Formula) field set to 2 decimal places and it is set to calculate 10.00 * 1.3285 and I have two records with the same value so something like this:
Record Value Rate Result
Record1 10.00 1.3285 13.29
Record2 10.00 1.3285 13.29

and then a parent connected record has a SUM (Complex Formula), also set to 2 decimal places that adds these two results together, what would you expect the SUM to equal ?

26.58

or

26.57?

I’m getting the later, 26.57 which surprised me but I guess this means that despite presenting the number to 2dp it’s actually summing the full number? Is there a method for just summing the 2DP part?

5

The SUM will calculate the actual value that’s in the Database, which is the full number. If you’d like to SUM the 2 decimal place number, you can use a rule to set a number field and then SUM that.

6

Hi @Chem thanks for the reply, I’ll look into setting up these rules as you advise, thanks for the clarity.

So when a number field is configured to be to x decimal places what we are actually saying, is set the display value to x decimal places and not the actual number.

That wasn’t obvious to me especially as I was setting that parameter in the Database Table and not on a display Page or PDF. It might be worth while adding a hint that this is actually what it’s doing, just a thought. Although if that’s obvious to everyone else and that’s how they would expect it to work that’s cool, it’s just me that found this confusing. :smile:

thanks again.

7

Just to close this off and for reference if anyone else experiences any JS decimal place rounding issues.

Surprisingly I found toFixed didn’t always get it right!

For example: 2.005.toFixed(2) = “2.00” and not “2.01” !

So I found that this worked better for me:

(Math.round((YOURNUMBER * 1000)/10)/100).toFixed(2)

with thanks and reference to these posts on StackOverflow

2 Likes
8

Thanks for sharing! @GREDDIE

1 Like