Prototyping with Axure • Part 5 - Padding a number!

This is part 5 in a series, you can read part 1 here or check the whole series.

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:

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!

This is part 5 in a series, you can read part 1 here or check the whole series. More is coming!