Input mask for text input field

[davidvo68]

Hello,

I need user to enter a set of characters in the exact format below using text input control.  Let's call the set of the string below is EPS_Code.

01-00-03-02-02-104-D;

05-08-06-01-05-109-S;

My questions are:

1) How can I limit the length to 20?

2) How can I mask the string so it will have ##-##-##-##-##-###-alpha character as user type from the keyboard?

3) How can I insert the semi-colon at the end of each 20 characters automatically?

4) If user needs to enter more than one EPS_Code then is the text input control appropriate to use in this case?

Thank you all in advance.

[jimbobcook1 · Accepted solution]

Afternoon,

Good set of questions there, hopefully I can be of some use for a few of them...

1 - If you have a label next to the Text box saying something like "This input is the incorrect length please check and Input again", then on visible you can say if the Text box length doesn't = 20 then true else false, then make your submit button look for that error label for display mode so they cannot submit whilst it's visible.

You could use this for the visible of that error label - If(Len(TextBox1.Text) = 20,false,true)

You could use this for the DisplayMode on your submit button - If(Label1.Visible = true,DisplayMode.Disabled,DisplayMode.Edit)

2 - Unfortunately I don't have anything for this one that would be clean or user friendly haha

3 - May I recommend that when they input they add the line to a collection and add the separator (;) on the patch as then they could delete a line before submitting as well

Maybe something like this on the submit a line OnSelect - Collect(colEntries,{Entry:TextInput1.Text}), when you patch the entries at the end you can concat the collection to give you one long line of text with separators 
You could use this as the Patch OnSelect once the user has entered all entries - Patch(SharePointList,SharePointItemIDLookup,{EntryColumnName:Concat(colEntries,Entry,";")})

4 - See above for use of collection, I use this in one of my apps for adding in parts for an engineering app, left side is the text boxes people add info into and the bit on the right is a gallery showing the collection, the > in the middle is my submit button.

[Waegemma]

Hi @davidvo68,

 @jimbobcook1 's point 2 is explained in this article:

 Power Apps Phone Number Formatting For Any Country (Input Mask) (matthewdevaney.com) by @mdevaney    

I haven't tried it myself though,

Marc

[davidvo68]

thank you Jimbobcook1.

[davidvo68]

thank you.  I did look at that example and tried to follow it but not able to get it working.

[Waegemma]

Hi @davidvo68 ;

I started wondering if it was possible to overcome point 2 and I came up with this:

TextBox named "tm" partially under

Label with Text set to:

Switch(Len(tm.Text);
0; "";
1; tm.Text;
2; tm.Text;
3;
Concatenate(Left(tm;2);"-";Mid(tm.Text;3;1));
4;
Concatenate(Left(tm;2);"-";Mid(tm.Text;3;2);"-");
5;
Concatenate(Left(tm;2);"-";Mid(tm.Text;3;2);"-";Mid(tm.Text;5;1));
6;
Concatenate(Left(tm;2);"-";Mid(tm.Text;3;2);"-";Mid(tm.Text;5;2);"-");
7;
Concatenate(Left(tm;2);"-";Mid(tm.Text;3;2);"-";Mid(tm.Text;5;2);"-";Mid(tm.Text;7;1));
8;
Concatenate(Left(tm;2);"-";Mid(tm.Text;3;2);"-";Mid(tm.Text;5;2);"-";Mid(tm.Text;7;2);"-");
9;
Concatenate(Left(tm;2);"-";Mid(tm.Text;3;2);"-";Mid(tm.Text;5;2);"-";Mid(tm.Text;7;2);"-";Mid(tm.Text;9;1));
10;
Concatenate(Left(tm;2);"-";Mid(tm.Text;3;2);"-";Mid(tm.Text;5;2);"-";Mid(tm.Text;7;2);"-";Mid(tm.Text;9;2);"-");
11;
Concatenate(Left(tm;2);"-";Mid(tm.Text;3;2);"-";Mid(tm.Text;5;2);"-";Mid(tm.Text;7;2);"-";Mid(tm.Text;9;2);"-";Mid(tm.Text;11;1));
12;
Concatenate(Left(tm;2);"-";Mid(tm.Text;3;2);"-";Mid(tm.Text;5;2);"-";Mid(tm.Text;7;2);"-";Mid(tm.Text;9;2);"-";Mid(tm.Text;11;2));
13;
Concatenate(Left(tm;2);"-";Mid(tm.Text;3;2);"-";Mid(tm.Text;5;2);"-";Mid(tm.Text;7;2);"-";Mid(tm.Text;9;2);"-";Mid(tm.Text;11;3);"-");
Concatenate(Left(tm;2);"-";Mid(tm.Text;3;2);"-";Mid(tm.Text;5;2);"-";Mid(tm.Text;7;2);"-";Mid(tm.Text;9;2);"-";Mid(tm.Text;11;3);"-";Mid(tm.Text;14;1)))

It's code that makes me cringe, but it gets the job done.

 🙂

Marc

[davidvo68]

Marc, great work. The only change I did from your code is to replace all semicolons with comas. Now I have one last question.

/**I want to check for the character in the position 20 to see if it is a text and is either D or S, in red font below, then let user know that they can only enter letter D or S but I could not get it to work.  Any insight?**/

Switch(
Len(tm.Text),
0, "",
1, tm.Text,
2, tm.Text,
3,Concatenate(Left(tm,2),"-",Mid(tm.Text,3,1)),
4,Concatenate(Left(tm,2),"-",Mid(tm.Text,3,2),"-"),
5,Concatenate(Left(tm,2),"-",Mid(tm.Text,3,2),"-",Mid(tm.Text,5,1)),
6,Concatenate(Left(tm,2),"-",Mid(tm.Text,3,2),"-",Mid(tm.Text,5,2),"-"),
7,Concatenate(Left(tm,2),"-",Mid(tm.Text,3,2),"-",Mid(tm.Text,5,2),"-",Mid(tm.Text,7,1)),
8,Concatenate(Left(tm,2),"-",Mid(tm.Text,3,2),"-",Mid(tm.Text,5,2),"-",Mid(tm.Text,7,2),"-"),
9,Concatenate(Left(tm,2),"-",Mid(tm.Text,3,2),"-",Mid(tm.Text,5,2),"-",Mid(tm.Text,7,2),"-",Mid(tm.Text,9,1)),
10,Concatenate(Left(tm,2),"-",Mid(tm.Text,3,2),"-",Mid(tm.Text,5,2),"-",Mid(tm.Text,7,2),"-",Mid(tm.Text,9,2),"-"),
11,Concatenate(Left(tm,2),"-",Mid(tm.Text,3,2),"-",Mid(tm.Text,5,2),"-",Mid(tm.Text,7,2),"-",Mid(tm.Text,9,2),"-",Mid(tm.Text,11,1)),
12,Concatenate(Left(tm,2),"-",Mid(tm.Text,3,2),"-",Mid(tm.Text,5,2),"-",Mid(tm.Text,7,2),"-",Mid(tm.Text,9,2),"-",Mid(tm.Text,11,2)),
13,Concatenate(Left(tm,2),"-",Mid(tm.Text,3,2),"-",Mid(tm.Text,5,2),"-",Mid(tm.Text,7,2),"-",Mid(tm.Text,9,2),"-",Mid(tm.Text,11,3),"-"),
14,Concatenate(Left(tm,2),"-",Mid(tm.Text,3,2),"-",Mid(tm.Text,5,2),"-",Mid(tm.Text,7,2),"-",Mid(tm.Text,9,2),"-",Mid(tm.Text,11,3),"-",(If((!IsNumeric((Mid(tm.Text,14,1))) || Text(Mid(tm.Text,14,1)) NOT IN ["S","D"),"?Only 'D' or 'S' goes here")  

)
)
)

[Waegemma]

Hi @davidvo68 ,

Bear in mind this is very crude code. 🙂

I added a switch to check for D or S on the 14th position, nothing else gets accepted.

TIP: limit the size of your TextInput to 14 characters, that way the users don't get lost in characters they typed but can't see.

Again: I wouldn't use this for a professional app, since this isn't really standard behavior 🙂

Switch(Len(tm.Text),
0, "",
1, tm.Text,
2, tm.Text,
3,
Concatenate(Left(tm,2),"-",Mid(tm.Text,3,1)),
4,
Concatenate(Left(tm,2),"-",Mid(tm.Text,3,2),"-"),
5,
Concatenate(Left(tm,2),"-",Mid(tm.Text,3,2),"-",Mid(tm.Text,5,1)),
6,
Concatenate(Left(tm,2),"-",Mid(tm.Text,3,2),"-",Mid(tm.Text,5,2),"-"),
7,
Concatenate(Left(tm,2),"-",Mid(tm.Text,3,2),"-",Mid(tm.Text,5,2),"-",Mid(tm.Text,7,1)),
8,
Concatenate(Left(tm,2),"-",Mid(tm.Text,3,2),"-",Mid(tm.Text,5,2),"-",Mid(tm.Text,7,2),"-"),
9,
Concatenate(Left(tm,2),"-",Mid(tm.Text,3,2),"-",Mid(tm.Text,5,2),"-",Mid(tm.Text,7,2),"-",Mid(tm.Text,9,1)),
10,
Concatenate(Left(tm,2),"-",Mid(tm.Text,3,2),"-",Mid(tm.Text,5,2),"-",Mid(tm.Text,7,2),"-",Mid(tm.Text,9,2),"-"),
11,
Concatenate(Left(tm,2),"-",Mid(tm.Text,3,2),"-",Mid(tm.Text,5,2),"-",Mid(tm.Text,7,2),"-",Mid(tm.Text,9,2),"-",Mid(tm.Text,11,1)),
12,
Concatenate(Left(tm,2),"-",Mid(tm.Text,3,2),"-",Mid(tm.Text,5,2),"-",Mid(tm.Text,7,2),"-",Mid(tm.Text,9,2),"-",Mid(tm.Text,11,2)),
13,
Concatenate(Left(tm,2),"-",Mid(tm.Text,3,2),"-",Mid(tm.Text,5,2),"-",Mid(tm.Text,7,2),"-",Mid(tm.Text,9,2),"-",Mid(tm.Text,11,3),"-"),
Concatenate(Left(tm,2),"-",Mid(tm.Text,3,2),"-",Mid(tm.Text,5,2),"-",Mid(tm.Text,7,2),"-",Mid(tm.Text,9,2),"-",Mid(tm.Text,11,3),"-",
Switch(Mid(tm.Text,14,1), "D", "D","S","S","")))

Marc

[davidvo68]

Thanks Marc.  I will not use this code for professional application.  Only for internal use purpose.