Show whitespace at regular intervals

Ask us anything How do I?
1

Hello everyone,

I have a collection list with lots ok IBAN,displayed, and in order to make it easier to read I would like to insert whitespaces between every sequence of 4 characters.

Instead of having a long string with the characters close to each other, I would like to have blocks of 4 characters separated with a small space.

I would also like to do the same thing in an input field : when the user types, each block of 4 characters is separated with a space.

Does anyone knows if this is possible ?

Thanks for your help.

Flycode

2

Use the mask input element, you can set up your own mask there.

3

(yourstring.match(/.{1,4}/g) || []).join(" ")

4

Thanks for your help.

For the input field this is exactly what I needed, thank you Robert.

@dorilama, I am not sure where I should add this javascript code in order to format the data retrieved from the collection list ?

Also I would sometimes need to have 5 sequences of 4 characters and at the end only two characters.

5

bind dynamic data to your text. You can also create a formula and reuse it when you bind the dynamic data. Change the regex to get 5 chars instead of 4.

6

It works perfectly thank you ! I didn’t know that I could enter javascript directly as formula !

1 Like
7

Yes, you can also change a mask depending on a condition.

8

Ok I still need to optimize this a little bit to get the desired result.

I want my string to show spaces between each 4 characters, but when a user selects and copies that string, I don’t want the whitespace to be copied.

I tried to use a non breaking space instead of a whitespace ( ) but still when I copy the result, it copies the whitespace with it.

Not sure how I can achieve that ?

Thank you again.

9

A text is a text, if you select and copy that’s what you get. If you want to show a string but copy another string then you need to add a workflow on click that copies the string you want (and show something to notify the user that the data was copied). There is plenty of resources on how to interact with the clipboard (e.g. this and this)