Show input mask on input field
in a lesson: Validating data elements i saw input mask for phone number like "( ) - " in a first demo(0:29). How can i create this input mask on field in my own exercise system?
Pegasystems Inc.
SG
What you saw in the video is a slide that had a mock up of a screen validation as an example, not an actual UI generated by Pega. AFAIK, there is no OOTB control that creates an input mask like that.
Pegasystems Inc.
US
Roman
You can add the USPhone Edit-Validate rule to your Phone number property as such:
When you enter the digits 9876543210 in the Phone Number field Pega 7 will automatically convert it to (987) 654-3210.
Hope this helps,
Sean
Pega Academy Support Team
I-Teco
RU
Another solution - user jQuery mask plugin.
1. Save jQuery js file in your rulset. Source https://github.com/igorescobar/jQuery-Mask-Plugin/blob/master/src/jquery.mask.js. Records -> Technical -> Text File -> Create
- Label - JQueryMaskerInput
- Identifier - JQueryMaskerInput
- App Name - webwb
- File Type - js
2. Add to end of new js file (JQueryMaskerInput) mask format(s), for example
$(document).ready(function(){
$('.PhoneNumber input').mask('(000) 000-00-00');
});
3. Include new js file to harness, where section will be used (may be Performe Harness). See Scripts & styles on harness rule.
4. Add to text input field class PhoneNumber.
- Open Setting of Text input field
- Presentation tab
- Advanced Presentation Options
- Set "Cell read-write classes" set value PhoneNumber