cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
davidvo68
Helper II
Helper II

Input mask for text input field

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.

1 ACCEPTED SOLUTION

Accepted Solutions
jimbobcook1
Resolver I
Resolver I

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.

Greenshot 2022-05-29 16.19.54.png

View solution in original post

8 REPLIES 8
jimbobcook1
Resolver I
Resolver I

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.

Greenshot 2022-05-29 16.19.54.png

Waegemma
Super User
Super User

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

thank you Jimbobcook1.

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

Waegemma
Super User
Super User

Hi @davidvo68 ;

 

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

Waegemma_0-1653901405047.png

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

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
Super User
Super User

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

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

Helpful resources

Announcements
Power Apps News & Annoucements carousel

Power Apps News & Announcements

Keep up to date with current events and community announcements in the Power Apps community.

Community Call Conversations

Introducing the Community Calls Conversations

A great place where you can stay up to date with community calls and interact with the speakers.

Power Apps Community Blog Carousel

Power Apps Community Blog

Check out the latest Community Blog from the community!

Top Solution Authors
Top Kudoed Authors
Users online (3,921)