Hello Everyone,
This is my first tutorial here and hope this masking format with Wappler will be useful for some people.
In this example, we will try to change the format of the telephone: xxxxxxxxx with xxx-xxx-xxxx. You will notice that the number is a 10 digit characters.
Step 1: Select the expression you used bind in the data picker.
Step 2: Click on Add App Connect Formatting
Step 3: Select the variable we are binding and open the data formatting tab.
Step 4: Select Manipulation, and from manipulation go to Sub and click on it.
Step 5: Under Sub, you will have start and length:
For Start: Enter the value “0” because we are starting from left to
right with initial value of nothing.
Length: Enter “3”
The separator will be place after the third character of the string.
Step 6: Go back to the variable “Tel” and select it.
Click on the variable to open the tab.
Step 7: Click on Operation
Step 8: Use or select the sign plus (+).
Under the plus (+) sign, enter (-) or any separation variable you like.
Step 9: Under the plus (+) sign, enter (-) or any separation variable you like.
Click on the value property we just created
Step 10: Add the Operation plus (+) again
Under the operation plus (+), click on the data picker.
Step 11: Enter the variable “Tel” or whatever variable you wrote in your data binding.
Make sure, you select the variable in the binding, do not manually write it. Otherwise, you will have an error of expression.
For us, we use “Tel” because that is what are working on since the beginning.
Step 12:Click on the variable Tel
Open the data formatting Tab and select manipulation
Step 13: From Manipulation – Select Sub again
Step 14: Under Sub, you will have start and length:
For Start: Enter the value “3” because we are starting from left to
right with initial value of 3.
Length: Enter “3”
The separator will be place after the sixth character of the string.
Step 15: Go back to the variable Tel on top. Not the one in the middle.
Step 16: Under operation, and then select the plus (+)
Step 17: Under the plus (+) sign, enter (-) or any separation variable you like.
Step 18: Click on the value property we just created
Add the operation plus (+) again
Under the operation plus (+), click on the data picker
Select the variable you had as phone: In this practice we will select “Tel again”.
Step 19: Click on the variable Tel
Open the data formats picker and select manipulation
Step 20: From Manipulation – Select Sub
Step 21: Under Sub, you will have start and length:
For Start: Enter the value “6” because we are starting from left to
right with total value of 10.
Then click on select twice to save your format in your document and save your document.
Final Output: You can also use it here:
{{((Tel.substr(0, 3) + ("-" + Tel.substr(3, 3))) + ("-" + Tel.substr(6, 10)))}}
Hope this will be useful for some people.