· 338 words · 2 minute read

Prototyping with Axure • Part 5 - Padding a number!

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 no 1.5)
  • + 100 this 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):

Screenshot of the Case Editor

That’s it for now!