Input with Mask

Demo
Backendless

Input with Mask is a component of Backendless UI-Builder designer. This allows you to add input with mask.

Alex Klein
August 30, 2023

Ah ok, yes it works when the JSON is set in definitions AND the mask is set. I guess it’s just a matter of understanding how to use it properly 😀

Alex Klein
June 22, 2023

Lovely component! Wish we could use it… but it doesn’t have the “variant” selector like regular Backendless input components have. All ur components in our app are variant “filled”, it doesn’t seem possible to make this component look and feel the same. Any chance you could add a variant selector and make this UI component work easily with an existing design (taking the same style as other input components do from the theme library, etc)?

Alex Klein
June 23, 2023

👏🏼

Alex Klein
August 29, 2023

Hi guys, finally getting around to checking out this component… but it doesn’t work as advertised. For example, trying “custom definitions of mask with UI Setting property Definitions” using exactly the code you have in your example on the documentation page does nothing. Entering Display Char does nothing. Entering Placeholder Char does nothing. Is it possible your latest version has serious bugs?

Pavlo Stasiv
August 29, 2023

Hi, just tried installing a component from the marketplace and repeating the logic with the "Definitions" from the documentation. Working. Try to install the component again, add it to the page, set the mask for example "###-##-0000" and in "Definitions" set the following JSON:

{

"#": {

"mask": "0",

"displayChar": "#",

"placeholderChar": "_"

}

}

After that it should work.

If it does not work, please create a topic in support and write all the steps with screenshots.

Thanks for the feedback!

Regards, Pavlo

Stanislav Podlesnyi
July 5, 2023

Hi, @alexklein! We are happy to announce that the “Input with mask” component has been updated to the 1.1.0 version and you already can try it.

Happy Codeless Coding!

Alex Klein
August 31, 2023

Still having trouble with this component! For example: I would like to use it in a form, but there seems to be no data binding option for “value”… how to get data/value out of this component? Also, without setting any logic or definitions, the number format seems to be such that only 2 decimal places are allowed, (which is what we want ultimately, but) why/how does this work?

We are trying to create an input field in a form where user can set a price for something. Need

  • a currency symbol (as prefix)

  • no negative prices (so, need to specify a range)

  • value coming from the thing should be a number

But after a lot of time spent studying the documentation and experimenting with this component, I am still not able to get it into the shape we require?! Any chance you could describe what we need to do in these comments?

Alex Klein
August 31, 2023

ok thnx

Marina Kan
August 31, 2023

Hi @Alex Klein, Can I ask you to create a support topic with a description. The component developer will review it.

Viktor Mudrevsky
June 23, 2023

Hi @alexklein

We will add this feature. I have created an internal ticket MARKET-2085 for it.