PowerApps Canvas App with CDS - how to display phone entry box with ( ) - so that user entry could be guided?

Question

In my PowerApps I have few phone fields and FAX fields where users could enter data, right now it is defined in CDS and Phone data type, but I do not know how to walk through users to enter it nicely. my manager would like me to give users guided experience when they interact with the App GUI. so how could I display phone entry box with ( ) - , so that users could fill in the numbers in it?

Answer 1

There are probably many ways to accomplish this in PowerApps. The below is not the most elegant.

1. Set textbox OnChange property to:

ClearCollect(colPhone,
    Split(txtPhone.Text, "")
);

2. Set textbox Format property to Number
3. Set textbox MaxLength property to 11 (depending on the format you desire)
4. Add a label below the textbox with:

Concatenate(
    "+",
    First(colPhone.Result).Result,
    " (",
    Concat(LastN(FirstN(colPhone.Result,4).Result,3),Result),
    ")-",
    Concat(LastN(FirstN(colPhone.Result,7).Result,3),Result),
    "-",
    Concat(LastN(colPhone.Result,4),Result)
)

5. Set label Visible property to !IsBlank(txtPhone.Text)

Example in action:

Again, pretty hacky, but you could use it with some minor tweaks.