Number masking / formatting for form input (again)

Hello,

Anyone (Retool team?) have any recommendations on how I can do number masking / formatting for an input on a form? I saw this but this did look quite tricky, particularly to scale across say 20 fields. My developer skills are rusty, My skills are mainly SQL and I’m picking up js as I go along.

I can do this in my query so, for instance, a percent value (0.05) is returned as a string (5.0%), but that gives me a complex task on update. Even more so if I want to use a number format like (1,000,000.55)

Are there any standard javascript libraries / snippets you could recommend?

One option I have considered (ugly but functional easy code to read and maintain) is to return both unformatted and formatted versions in my SQL, and put the two fields side-by-side (raw and formatted) in the form.

However the issue with any approach (either edit in cell, or using two cells) is how then to get the formatted version to re-display. I would not want to automatically update the db and refresh the query on every cell change.

My preference would be some kind of js which enabled the form fields to work like formatted fields in the table, that show the formatted value, but on edit, reveal the raw, unformatted value.

Help?

Many thanks
Dominic

Hey @domjammoo! Welcome to the community and thanks for the detailed post. One thing to note off the bat: Retool ships with numbro by default, so you can use any of their nice functions for formatting.

Formatting should definitely be done client side, you’re correct. The textinput component has a bunch of HTML5-based built in types, like text, numbers, and currency - when you reference {{ textinput.value }} you get the raw value, not the formatted one (that would be .formattedValue). So this would match your req of getting the raw value on edit.

Does that make sense? I’m guessing your formatting requirements are beyond what we natively offer, which is the issue.

Reviving this topic...

I often use Cleave.js to mask input as they are being edited, but I think the sandbox is preventing to access inputs in html. There is a way to workaround this behavior?

What I am trying to do is preload "https://cdnjs.cloudflare.com/ajax/libs/cleave.js/1.6.0/cleave.min.js" and add this type of custom script:

// must class "input-phone" in the input
const selector = '.input-phone input';
const phoneFormatter = {
  delimiters: ['(', ')', '-'],
  blocks: [0, 2, 5, 4],
  numericOnly: true,
  delimiterLazyShow: true,
};
const inputElement = document.querySelector(input.selector);
new Cleave(inputElement, phoneFormatter);

However, inputElement is null.

I've did some extra research here and I think this can be done using Custom Components... am I right?

https://docs.retool.com/docs/custom-react-components

1 Like

Hi @jrvidotti, it looks like you're on the right path! Typically the document object isn't accessible in normal JS queries and scripts since our JavaScript runs in a sandboxed environment. However, it looks like cleave will work with custom components: