The Power Apps modern control Text Input (TextCanvas) has been updated. Let’s explore its features and usage in detail.
Modern Text Input (TextCanvas)
TextCanvas is one of the modern controls available in Power Apps canvas applications, designed for collecting text input from users.
The image shows a comparison between the modern TextCanvas (top) and classic TextInput (bottom). Notice how the modern version features a more refined and polished appearance.
In this article, we’ll take a deep dive into TextCanvas and explore its capabilities.
Basic Usage
To get started, add a text input control from the “Insert” menu.
Users can then input text in the field.
To access the user-input text in your app, use ControlName.Value.
Manipulating Text from the App
Conversely, when you need to manipulate text from the app side (such as setting initial values), you’ll also use the “Value” property.
When you set the Value property of TextCanvas to match the Text property of the textbox below:
The TextCanvas text will update automatically when the text below changes.
You can also set variables to the Value property. *In this example, the variable is declared using the button on the right.
Output Trigger (TriggerOutput)
TextCanvas includes an “Output Trigger” property that determines when input is finalized (such as when OnChange is triggered or when changes are reflected in bound controls).
There are three types of output triggers available:
- FocusOut: Triggers when the TextCanvas loses focus
- Delayed: Triggers 1/2 second after the user stops typing
- Keypress: Triggers simultaneously with user input
For example, when the output trigger is set to FocusOut, users can enter text:
The text will be reflected in the bound control (in this example, the TextInput below) when clicking outside the TextCanvas.
You can set the value either by directly typing the string (“FocusOut”, “Delayed”, “Keypress”):
Or by using the predefined enum values:
When using TextCanvas as a search box, you might choose “FocusOut” to minimize database access frequency, or “Delayed” when you want to show search results more quickly. The choice depends on your specific use case.
Error Display (ValidationState)
ValidationState is a new property available in TextCanvas that wasn’t present in TextInput.
By default, this property is set to “None”:
When set to “Error”, it displays a red border to indicate an input error:
Here’s an example of how it can be used for input validation: *The image below shows a postal code validation
If(IsMatch(TextInputCanvas.Value, "^d{3}-?d{4}$"), "None", "Error")
With its additional customization options for appearance, TextCanvas could be a great choice for future development needs.
