Hello community,
I’m using the Password widget of mappView for my visualization. When clicking on the widget, an alphanumeric widget is automatically opened up, but I would like to use a custom numpad for only-numerical input. I’ve already created the custom numpad widget and it works fine for the NumericInput widget but how can I use it also for the Password widget so the input will be masked?
Thanks and BR
Eugen
Hello Eugen!
The way it looks to me: the password widget has no property for the numPadStyle, so afaik: you can’t… You could try to fake something with a numeric input and a password widget, e.g. put both widgets at the same position, the numeric in front and set the opacity of the numeric input and the font of it to 0, so it’s “invisible” then you bind the input of the numeric input to the password field, so it’ll automatically have the same “digits”?! Haven’t tried it but it could work… Sometimes you have to improvise 
Best regards!
Marcel is right, you have to find some workaround for that. 
if you do so, share with us the way you have used 
Hi Marcel,
thanks for your reponse! Your idea sounds good and should be working . I will check it out and will share my result.
BR
Eugen
Hi all,
I’ve implemented the workaround as Marcel proposed - placing an numeric input widget with 0% opacity in front of my password widget and then binding the numeric input to the password input (with an INT_TO_STRING conversion before) .
This all works quite well except that the numeric input is entered as plain text and not masked as with the password keyboard. So anyone who’s watching somebody’s entering his PIN, will see it as plain text - not really secure.
Our next workaround would be removing the entered value field of the numpad. So nobody (and yourself too) won’t see the entered value. That’s obviously a limitation but maybe it will be accepted by our customer.
Spontaneous idea:
You could try changing the font to one containing only * for each character?!
Like this:
Mind the license though: you should find one with MIT or something like it, because with CC you need to provide attribution… Or you create your own font… I have never done it but it shouldn’t be too hard if you only want one symbol for all characters
You can do that e.g. here + convert otf to ttf.
https://www.glyphrstudio.com/app/
Since you only need numbers, it’s fast, I gave it a shot
PWFont.zip (3.2 KB)
that is interesting idea any volunteer in community to test it?
Hi Marcel,
another great idea, thanks - that didn’t come to my mind
I’ll try it out today and will give you feedback then.
BR
Eugen
Can you please create short Share Info & ideas article with description how to? So we can share it later on with other users
Hm, I guess you don’t need that password widget after all.
Just configure the styles for the NumericInput and the NumPad and your done!
Add font:
Add styles:
<Style id="NumericPassword" xsi:type="widgets.brease.NumericInput"
textColor="#000000"
borderWidth="1px"
borderColor="#DDDDDD"
fontSize="14px"
backColor="#FFFFFF"
fontName="NumericPassword"
activeBackColor="#EBEBEB"
activeTextColor="#555555"
bold="true"
activeBorderColor="transparent"
shadow="1px 1px 8px 0px rgba(5, 112, 193, 0.75)" />
<Style id="NumericPassword" xsi:type="widgets.brease.NumPad"
backColor="#FFFFFF"
fontName="NumericPassword"
borderColor="#3388CC"
showSlider="false"
mouseDownBackColor="#3388CC"
showMinMax="false"
mouseDownTextColor="#FFFFFF"
textColor="#000000" />
Assign styles:
You could create an own NumPad to get rid of the +/- and the .
Best regards,
I’ve now implemented it the same ways as Marcel proposed:
Add the password font and set the property “fontName” of the (custom) NumPad widget to the new font in the style. Then you can select the new style in the numericInput widget and you’re done
@kovarj Marcel’s description is basically the whole HowTo, but I can create a new article.
Thanks a lot!
I know that procedure is quite simple, but if you add some printscreens to it will help a lot
