Hi Community,
Can anyone help me figure this out? I'd like to change the masking for telephone column fields in a pop-up form on my page. Putting javascript on the actual page with a form works but in this case that the form is inside a pop up window, my code does not work. What should I do?
Thanks in advance
There is no OOTB ,
Either you can use this else you can write your own
Regards
Suendran Ravindran
Hi @Surendran_R ,
Last question for now. For this to work, I really need to download and insert the plugin into my environment. Will it not work OOTB?
Please do inspect input element and get the id
and Use like this
$("#id").mask()
Note: Most case it is logical name
Regards
Surendran Ravindran
Hi @Surendran_R ,
Understood where to place the Javascript. Question about the code you shared.
$(document).ready(function(){ $('.date').mask('00/00/0000');
The '.date' will be the schema or logical name of the column? Then the mask will then be the masking inside the field. Just confirming if my understanding is correct.
Thanks in advance.
Hi @apangeles ,
https://oliverrodrigues365.com/2020/04/15/power-apps-portals-adding-field-mask/
This might site might helpfull else below script for masking various data types:
$(document).ready(function(){
$('.date').mask('00/00/0000');
$('.time').mask('00:00:00');
$('.date_time').mask('00/00/0000 00:00:00');
$('.cep').mask('00000-000');
$('.phone').mask('0000-0000');
$('.phone_with_ddd').mask('(00) 0000-0000');
$('.phone_us').mask('(000) 000-0000');
$('.mixed').mask('AAA 000-S0S');
$('.cpf').mask('000.000.000-00', {reverse: true});
$('.cnpj').mask('00.000.000/0000-00', {reverse: true});
$('.money').mask('000.000.000.000.000,00', {reverse: true});
$('.money2').mask("#.##0,00", {reverse: true});
$('.ip_address').mask('0ZZ.0ZZ.0ZZ.0ZZ', {
translation: {
'Z': {
pattern: /[0-9]/, optional: true
}
}
});
$('.ip_address').mask('099.099.099.099');
$('.percent').mask('##0,00%', {reverse: true});
$('.clear-if-not-match').mask("00/00/0000", {clearIfNotMatch: true});
$('.placeholder').mask("00/00/0000", {placeholder: "__/__/____"});
$('.fallback').mask("00r00r0000", {
translation: {
'r': {
pattern: /[\/]/,
fallback: '/'
},
placeholder: "__/__/____"
}
});
$('.selectonfocus').mask("00/00/0000", {selectOnFocus: true});
});
Regards
Surendran Ravindran
--------------------------------------------------------------------------------------
Hope that helps.
Hi @apangeles ,
As @Fubar mentioned , you need the javascript in portal management --> Basic form ---> Additional Setting (Scroll Down) --> Custom javascript (add the code here with document ready)
Regards
Surendran Ravindran
--------------------------
--------------------------------------------------------------------------------------
Hope that helps.
If the post solves your problem, please mark it as solution. If it helps, consider a thumbs up.
Hi @Fubar,
Does this work? I just generated this using AI.
$(document).ready(function () {
// Replace masking text with custom details
$('#telephone1').attr('placeholder', 'Include country code (e.g. +63 9171110000)');
$('#mobilephone').attr('placeholder', 'Include country code (e.g. +63 9171110000)');
});
Or...
$(document).ready(function () {
// Identify all mobile phone fields regardless of form or table
var mobileFields1 = $('[data-attribute="sportal_MobilePhone"]');
var mobileFields2 = $('[data-attribute="sportal_MobilePhone2"]');
var telephone = $('[data-attribute="sportal_Telephone"]');
// Replace placeholder text for each field
mobileFields1.each(function () {
$(this).attr('placeholder', 'Include country code (e.g. +63 9171110000)');
});
mobileFields2.each(function () {
$(this).attr('placeholder', 'Include country code (e.g. +63 9171110000)');
});
telephone.each(function () {
$(this).attr('placeholder', 'Include country code (e.g. +63 9171110000)');
});
});
Edit the Form using the Portal/Power Pages Management App (not the designer). The Basic Form definition has an "Additional Settings" Tab which has an area for you to add Custom JavaScript for the form.
WarrenBelz
9
Most Valuable Professional
Fubar
6
Super User 2025 Season 1
Rondel
6