How can I have masks for the input fields in Bonita 7 ?


Hi everyone,

I need to put masks in my input fields, on Bonita 7 forms. How do I do it using the new UI Designer? (Details, please, I am not that good programmer).




Submitted by r torres on Fri, 08/07/2015 - 03:35

Question update. I saw people saying: use JQuery, use CSS. The problems are: JQuery do not have any mask function (it's made using some non-official plugin), and CSS masks are for images only. So, the problem remains. Any comments?


Submitted by Sean McP on Fri, 08/07/2015 - 19:33

What do you mean by Masks? Can you explain exactly what you want as people have answered what you've asked.

jquery and CSS are the appropriate way.

What makes jquery official anyway - popularity? There is nothing wrong with non-official plug-ins it's what makes everything in open source work...


Submitted by r torres on Sun, 08/09/2015 - 19:16


What I meant by masks can be found in "input mask" @ Wikipedia ( and I really thought it was common sense - my mistake. In the new UI Designer I could not get inputs formatted while being typed, and when checking it after typing I was not able to make it affect the $form.$valid expression. May be I am just an old, unfit programmer.

By unofficial, in this context, I meant it didn't came from the product community (and, in fact, there is no community supporting it, just a very smart person who may get bored and dump it overnight). What makes something "official", at least to me, is a community of a hundred keeping a product alive, and yes, a lot of people using it because it is good, not just "free". Opinions about it may differ, of course.


Submitted by Sean McP on Mon, 08/10/2015 - 08:33

Hi, yes, apologies, input masks...

I was just thinking of password style masking. Should expand my knowledge a bit from when I did PL/S on IBM s370...I'm probably older and un-fitter than you...definitely more tired...

I think the way to do it is via Assets in the UI form the documentation seems to have been updated a bit to show how to do it.

It would probably be a good idea to build up a library of them as custom widgets as detailed in the text which you can use constantly.

I like the "unofficial" description, pretty much why I still use windows vs the hundreds of differing flavors of L****x out there. As you say, a small bunch of people think it's better to fork a thing become propriety and slowly it dies away leaving users in the lurch.

Sorry to all L****x people out there :)

Submitted by yannick.lombardi on Mon, 08/10/2015 - 10:56

Hi. I didn't know what an Input Mask was. This is something very interesting. I will use them in some of my form.

I create a simple widget based on this jquery plug-in :

You can download the widget here :

It may serve you as a basis for a more complete widget.

EDIT : I also try to create a widget based on this plug-in :

It offers a lot of possibilities.

Submitted by r torres on Mon, 08/10/2015 - 15:20

Thank you guys,

I'll give all this info a try. But I think of field validation and masks included in field properties, as a feature of UI Designer that should be build, don't you?


Submitted by Sean McP on Mon, 08/10/2015 - 17:35

But I think of field validation and masks included in field properties, as a feature of UI Designer that should be build, don't you?

yes but probably only in subscription versions :)

1 answer


Hi, how can I create a custom widget inside the bonita 7 UI designer (community) using ngmask to mask currency input?