In this #PowerShot, I will show you how to format a text input while a user enters data in the input control. We will enforce US phone number formatting for this text input control that automatically adds ‘()’ and ‘-’ while the user inputs data in the control.
This is a setup that involves a text input control and a timer control. This is based on the timer control that runs every 1/10th of a second to check the text input and format it accordingly.
Let’s get Started!
Step 1: Drop a Text Input control and a Timer control on to the canvas app screen.
Step 2: Configurations on the Timer Control:
Repeat: true
AutoStart: true
Duration: 100
Visible: false
Expression on the TimerStart property:
Set(InputText,Substitute(Substitute(Substitute(Substitute(TextInput5.Text,Char(40),""),Char(41),""),"-","")," ",""));
Set(TextToDisplay,Concatenate(If(Len(InputText) >= 1,Char(40),""),Left(InputText,3),If(Len(InputText) >=4,Char(41),""),If(Len(InputText) >=4," ",""),If(Len(InputText) >=4,Mid(InputText,4,3),""),If(Len(InputText) >=7,"-",""),If(Len(InputText) >=7,Mid(InputText,7,4),"")));Set(ResetText,true);Set(ResetText,false)
Explanation: This reads the text input data in a variable “InputText”. Based on the InputText variable, we are setting another variable TextToDisplay that stored the formatted input text and will be set to be displayed on the text input control.
Step3: Configuration on the Text Input Control:
Default: TextToDisplay //from the previous step)
Reset: ResetText //from the previous step)
MaxLength: 14.
Setup in action:
Similarly, desired text input formats can be implemented through the timer control and made to display on the text input control. The formatting starts to appear the moment user starts entering values/data in the input control.
I hope you found this interesting and it helped you!
Comments