Formatting Number With Leading Zeros (Zero-Padding)

Tips
1

I needed to format a number with leading zeros, and since the topic has come up a few times on the forum, I thought I’d point to a few techniques as well as offer another variation.

Proposed solutions typically involved using regex or “dummy” elements. Here are a few threads:

My approach is most like the last one but does not require any “dummy” elements. Basically, it leverages Bubble’s automatic type conversion when concatenating string literals and numbers within a dynamic expression, and then simply truncates the result to the desired number of characters, thereby preserving only the last portion of the resulting string.

The annoying part is that, for reasons which aren’t clear to me, not all dynamic expression fields within the Bubble editor allow combining string literals with dynamic values. Those that don’t, however, typically DO have a boolean (yes/no) operation available in the list (e.g. “Is development version” or “is not empty”); and the fields for entering the “Formatting for yes/no” DO allow joining string literals with numbers.

So for instance, the following illustrates how one could read a numeric value from a state of type “number” and then set a state of type “text” to the formatted output…

16%20AM
16%20AM1442×1260 122 KB

If the value of the “raw_number” state was 37, this would yield the text string “0000037”. No regex and no dummy elements needed!

Needless to say, none of this hoop jumping would be necessary with better built-in number formatting.

Anyway, a very useful technique for circumventing one of Bubble’s idiosyncrasies. Hope it’s helpful.

Thanks to @JohnMark for the tip about the boolean formatting approach!

19 Likes
2

Thanks @sudsy for another helpful post!

1 Like
3

image
image873×454 35.7 KB

2 Likes
4

This is genius! Thanks a lot for that.

5

This helped a lot! Thank you very much!

6

Maybe a silly question depending on the use case:
Why not store the number as normal then just pad it with zero’s at output time via UI constructs?
John

7

I’m a bit confused since that’s exactly what this tip does. The number is stored as a number type and then converted to a string with leading zeros for output / display.

The :formatted as operator for numbers (which also converts the number to a string) does not support leading zeros - hence the need for a work-around.

8

Sorry I did not pick up on that… when I left pad numbers with zero’s for output I simply do (for example):
Arbitrary text - append - number - truncated from end to 5.
Where Arbitrary text = “0000”.
John

9

Yes, it’s basically the same thing (conceptually), but please note that the initial post here was made over 3 years ago when there was no Arbitrary text operator - hence the additional shenanigans.

I do something similar now as well. My practices are constantly evolving with the Bubble platform.

Of course, the best solution for this particular problem would be for Bubble to support leading zeros when formatting a number. :slightly_smiling_face:

1 Like
10

Hi, I actually liked your 3 year old approach; even though bubble evolves and we adapt.
I thought it was very creative, and I always enjoy different approaches to problems because you never quite know when collectively we will stumble on that one moment of genius. Hope you did not consider my posts as being critical, I just enjoy interacting with others on the forum. I always learn something.
All the best, John

1 Like
11

Brilliant! Solved in a moment. Many thanks!

12

Just a quick addendum to this years-old post…

Since that reply was written, Bubble has introduced the Arbitrary text operator, so it can now be used for concatenation (instead of using a Boolean expression), thereby further simplifying the expression.

1 Like
13

This is a great method, I love these bubble-native little tricks.
What i’ve been using so out for this is

Number / 10^(desired number of digits):formatted as text:find and replace “.” with “”

This essentially creates a decimal eg
0.0000582 and then removes the decimal point eg 00000582

1 Like
14

Yeah, I’ve done something similar to format an hour value (to get a leading zero for 24-hour mode) for a custom time picker, as noted in this post. :+1:

1 Like