Forum Academy Marketplace Showcase Pricing Features

New Input Formatter Video Tutorial 📺 - Toolit Kit Plugin

Hey All,

New video tutorial on how to set up and use the new input formatter element that’s available in the Toolit Kit plugin

This new format allows advanced custom formatting of input fields compared to other plugins that are available in the plugin store. The two areas that make this a better choice are

  • Custom options that are inline with cleave.js
  • More robust code that allows inputs to be formatted even when the element is not yet available on the page. For example when used in a hidden group or reusable element. The plugin actually watches the DOM for the element until it appears. So fewer errors :blush:.

Check out the video here and subscribe & Like :pleading_face:

11 Likes

@AliFarahat I am curious if there may be a way to fix a couple of issues I am having with the plugin or the input element

  1. When a user clicks into the input element the first time, the prefix becomes visible as expected, however, if the user clicks into the input element and doesn’t enter any characters and then clicks out of the input, the prefix is removed from site and a place holder becomes visible instead.

  2. When the placeholder is visible and not the prefix, as the user clicks into the input element again, a dropdown pre-selection comes up that really has nothing to do with the type of input as far as I can tell. Is there a way to stop the pre-selection dropdown from showing?

  3. When the prefix is not visible because of what is described in question 1 above, in order for the prefix to become visible again, the user has to enter a character, such as a number or letter, for the prefix to become visible, however, the typed character is not actually present. Is there a way, if question 1 is not possible to be resolved, to make it so that when the input is focused again the prefix becomes visible again and no characters are required to be entered for the prefix to be visible?

  4. When a user selects the entire input value, which includes the prefix, and then deletes, nothing happens, however if they only select the characters inputted after the prefix the characters are deleted. Is there a way to make it so the characters entered after the prefix are deleted when the user selects the entire input value including prefix and then only the prefix would remain?

Cheers

inputformatter2

https://bubble.io/page?type=page&name=input_formatter_toolit&id=blurimagesdirectly&tab=tabs-1

Hi @AliFarahat

I’m using your plugin to change the currency input format. At the moment the bubble currency input only has the following format: €1,600.50. The euro currency in France, Belgium and other countries should be shown like this: € 1.600,50 (inverted , and .). I managed to do it with your plugin but I’m having difficulties with the output.

I need the output as a number (eg. 1600.50) but if I choose output number I only get 1 while if I choose the raw value I get the right number but it’s in text.

What are the options please?

Hey @steve5

Seems like something is wrong. Can you please share the confirguration your using so I. An test it here?

Here you go…

Well if you can copy the options and past here that would help alot. I also noticed you set the input as an integer. It should be text. Can you try that first

Hi @AliFarahat Just wondering if you have any feedback on the post from above? I can’t seem to fix those issues outlined.

Cheers

Hi @AliFarahat, I was wondering if you can help me with this. In am using your Input Formatter plugin in order to overcome the standard input limitation on European number formatting. We use a . delimiter for thousands and a , delimiter for decimals. As shown in the following image, there is an input (formatted as text, but I also tried with decimals or integer) and the formatter referred to this input ID. In the formatter options the json (taken from the cleave.js project) is this

{
“numeral”: true,
“numeralDecimalMark”: “,”,
“delimiter”: “.”
}

The input per se works fine. But for some reason the Input Formatter results ignore the decimals. This means that when I save the input via the formatter, the number is wrong because the lack of decimals. There is also another issue: when you type more then 6 digits the results are changing in a quite weird way (typing the 7th digit, results show 4 digits only and then again on multiple of 6).

Schermata 2020-03-30 alle 12.32.47

Since I just started a kind of accounting project, this feature is absolutely essential to the all project and I must absolutely rely on it. Can you please take a look at this ? I really appreciate your help.

Hey @stefanof

Just replied in a PM

Amazing, thanks a lot Ali ! That helped big time.

Just a quick note: it doesn’t seem to work with text (numbers only), couldn’t figure out why at first. I used integer instead and it works like a charm :+1:

Hi @AliFarahat

is it possible to use your plugin on repeating group ? (So the Element ID can be set dynamically ?)

Regards,
Tomek

Hello @tomasz.wieczorek,

The short answer is no. But then again, i never really tested it. Are you looking to make the ID as dynamic. I can certainly convert that for you so you can try it.

@AliFarahat well this is quite important when working with repeating groups - which in my case is mass data upload where I want to make sure that all fields are nice & clean.

So what I need is the capability to fill the ID dynamically so each table row gets it’s own verification. If you can provide something for testing I will gladly check it.

There is also one additional plugin called Input Mask 2.0 which does support dynamic ID but it’s a bit unstable and doesn’t work at all when used togheter with hidden element.

It’s dynamic now. Let me know how it goes

Ali Farahat
Co-Founder

TheUpstarters.com

@AliFarahat

Is there any plugin publishing time? (Plugin v is 10.0.1)

image

I can’t add dynamic data to ID yet.

Refresh the app editor to see the latest version

Ali Farahat
Co-Founder

TheUpstarters.com

Ok this is what happens when you bubble to much :smiley:.

I tested the plugin but it doesn’t seem to work properly and it’s copying the data across each input within the given column. So it “feels” like it doesn’t verify the dynamic value properly :frowning:

This is too complex to solve over the forum. I just DM my calendar link. Book a time and I will be happy to help you.

Dear AliFarahat,
Thanks For this very relevant content. However I can’t get use the Input Formatter in a PopUp’s field. Could you help me on this matter?

André from Brazil.

Send me a DM with the doctor link so I can have a look