How to format the phone number in a text input

(0) Share

Report

Posted on by patty789

250

Hello,

I been researching on how to format the phone number when a user is typing it on a powerapp in a text input.

however i have not found a formula that works. Any help will be much appreciated.

Categories:

Building Power Apps

I have the same question (0)

All responses (10)

Answers (1)

Pstork1 68,717 Most Valuable Professional on at

Like (0)

Report

There really isn't a way to validate the entry while they are typing it. But you could use IsMatch() to apply a regex expression to it after they finish entering to see whether its a phone number or not. Then highlight the box and reveal an error message if it isn't. That wasn't what you were asking for, but I think its as close as you will get.

-------------------------------------------------------------------------
If I have answered your question, please mark your post as Solved.
If you like my response, please give it a Thumbs Up.

Was this reply helpful? Yes No
v-xida-msft on at

Like (2)

Report
Hi @patty789 ,

Do you want to format the phone number within a text box?

Currently, there is no functions supported to format a phone number within a text box within PowerApps.

As an alternative solution, you could consider check if the number you entered within the Text box matches a phone number (force you enter a Phone number into the Text box).

The user @shabila97 has faced a similar issue with you, please check my response within the following thread:

https://powerusers.microsoft.com/t5/General-Discussion/Validate-telephone-number/m-p/260211

Set the OnChange property of the Text Input box (TextInput1) to following:

If( Not(IsMatch(TextInput1.Text, "\d{10}")) && !IsBlank(TextInput1.Text), Notify("The Phone number you typed is not valid, please re-type again. The format is xxxxxxxxxx", NotificationType.Error); Reset(TextInput1) )

You could also consider make the border color of the Text Input as Red when typing a invalid phone number using the following formula:

Set the BorderColor property of the Text Input box to following:

If(
Not(IsMatch(TextInput1.Text, "\d{10}")) && !IsBlank(TextInput1.Text),
RGBA(255, 0, 0, 1), /* <-- If not match, border color turn into red */
RGBA(0, 18, 107, 1)
)

Then add a Label control under the Text box, set the Text property to following:

"The Phone number you typed is not valid, please re-type again. The format is xxxxxxxxxx"

Set the Color property of the Label to following:

RGBA(255, 0, 0, 1)

Set the Visible property of the Label to following:

If( Not(IsMatch(TextInput1.Text, "\d{10}")) && !IsBlank(TextInput1.Text), true,
false )

Please take a try with above solution, check if the issue is solved.

Best regards,

Was this reply helpful? Yes No
patty789 250 on at

Like (0)

Report

Thank you for your response back. @Pstork1 , and @v-xida-msft. I was able to try @v-xida-msft solution and it worked for me.

Was this reply helpful? Yes No
Silvester. Akakpo 783 on at

Like (2)

Report
Hi,
I hope it is not too late, I have a workaround for you.
You need an additional textbox (TextInput2).
Set the phone number field default to below:

Left(Concat(Filter(Split(TextInput2.Text,""),Result in "0123456789"),Result),3) & "-" & Mid(Concat(Filter(Split(TextInput2.Text,""),Result in "0123456789"),Result),4,3) & "-" & Mid(Concat(Filter(Split(TextInput2.Text,""),Result in "0123456789"),Result),7,4)
This will format to 123-456-7890, then you can play around the code to match your format. Next, change the textinput2 color properties to transparent. check attachment below(exhi1.png).The text color, fill color, and hover color to transparent.
Now drag the textInput2 field on the top of the phone number field. The idea is to display the formatted phone number that is shown on the phone number field through the transparent textInput2 since this becomes transparent.

Was this reply helpful? Yes No
Verified answer

mdevaney 29,989 Moderator on at

Like (3)

Report

@patty789

Yes, you can automatically format a phone number as the user types it by creating an “input mask.” It’s amazing to watch the phone number dashes appear automatically as you type! Check out this article to learn how.

Link to article:
🔗 https://www.matthewdevaney.com/power-apps-phone-number-formatting-in-a-form-input-mask/

Was this reply helpful? Yes No
Community Power Pla... on at

Like (1)

Report

This worked like a charm

Was this reply helpful? Yes No
Community Power Pla... on at

Like (0)

Report

Hello everyone,
I'd like to know about how to create If user ID is 500 login with text input box and then show only current user data in power apps.Not all show data in powerapps.for example, I have two date that is from and to date picker and search button and then layout in gallery of ID 500 data is from 2021-12-10 and to 2021-12-15 exactly data when I press Search button.Please, help me how to solved that function.

Was this reply helpful? Yes No
niki1 18 on at

Like (0)

Report

I tried this solution but it did not work for me as per the demo 😞

Was this reply helpful? Yes No
jeffmartinxp1 4 on at

Like (0)

Report

This is what I put together using the Azure AD UserProfile...worked great for me:

"(" &Left(Office365Users.UserProfileV2(PersonDCV.Selected.Email).mobilePhone, 3) & ") " & Left(Mid(Office365Users.UserProfileV2(PersonDCV.Selected.Email).mobilePhone, 4),3) & "-"& Right(Mid(Office365Users.UserProfileV2(PersonDCV.Selected.Email).mobilePhone, 4), 4)

PersonDCV is the dropdown used for selecting a person to get their email or you could use the current user logged in as well.

Was this reply helpful? Yes No
Aimthedame 220 on at

Like (0)

Report

Hi Matthew! This doesn't seem to work in Modern forms. I believe the issue is somewhere in the OnChange of the slider but I'm not familiar enough with the new properties to figure out what changes need to be made. Can you help?

Was this reply helpful? Yes No