Deep Dive Into TextInput Control In PowerApps

Introduction

Whenever we develop any PowerApps canvas app, the most common control is TextInput. This control is used to take input from the user in alphanumeric values. There are a few characteristics of this TextInput control that we will be exploring in this article.

TextInput control

If need to take alphanumeric input from the user into the PowerApps canvas app, we can use TextInput control. Note that, we can only take numbers, characters, and special characters input through this control. We won’t be able to take any media such as images, video, or audio using this control.

Adding TextInput control

To add TextInput control, you can click on "Input" option from the top navigation, and then under the Input category, click on "TextInput".

It will add the TextInput control to the screen

Properties of TextInput control

Let’s understand a few properties of the TextInput control in detail.

Default

Using Default property, we can set any default values to the control. For example, if we need to set the default value "Default value" to the text control, then we can add this text to the Default property.

Format

In some cases, it is required that the user must enter numeric values, such as when we are taking the salary detail of an individual, so we want the user should only enter the number value. And in PowerApps we do not have any separate control to take the numeric value as input.

To do this, we have Format property in the TextInput control. That has 2 options.

• Text - If the format is set to Text. It can take an alphanumeric value as an input
  
• Number - If the format is set to Number, it can take only numeric data as input. If you try to add text value, it won’t allow the user to enter that text value.
  

Hint Text

Sometimes we need to provide some guidance to the user that which types of values the user has to add or in which format, the value should be added. In that case, we can make use of hint text. This text is something that will be displayed in the Text Box when the form is loaded, and it will disappear as soon as the user starts typing into the control.

For example, we need to display a message to the user to input his First Name first and then Middle name and then Last Name.

We can add Hint text value as

Ex. Firstname Middlename Lastname

And it will look like this in the control

As soon as the user start typing, this value will disappear.

Note: If the user has set any default value, then Hint Text won’t appear. Hint Text only appears in an empty control.

Font

This is very much self-explanatory property. We can set font of the text displayed in the control.

Font size

We can set font size of the text displayed in the control.

Font weight

We can set font weight (Bold, Semibold, Normal or Lighter) to the text displayed in the control.

Font style

We can set the font style using this property, possible values are Underline, Italic, and Strikethrough.

Text Alignment

We can set the alignment of the text using this property. Possible values are Left, Middle, Right, and Justify.

Line height

Set the line height value using this property. This accepts a numeric value.

Clear button

We can enable/disable the clear button in the control using this property. When enabled, we will see a "Cross" icon in the control on the right side and if we click on that cross button, it will clear all the values from the control.

The cross icon will only appear when the control has some value, if the control is not having any value, the cross icon won’t appear.

By default, Clear button is turned off.

Enable spell check

This is a very interesting feature added by Microsoft. If this option is enabled, if you type any wrong spelling into the input control, it will show the red underline below the word like it does in other documents.

Maximum length

Using this property, we can control the length of the input values. For example, if we are asking for a Mobile number, then we know that it should be 10 characters long. So for that we can do is restrict the user to enter only 10 characters into Mobile number field.

Mode

We have three modes available for this property.

Password

If we are using this mode, then our text will be displayed in password character mode. It means it will be displayed * instead of the actual character.

Single line

In this whatever we are writing will always show in a single line, for example, if the width of the control is 100 and if we write more than 100 characters. It won’t be visible at a time because it will display all the data horizontally and we need to move our cursor to right side to see those data. Even if we are increasing the height of the control, still it will be visible in a single line.

Multiline

This mode is very useful when we need to get a large text from users such as some comments, notes, or full addresses. This allows users to enter large text and see maximum characters based on the height and widths of the control.

Display mode

This controls the accessibility of the control. It has the following values

• Edit - It means the user can access the control and type any value into it.
• View - If the Display mode is set to View, the value will not be editable, and the control will also not be visible. It will look like a plain label.
  
• Disabled - If the Display mode is set as Disabled, the control will not be accessible. Also the control will be greyed out so the user can know this is disabled control.
  
• Visible - This property is used to show/hide the control from the screen. If the value is true, the control will be visible on the screen, if false, the control won’t be shown on the screen.
• Position - Using Position property, we can set the location of the control on the screen. It has two values, X and Y. X value represents the horizontal location and Y represents the vertical location. By the combination of X & Y values, we can set the location of the control over the screen.
• Size - This property has two values, Height & Width, using Height we can control the height of the control, and using Width we can control the width of the control.

Padding

Padding is the space between the controls border and controls label/value. So if we need to add space between the control’s border and its value, we can make use of the Padding property.

It has four values.

• Top - This defines the space between the top border and the value.
• Bottom - This defines the space between the bottom border and the value
• Left - This defines the space between the Left border and the value
• Right - This defines the space between the Right border and the value

Color

Using color property, we can set the values of the control. It has further 2 properties, Color and Fill.

Using color, we can set the color of the text values. Like color is set to RED

Using Fill, we can set the background of the control. Here Fill color is set to the value Blue.

Border

This property is used to set the border of the control. It has furthermore properties

• BorderStyle - It is used to set the type of border for the control like Solid, Dashed, Dotted, and None.
• BorderThickness - It is used to set the width of the thickness of the border. It accepts a numerical value.
• BorderColor - It is used to set the color of the border. It accepts the name of the color, HEX code, or RGBA code.
• Border Radius - This property is used to set the rounded corner border of the input control. If it is set to 0, it will have square bracket. If it is set to some value, it will round the corner border according to the specified value.

For example, BorderRadius is set to 20 then it will look like this

Disabled color

As the name suggests, this property is used to set and maintain the color when control is disabled. For example, if we set the DisplayMode of the control as Disabled, then by default it looked grayed out, but we can customize this using Disabled color property.

It has furthermore properties

• DisabledColor - This set the color of the text into the control.
• DisabledFill - It set the background color of the control in disabled mode.
• DisabledBorderColor - It set the border color of the control in disabled mode.

Hover color

As the name suggests, this property is used to set and maintain the color when the mouse hovers on the control.

It has furthermore properties,

• HoverColor - This set the color of the text into the control when the mouse hovers over the control.
• HoverFill - It set the background color of the control when the mouse hovers over the control
• HoverBorderColor - it set the border color of the control when the mouse hovers over the control

Pressed color

This property is used to set and maintain the color when the mouse is clicked on the control

It has furthermore properties

• PressedColor - This set the color of the text into the control when the control is clicked
• PressedFill - It set the background color of the control when it is clicked
• PressedBorderColor - it set the border color of the control when it is clicked
• Tooltip - This is used to display temporary text when a mouse hovers on the control. This can be used to display some small pieces of information such as validation information.
  For example, we have set the tooltip value as "This is tooltip"
  
  And it will look like this when we hover the mouse on the control.
  
• Tab index - This property is used to set the tab index of the control. Tab index generally controls the order of setting focus of the control when Tab key from the keyboard is pressed.

Advanced properties Associated with TextInput

We have seen all the basic properties associated with the text input control, now let’s see the advanced properties associated with the text input control.

Reset

This property accepts the values “true” & “false”. This property is used to reset the state of the control. We can reset the state of the control by setting its value to “true”.

DelayOutput

This is a very important and hidden property of the PowerApps controls. This accepts either "true" or "false" value.

If it is set to "true", it will delay the text output by 1 second to prevent the event from triggering action on every key pressed.

Let’s understand this in simple words.

If you have a gallery control that is filled with large data. And you are using the TextInput control’s value to filter the gallery as soon as users start typing any value into the TextInput control.

If DelayOutput is set to false, as soon as the user types the first letter, it will trigger the key press or OnChange event, and the data set will immediately try to filter based on that single character entered in the TextInput control. This might delay the result as it will try to filter the gallery item on every key press.

So, to prevent this kind of performance impact, we can set DelayOutput to true.

If DelayOutput is set to true, as soon as the user types the first letter, it will not trigger the key press or OnChange event immediately, it will give 1 second pause, and it will allow the user to enter the entire search string, and data set will filter after 1 second of user’s input. This will improve the performance,

AccessibleLabel

This is another hidden and less used property. This property accepts the text value. The text written into this property will be only read by on screen readers. For example, if we enable the on screen reader, it will read our description set into the AccessibleLabel property.

This property will be super helpful when we try to build a canvas app for blind people, because then in that case, screen reader read the text and guide them on what value it accepts.

VirtualKeyboardMode

We have two types of virtual keyboard available in our Mobile and Tablet devices, such as the Numeric keyboard where only numbers appear, and the alphanumeric keyboard where number and text both appears.

This property is used when we are using our canvas app on the Mobile or Tablet device where we have to use the virtual keyboard instead of a physical keyboard.

This property has the following values,

• Auto - When VirtualKeyboardMode is set to Auto, it will open the virtual keyboard based on the Format property of the TextInput control. If the Format is set to Number, it will open the numeric keyboard when this input control is selected. If the Format is set to Text, it will open the text keyboard when this input control is selected.
• Numeric - When VirtualKeyboardMode is set to Numeric, then it will open only the numeric keyboard. It won’t be dependent on the Format property of the input control. It will open the Numeric keyboard only.
  
• Text - When VirtualKeyboardMode is set to Text, then it will open only alphanumeric keyboard. It won’t be dependent on Format property of the input control. It will open the alphanumeric keyboard.
  

Events associated with TextInput control

There are mainly two events associated with the TextInput control.

• OnChange - This event will be triggered when the value within the control is changed. For example, if the existing value is “Value1” and we change the value to “Value2”, then this event triggered.
• OnSelect - This event will be triggered when we click on the control.

Summary

In this article, we have seen each, and all properties and events associated with TextInput controls in details and with an example. If you think, any important properties or event is missed, kindly post a comment, and let me know. Any feedback is highly appreciated.