cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
patty789
Helper V
Helper V

How to format the phone number in a text input

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.

1 ACCEPTED SOLUTION

Accepted Solutions
mdevaney
Super User
Super User

@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/

 

mdevaney_0-1636817785861.gif

 

View solution in original post

8 REPLIES 8
Pstork1
Dual Super User
Dual Super User

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.



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

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,

Community Support Team _ Kris Dai
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

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. 

Silvester
Continued Contributor
Continued Contributor

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.exhi1.PNG

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.

 

 

 

mdevaney
Super User
Super User

@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/

 

mdevaney_0-1636817785861.gif

 

This worked like a charm

khonjar
New Member

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.

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

Helpful resources

Announcements
Power Platform Conf 2022 768x460.jpg

Join us for Microsoft Power Platform Conference

The first Microsoft-sponsored Power Platform Conference is coming in September. 100+ speakers, 150+ sessions, and what's new and next for Power Platform.

Power Platform Call June 2022 768x460.png

Power Platform Community Call

Join us for the next call on June 15, 2022 at 8am PDT.

PA Virtual Workshop Carousel 768x460.png

Register for a Free Workshop

This training provides practical hands-on experience in creating Power Apps solutions in a full-day of instructor-led App creation workshop.

PA.JPG

New Release Planning Portal (Preview)

Check out our new release planning portal, an interactive way to plan and prepare for upcoming features in Power Platform.

Top Solution Authors
Top Kudoed Authors
Users online (1,979)