Formatting the result of a sum in currency format

I’m creating a cart page where users can select or unselect products. The product I’m working with is a Loan credit, so all the numbers are in currency format. Is there any way to format the sum is currency format? For example:

Product 1 - R$ 12.000,00
Product 2 - R$ 4.000,00

Expected SUM: R$ 16.000,00

Instead, when I use the formula [[Product1Value + Product2Value]], the result I have is 12.000,004.000,00

PS: I’m using the brazilian currency wich is formatted like this: 1.2000,00 (Point + Comma)

Any ideas?

cart.rp (54.7 KB)

@vctrtdms

hope this is what you need :smiley:

com-video-to-gif%20(1)

cart.rp (54.1 KB)

1 Like

That’s exactly what I need. You nailed it! However, when I get your code, I don’t know which part I should change to replicate the logic to other fields I’m also showing currency. This only works well when I copy and paste the text field from your file.

  • In the cart page I’m showing currency in the total sum;
  • I can also enter the product detail page and change its value, so the new value also has to be formatted in currency;

Can you help me? I’m sorry, I’m still learning this advanced stuff.

@vctrtdms Sorry for not explaining in details

Personally I think there is no easy native way to achieve the customized currency formatting, so I went with the Javascript way. I guess you’ve also found that piece of code in my file, so it’s basically I call a Javascript function to format the number after it completes its calculation

In terms of your project, I can see in general 3 places requiring currency formatting. And all of these need to call the same javascript function with different input numbers

  • Credit of each product - OnPageLoad to initialize the format
  • Sum of selected products - OnSelected / OnUnSelected to re-format
  • User input credit - Dynamic panel (Plain Label state when complete editing; Edit Text field state when back to edit) OnLostFocus to change state and format the number in plain label state

I attach the Javascript function to a hotspot - OnClick event, so I can simply “Fire Event” when I need it. The javascript code goes like below

javascript:
var a = []; // for storing temp array
var i = 3; // put period every 3 digits
var ss = document.getElementById('cache1').innerText; // cache1 is the id of the widget in the HTML
var s = ss.split("").reverse().join(""); // reverse the string, for example, 3000.00 -> 00.0003
do{ a.push(s.substring(0, i)) } // a loop to split the string into groups, each with a length of 3, so 00.0003 -> ["00.", "000", "3"]
while( (s = s.substring(i, s.length)) != "" );
xx=a.join(".").split("").reverse().join("").replace("..",","); // use period to join the array, then reverse the string, then replace .. with comma, so ["00.", "000", "3"] -> 3.000,00
document.getElementById('cache1').innerText = xx; // set the new formatted number to the desired widget
void(0); // exit function normally

Then the last question: how to find the id of the desired widget in the HTML => right click on the webpage, click Inspect, select the widget, the name shown in the “id” field of the HTML code is what you need

1 Like

If you’re going the JS route I would not use the element ID directly like that, as simply re-ordering widgets can change the ID. Instead give the widget a name and use AxQuery to get the ID or the element directly:

var id = $axure('@widgetName').getChildren()[0].id //this depends on the widgets DOM structure
document.getElementById(id)

Or since jQuery is included with Axure and you know the DOM in advance, you could do:

$('[data-label=Total] span').attr('id')

Or even:

document.querySelector('[data-label=Total] span').id

Great tip @nkrisc!
Should I put this code in the OnPageLoad event? And in what action?

Go with what @steven.wang posted, it’s good. I was just suggesting a modification to the code to make it less fragile if you change stuff in the file.

Thank you for your help @steven.wang! Now I could edit the code and it’s working well :slight_smile:

This problem is already happening when I share the prototype to axshare or even when I resize the chrome window. Can you help me? How can I name the widgets? I didn’t understand the code you posted before.

Hi!

You can do this without Javascript using Axure’s own string manipulation functions, as well as its function toLocaleString (using the Brazilian locale), which also adds the thousands separators. I put comments in the code, which is in the hotspot.

Most of Axure’s functions (such as replace function) simply mirror javascript functions of the same name, so for example you can google “javascript replace” to find out how the replace function works.

convert_currency_rp8.rp (56.1 KB)

1 Like

Hi again!

Here’s the same technique implemented in a repeater, which will make things easy if you have lots of products. Just add a new row with the product name and the price and it will be included in the sum.

You’ll need to understand how exactly how the repeater’s OnItemLoad event works, so I recommend this article on Medium.

Preview

File: repeater_convert_currency_rp8.rp (66.3 KB)

1 Like

Hey @josephxbrick thanks for helping!
The complexity is that the products values can be edited:

  • Product 1 can be edited in a text field in another page;
  • Product 2 can be edited in a text field in another page;
  • Product 3 can be changed by selecting or unselecting 2 checkboxes in another page;

If users change any of this values, they have to be redirected to the cart page with the sum updated. Do you know how can I manage that? I’m using your solution already:

cart2.rp (324.0 KB)

Hi!

That shouldn’t be a problem (though it would provide difficulty to the repeater example I just posted.)

Whenever a value is set on another page, you need to use global variables. So set up a global variable with each price, giving each a default value for the default price. OnPageLoad of the cart page, do this (pseudo-code below)

OnPageLoad
  set text of label product1price to globalVariable1
  set text of label product2price to globalVariable2
  set text of label product3price to globalVariable3
  (set selected of the checkboxes to their desired states)
  move hotspot function_sum

Then, on these other pages where you modify the price, make sure you update the global variable. So if, for instance, the user types a new value into the field on another page, you’d add this code to the text field:

OnTextChange (of the field product1price)
  set value of global variable globalVariable1 to text on This
1 Like

I just did it and it worked very well! I have three simple details to fix now:

I just did it and it worked very well! I have three simple details to fix now:

  • When I show the new value of the product in the product line at the cart page, how can I format that value to currency like the total sum?
  • In the product detail page, how can I format the number user is typing to the currency format, also like the sum?
  • Is there a way to save the total sum in a global variable already formatted in currency so I can show this value in another page?

The prototype below:

cart2.rp (327.3 KB)

Hi!

You might find this useful. Basically this is a “function” that receives as an input a decimal number (in US format) and outputs the currency version. You can set up each field to automatically format its associated global variable when it loads.

Preview

File: convert_format_function.rp (120.6 KB)

1 Like

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.