Sometimes you want to display a number with a leading amount of zeroes. For instance when you make a timer (so you get 12:09 for nine past twelve, instead of 12:9). Or when you want to do a James Bond style countdown:
007 seconds remaining until detonation
This is called padding a number. But how do you do that in Axure?
As always, there are multiple ways. You could create a dynamic panel with 10 states (with the numbers 0,1,2,3,4,5,6,7,8,9) and copy/paste that as often as you need. Or you toy around with repeaters.
But here’s my simple trick to convert any number into a padded number:
[[((This.width) + 100).toString().substr(1,2)]]
You add this in the ‘fx’ part of an action (for instance, the Set text action). I’ll walk you through it:
(This.width)is the number we want to pad. I took the width of the widget, but it can be any number (as long as it’s a whole number, so no1.5)+ 100this gives the amount of 00s we want to add. In this case, we want to add just one.toString()for the next part of the puzzle, we need the number to be no longer a number, but a string. That means Axure cannot do math with it anymore, but it can add non-numerical characters to it (like ‘abc’).substr(1,2)the most cryptic part of all. From the string, we ditch the first character and take only the next two characters. Because we know our number will be 0-99, this is okay
Example: let’s say our number is ‘5’. We add 100 to it: ‘105’. We create a string out of it and remove the first character: “05”.
If you want to add more 00s, you have to change two numbers (the +100 and the last number of the substr). If you want a number with up to 3 zeroes:
[[((This.width) + 10000).toString().substr(1,4)]]
You edit this in the Case Editor (for instance, when you add an onClick to a button):
That’s it for now!