cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Anonymous
Not applicable

Max Length on text field + automatic dashes in between letters?

Hello,

 

I would like to have a text field dedicate to a Serial Number that contains up to 12 digits, the digits normally come separated by 2. example: 12-34-56-78-90-12. Is it possible to make them automatically add the dash and only allow 12 numbers/letters to be entered?

 

Thank you in advanced! 

3 ACCEPTED SOLUTIONS

Accepted Solutions
mdevaney
Super User III
Super User III

@Anonymous

You can restrict the number of digits allowed by changing the MaxLength property of the Text Input to 12.  But there is no way to have the dashes automatically entered.

The only workaround I can think of is to have 6 text fields, each with a 2 digit MaxLength side-by-side.  Then you could join their text into a single string by doing this

 

TextInput1.Text&"-"&TextInput2.Text&"-"&TextInput3.Text&"-"&
TextInput4.Text&"-"&TextInput5.Text&"-"&TextInput6.Text

 

The output would look exactly like your example

 

---
Please click "Accept as Solution" if my post answered your question so that others may find it more quickly. If you found this post helpful consider giving it a "Thumbs Up."

View solution in original post

yashag2255
Dual Super User II
Dual Super User II

Hi @Anonymous 

 

There is no direct way to add dashes to the input control. As a workaround to this, you can show an error message when the user has not entered the dashes in between by using the below configuration:
 
1) If you are okay with adding an error label then :
Add a Text Label and add the Text property as: "The Input should be in format XX-XX-XX-XX-XX-XX"
Text Label -> Color: If(IsMatch(TextInput1.Text,Match.Digit&Match.Digit&"-"&Match.Digit&Match.Digit&"-"&Match.Digit&Match.Digit&"-"&Match.Digit&Match.Digit&"-"&Match.Digit&Match.Digit&"-"&Match.Digit&Match.Digit),RGBA(0, 0, 0, 1),Red)
Text Label -> Visible : If(IsMatch(TextInput1.Text,Match.Digit&Match.Digit&"-"&Match.Digit&Match.Digit&"-"&Match.Digit&Match.Digit&"-"&Match.Digit&Match.Digit&"-"&Match.Digit&Match.Digit&"-"&Match.Digit&Match.Digit),false,true)
 
2) If you want to restrict the length of input, you can set the "Maximum Length" property of the text input control to 12. This will not allow user to add values after 12 digits and if you want to restrict to only numbers, then you can set the Format property to Number. This will not allow dashes.
 
 
Hope this Helps!

If this reply has answered your question or solved your issue, please mark this question as answered. Answered questions helps users in the future who may have the same issue or question quickly find a resolution via search. If you liked my response, please consider giving it a thumbs up. THANKS!

View solution in original post

poweractivate
Super User II
Super User II

@Anonymous 

 

@yashag2255 and @mdevaney  - great approaches - in combination with your approaches we have another specific idea for implementation of this use case that can be considered as well.

 

Although PowerApps does not currently have Input Mask functionality out of the box, we have a free custom solution for you with 8 digits - it can be so easily adapted to 12 digits yourself if you just add 4 more entries to the collection. You can combine this with the ideas by @mdevaney  of restricting the max input of the field to 12.

 

Step 1: OnVisible of your screen that has the control on it - initialize a collection with a series of columns that have the lengths, and the mask you want to render for each possible length. Here we do it for up to 8 digits. You can extend this to 12 by adding four more relevant entries to this collection

 

 

 

ClearCollect(MYCOLL,{myLen:1,myMask:"#"},{myLen:2,myMask:"##"},{myLen:3,myMask:"##-#"},{myLen:4,myMask:"##-##"},{myLen:5,myMask:"##-##-#"},{myLen:6,myMask:"##-##-##"},{myLen:7,myMask:"##-##-##-#"},{myLen:8,myMask:"##-##-##-##"})

 

 

 

OnVisSerial1.png

 

Step 2: 

 

OnChange of your input field where you are taking the input, use this code:

 

 

 

Set(MYVAR,Value(MyNumberInput1.Text))

 

 

 

OnChangeNumInput1.png

 

 

 

Step 3: Make sure Format property of your Input control is set to Number - this is similar to suggestions before. You can also use the MaxLength suggestion as well here, as mentioned by @mdevaney to restrict the max input length to 12 (we don't explicitly use it in this sample, but you can do this as well).

 

FormatNumInput1.png

 

Step 4: use this code:

 

 

 

Text(MYVAR,LookUp(MYCOLL,Len(Text(MYVAR)) = myLen,myMask))

 

 

 

TextPropLookup.png

 

Step 5: You did it!

 

Note - because it's OnChange, make sure when testing it, that you enter something in the input field, then press somewhere else on the screen to focus out of the field, that triggers the onChange. If you need to do it other than OnChange i.e. you want to avoid the need to focus out of the field, you may need to use a trick and adapt App Timer Wait Recipe and have a repeating timer that just about every 500 milliseconds or so does the equivalent of Step 2 - then you can have it work without focusing out of the field every time you modify the value.

 

In this specific tested example above:

 

When someone types in 1 you should get 1

When someone types in 12 you should get 12

When someone types in 123 you should get 12-3

When someone types in 1234 you should get 12-34

When someone types in 12345 you should get 12-34-5

When someone types in 123456 you should get 12-34-56

When someone types in 1234567 you should get 12-34-56-7

When someone types in 12345678 you should get 12-34-56-78

 

You can adjust the masks as needed for your use case, add new masks, etc.

 

Let's say you don't want to allow an odd number of digits. Here is quick approach to test quickly -  you may want to go for something a little more sophisticated in your case - but here would be the basics of one approach: You can replace the collection elements in our example above for myLen for 1, 3, 5, 7, etc. with something like CANNOT BE ODD NUMBER OF DIGITS for the myMask values - and that would display on the text label. On your button or other place, you can check for this value and disable the button if that's the value of the label - then an odd number of digits wouldn't be allowed in that case. 

 

@Anonymous let us know if the above approach helped you.

 

 

View solution in original post

5 REPLIES 5
mdevaney
Super User III
Super User III

@Anonymous

You can restrict the number of digits allowed by changing the MaxLength property of the Text Input to 12.  But there is no way to have the dashes automatically entered.

The only workaround I can think of is to have 6 text fields, each with a 2 digit MaxLength side-by-side.  Then you could join their text into a single string by doing this

 

TextInput1.Text&"-"&TextInput2.Text&"-"&TextInput3.Text&"-"&
TextInput4.Text&"-"&TextInput5.Text&"-"&TextInput6.Text

 

The output would look exactly like your example

 

---
Please click "Accept as Solution" if my post answered your question so that others may find it more quickly. If you found this post helpful consider giving it a "Thumbs Up."

View solution in original post

@Anonymous 

I edited my post above with a workaround.  Let me know if you saw it 🙂

yashag2255
Dual Super User II
Dual Super User II

Hi @Anonymous 

 

There is no direct way to add dashes to the input control. As a workaround to this, you can show an error message when the user has not entered the dashes in between by using the below configuration:
 
1) If you are okay with adding an error label then :
Add a Text Label and add the Text property as: "The Input should be in format XX-XX-XX-XX-XX-XX"
Text Label -> Color: If(IsMatch(TextInput1.Text,Match.Digit&Match.Digit&"-"&Match.Digit&Match.Digit&"-"&Match.Digit&Match.Digit&"-"&Match.Digit&Match.Digit&"-"&Match.Digit&Match.Digit&"-"&Match.Digit&Match.Digit),RGBA(0, 0, 0, 1),Red)
Text Label -> Visible : If(IsMatch(TextInput1.Text,Match.Digit&Match.Digit&"-"&Match.Digit&Match.Digit&"-"&Match.Digit&Match.Digit&"-"&Match.Digit&Match.Digit&"-"&Match.Digit&Match.Digit&"-"&Match.Digit&Match.Digit),false,true)
 
2) If you want to restrict the length of input, you can set the "Maximum Length" property of the text input control to 12. This will not allow user to add values after 12 digits and if you want to restrict to only numbers, then you can set the Format property to Number. This will not allow dashes.
 
 
Hope this Helps!

If this reply has answered your question or solved your issue, please mark this question as answered. Answered questions helps users in the future who may have the same issue or question quickly find a resolution via search. If you liked my response, please consider giving it a thumbs up. THANKS!

View solution in original post

poweractivate
Super User II
Super User II

@Anonymous 

 

@yashag2255 and @mdevaney  - great approaches - in combination with your approaches we have another specific idea for implementation of this use case that can be considered as well.

 

Although PowerApps does not currently have Input Mask functionality out of the box, we have a free custom solution for you with 8 digits - it can be so easily adapted to 12 digits yourself if you just add 4 more entries to the collection. You can combine this with the ideas by @mdevaney  of restricting the max input of the field to 12.

 

Step 1: OnVisible of your screen that has the control on it - initialize a collection with a series of columns that have the lengths, and the mask you want to render for each possible length. Here we do it for up to 8 digits. You can extend this to 12 by adding four more relevant entries to this collection

 

 

 

ClearCollect(MYCOLL,{myLen:1,myMask:"#"},{myLen:2,myMask:"##"},{myLen:3,myMask:"##-#"},{myLen:4,myMask:"##-##"},{myLen:5,myMask:"##-##-#"},{myLen:6,myMask:"##-##-##"},{myLen:7,myMask:"##-##-##-#"},{myLen:8,myMask:"##-##-##-##"})

 

 

 

OnVisSerial1.png

 

Step 2: 

 

OnChange of your input field where you are taking the input, use this code:

 

 

 

Set(MYVAR,Value(MyNumberInput1.Text))

 

 

 

OnChangeNumInput1.png

 

 

 

Step 3: Make sure Format property of your Input control is set to Number - this is similar to suggestions before. You can also use the MaxLength suggestion as well here, as mentioned by @mdevaney to restrict the max input length to 12 (we don't explicitly use it in this sample, but you can do this as well).

 

FormatNumInput1.png

 

Step 4: use this code:

 

 

 

Text(MYVAR,LookUp(MYCOLL,Len(Text(MYVAR)) = myLen,myMask))

 

 

 

TextPropLookup.png

 

Step 5: You did it!

 

Note - because it's OnChange, make sure when testing it, that you enter something in the input field, then press somewhere else on the screen to focus out of the field, that triggers the onChange. If you need to do it other than OnChange i.e. you want to avoid the need to focus out of the field, you may need to use a trick and adapt App Timer Wait Recipe and have a repeating timer that just about every 500 milliseconds or so does the equivalent of Step 2 - then you can have it work without focusing out of the field every time you modify the value.

 

In this specific tested example above:

 

When someone types in 1 you should get 1

When someone types in 12 you should get 12

When someone types in 123 you should get 12-3

When someone types in 1234 you should get 12-34

When someone types in 12345 you should get 12-34-5

When someone types in 123456 you should get 12-34-56

When someone types in 1234567 you should get 12-34-56-7

When someone types in 12345678 you should get 12-34-56-78

 

You can adjust the masks as needed for your use case, add new masks, etc.

 

Let's say you don't want to allow an odd number of digits. Here is quick approach to test quickly -  you may want to go for something a little more sophisticated in your case - but here would be the basics of one approach: You can replace the collection elements in our example above for myLen for 1, 3, 5, 7, etc. with something like CANNOT BE ODD NUMBER OF DIGITS for the myMask values - and that would display on the text label. On your button or other place, you can check for this value and disable the button if that's the value of the label - then an odd number of digits wouldn't be allowed in that case. 

 

@Anonymous let us know if the above approach helped you.

 

 

View solution in original post

Anonymous
Not applicable

Thank you very much. This is very helpful!

Helpful resources

Announcements
PA User Group

Welcome to the User Group Public Preview

Check out new user group experience and if you are a leader please create your group

Power Query PA Forum 768x460.png

Check it out!

Did you know that you can visit the Power Query Forum in Power BI and now Power Apps

V3_PVA CAmpaign Carousel.png

Community Challenge - Giveaways!

Participate in the Power Virtual Agents Community Challenge

Carousel 2021 Release Wave 2 Plan 768x460.jpg

2021 Release Wave 2 Plan

Power Platform release plan for the 2021 release wave 2 describes all new features releasing from October 2021 through March 2022.

Top Solution Authors
Top Kudoed Authors
Users online (2,476)