Belated Merry Christmas AppGyver commmunity!
I was making an application where I need users to only input numbers, and display the numbers with formats (decimal points, commas). I could have used the function IF(MATCHES_REGEX()) but in my experience, it wasn’t as flexible as I hoped it would be (ie input box to automatically delete wrong inputs)… I will create a separate forum for the formula if you guys wish, but I got to say, this does not do well with decimal numbers.
This topic will only handle the first part of this component. The second part of this component will be published once I get to finish writing it…
The share token for this component is: custom-0f4a3a09-c908-4bbd-9ffb-9370ecb0a81b
And this goes hand in hand with Display Input: custom-a7d7d545-d97f-4584-a17b-1e30204f1d3e
BASIC SET UP
In an empty page with all padding cleared and stretched to viewport height, bring your installed numberpad onto it:
and set the height to 50% under the Layout tab > Width and Height as shown above.
Next, on the Properties tab, there is a list of selectables property:
This is where you decide on the list of acceptable number formats. Let’s say that you want users to input 1) a dollar formatted number 2) a yen formatted number and 3) a number with 10^-8.
You will create a list as following:
Then bring in the Display input component onto page:
Under Properties > “input_whole”, click on the static (box with abc) to change it to Component Properties > Another Component’s Property or Output Value > Numberpad 1 > Numberpad 1 (Balance Whole Number).
For “input_decimal”, click on the static (box with abc) to change it to Component Properties > Another Component’s Property or Output Value > Numberpad 1 > Numberpad 1 (Balance Decimal Number). It should look something like this:
Again, for “selectedcurrency”, click on the static (box with abc) to change it to Component Properties > Another Component’s Property or Output Value > Numberpad 1 > Numberpad 1 (selectedcurrency).
For “decimal”, click on the static (box with abc) to change it to Component Properties > Another Component’s Property or Output Value > Numberpad 1 > Numberpad 1 (BalanceDecimalpoint). It should look like this:
Lastly, under Advanced Properties, find “description” and delete the static placeholder “balance”.
Click save and now you have 1) a number pad that restricts user’s input of decimal places for multiple cases and 2) an input that accepts only integers without the need of input mask and formats it automatically.
Let me know if there’s a room for improvement or bugs!