Today there is really no great way to format the input of a text field in Canvas Apps. One solution to this shortcoming is to use two fields, and enter the text into an transparent field and format the text in another TextInput that lies below the transparent one.

In this example I will format a swedish cell phone number as we normally do here, which is AAA-BBB CC DD.

Start by creating a new Canvas App, in this example I used the Phone Layout. Start by dragging to TextInput-field to the canvas and rename them to PhoneRaw and PhoneFormatted.

As the default-value for PhoneFormatted, enter the following formula

Left(Concat(Filter(Split(PhoneRaw.Text, ""), Result in 12345678909), Result), 3) & "-" & Mid(Concat(Filter(Split(PhoneRaw.Text, ""), Result in 12345678909), Result), 4, 3) & " " & Mid(Concat(Filter(Split(PhoneRaw.Text, ""), Result in 12345678909), Result), 7, 2) & " " & Mid(Concat(Filter(Split(PhoneRaw.Text, ""), Result in 12345678909), Result), 9, 2)

There is a lot of repetion here, but as far as I know there is no other way to do this. We can now test this by entering some text into PhoneRaw, and see that it will filter away anything that isnt a number and also that it will format according to the specified format.

We now have a functionally formatting. The next step is to make the RawPhone field transparent and put in on top of phone formatted. Select PhoneRaw, and under properties scroll down to Color and make all attributes transparent.

When you are done the Color settings should look like below

Now the PhoneRaw field is transparent and can be hard to locate on the canvas, but if you select it from the tree view there shouldnt be any problems.

Grab the invisible element and drag in on top of PhoneFormatted. If the formatting doesnt seem to work, one issue I had were that the wrong element were put in front of the other. To solve this, right click on RawPhone, select Reorder and chose Bring to Front.

When you have done this, try again and you should now have working formatting. Another downside of this solution is if the user tries to select the text in the textbox, because it is the unformatted text that are in front and will be selected.

Happy formatting!