How to format a number input as Currency in USD

[sebaspindu]

I’m using the input number element want to allow user to see it with USD currency format

Also how do you customize the increment amount for the arrows, is to 1 by default but I want to add or decrease by 100

Sebas

[Joyce]

Hi @sebaspindu

Re your first question, it is not possible to display a number input as a currency. We would need a new element to do that. It can be done using JS but it’s very difficult and advanced.

Re your second question, it’s not possible at this time but the product team is aware of your request so will take a look and decide if/when it can be added to the roadmap.

[justifi]

+1 for a new element that displays input numbers/currencies more gracefully.

[aurelie]

We just the release the step parameter for inputs, so your going 100 by 100 is now possible

[Joyce]

[sebaspindu]

Amazing ! trying this out now.

[aeynaud]

You guys are fast, that’s awesome

[sebaspindu]

Hey guys, just tried out it works lke a charm ! My only observation is that you need to set up a Max amount for it to work. So in my case where there is no max value I had to do 100000000000, some people may get confused by this.

Also wanted to to follow up $ currency part of the element wondering if there is any docuemtnation on the javascript work around.

[Joyce]

Thanks @sebaspindu, noted!

Nope, we don’t have documentation on this. We’re exploring the possibility of adding formatting options to the current Number and Amount input elements

[justifi]

Any update on

adding formatting options to the current Number and Amount input elements?

[flo]

Hi @justifi,

I just updated the ready-made element available in the add panel here

Here is how it works, I hope you’ll it:

Let me describe how it is built, so you can customize it yourself.

First, it comes with a variable called editing

This variable is used to conditionally display an element to format the currency and the input to type in the value.

On the container, there are 2 workflows:

On mouse enter, it hides the number element that format the currency and displays the input:

On mouse leave, it hides the input and displays the number element:

Then the elements have the display property bound to the variable. It’s important to use the display property and not the conditional rendering property. Otherwise, the number element and the input would reinitialize, and you would lose the values.

One last thing, the number element is bound to the input value and the currency is bound to the select currency input.

You can find the Number element here , if you wish to display a formatted currency in another use case

Tell us if that helps

[justifi]

!!! that looks like its exactly what I wanted. I will begin replacing the existing currency inputs across my app immediately.

Thank you very much

[ericp]

For some reason when I add the Amount element, it is not including the Formatted currency and Select Currency companion elements. It only places a Label, Number, and Hint elements nested in a Main element. Is this a bug?

[Joyce]

Hi @ericp

It does look like a bug. Let me report it internally and get back to you on this one

[justifi]

@flo

i spent some time trying to implement this auto-formatting input across several forms on my app, but didn’t have much luck.

dragging the element from the Add panel, I was prompted with the “include variables” toggle. Regardless of the selection, the variables were not included. Similarly, no workflows were attached to the element.

Even though they were missing, your instructions were detailed enough that I tried to replicate the functionality .

I immediately found that a global variable (editing) is not an ideal solution for my application - in a form, where you might have a dozen inputs, you must implement a naive solution like juggling editing1, editing2, editing3…editing_n, or have to add a second variable that interacts with the element’s id…among other possible solutions

In any case, the complexity is significantly higher than the other drag-n-drop elements.

I think that this UI component will be easier to achieve if and when WeWeb introduces scoped variables

[luissh84]

Hi @Joyce, It seems that the bug still persists, have you received any feedback about it?

[Joyce]

Hi Luis, the bug is in the queue. Development has not started on it

[luissh84]

thanks for the update @Joyce

[Joyce]

Hi @luissh84, @justifi, @ericp

The Amount element should be fixed now

Don’t hesitate to reach out again if you run into other issues.

[ReadyDev]

I am trying to use this element but I cant find it in the inputs, @Joyce