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

[Anonymous]

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! 

[mdevaney · Accepted solution]

@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."

[mdevaney]

@Anonymous 

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

[yashag2255 · Accepted solution]

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.

I have implemented a sample of this here: https://www.appliedis.com/how-to-create-reusable-components-in-canvas-apps-with-already-available-controls/ 

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!

[poweractivate · Accepted solution]

@Anonymous 

@yashag2255 and @mdevaney  - great approaches - in combination with your approaches I 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, I have a 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 I 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:"##-##-##-##"})

Step 2: 

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

Set(MYVAR,Value(MyNumberInput1.Text))

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 (I don't explicitly use it in this sample, but you can do this as well).

Step 4: use this code:

(on the Text property of the Label): 

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

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 me know if the above approach helped you.

[Anonymous]

Thank you very much. This is very helpful!

[Frederico]

I have a similar problem, but I can't solve it. In my case, there is a letter (from a to z) in the first place of my pattern (e.g: Z1234-12345-12345). Do you know a workaround?

My post: https://powerusers.microsoft.com/t5/Building-Power-Apps/How-to-autoformatting-a-textinput-while-the-...

Thanks