Power Apps Modern Text input Control [All in Detail]

Do you know Microsoft Power Apps provided a new Text input Modern Control recently? No problem.

This Power Apps guide will explore everything about Power Apps Modern Text Input Control, its properties, and how to add the Modern Text Input Control in Power Apps.

Also, we will use Modern Text input Control in Power Apps Canvas app with a few examples. Moreover, we will learn how to enable Power Apps Modern Controls in the Canvas app.

Check out: Power Apps Modern Information Button Control [Complete Guide]

Power Apps Modern Text input Control

Power Apps Modern Text input control is a box that allows users to enter text, numbers, and other types of data or information.

A user can specify the data or information by typing on the text input control. Refer to the image below that how the Power Apps Modern Text Input Control looks like.

Power Apps Modern Text input Control
Power Apps Modern Text input Control

This is the overview of the Modern Text input control in Power Apps.

Power Apps Modern Text input Control Properties

The table below represents all the important key properties of a Power Apps Modern Text input control:

PropertyDescription
ValueThe default value of control before the user changes it. The current value of the Text Input Canvas is obtained by using this as an output property.
ModeThere are two different modes:
1. Singleline:
Modern Text input control in Power Apps
2. Multiline:
Modern Text input in Power Apps
RequiredMust be filled out or not.
Display modeThere are three display modes:
1. Edit – The user can enter the data
2. View – Allows only to display data
3. Disabled – The control is greyed out with disabled mode
Accessible labelLabel for screen readers.
Position– Distance between the control’s left side and the screen’s left edge.
Y – Distance between the top of the control and the top edge of the screen.
SizeWidth – The gap between the control’s left and right sides.
Height – Distance between the control’s top and bottom.
ContentLanguageIndicates the audience’s language (for example, “en-US”).
DelayOutputWhen true, delay updating the Value output property until the user has finished typing.
OnChangeActions that will be carried out when the Text Input Canvas’s Value property changes
VisibleSpecifies whether to display or hide the Modern Text input control.
Power Apps Modern Text input Control Properties

Also, Read: Power Apps Modern Tab List Control [Everything in Detail]

See also  How to Create a list using SharePoint Framework (SPFx)

Add Power Apps Modern Modern Text input Control

Next, we’ll see how to add a Modern Text input Control in Power Apps.

The “Try out the modern controls” option must first be enabled on the Power Apps Canvas app’s Settings page.

You won’t be able to see the Modern controls in Power Apps if you don’t enable this option. Follow these steps to activate Power Apps Modern Controls:

  • Sign in to Power Apps with your valid Microsoft credentials.
  • Create a New Blank Canvas app (Apps -> + New App -> Canvas).
Add Power Apps Modern Text input Control
Add Power Apps Modern Text input Control
  • Provide a unique name for the app (Power Apps Modern Info Button Control) -> Choose the Format as Tablet -> Click on Create.
Modern Text input in PowerApps
Modern Text input in PowerApps
  • On the Power Apps Screen, Click on ellipses () from the top -> Settings -> Select Upcoming features -> Preview -> Scroll down and Enable Try out the modern controls as shown below.
  • Save and Publish the canvas app once.
PowerApps Modern Text input control
PowerApps Modern Text input control
  • Then, Expand the + Insert tab (from the top) -> go to the Modern tab -> Select the Text input as below.
How to add Power Apps Modern Text input control
How to add Power Apps Modern Text input control
  • The Modern Text input control’s default name, TextInputCanvas1, will appear on the screen when it has been inserted. It can be renamed to suit your needs.
  • Also, the Modern text input control’s default Value will be blank [” “]. We can change it as per our needs.

This is how to add Power Apps Modern Text input Control.

Have a look: Power Apps Modern Link Control [Detailed Tutorial]

How to Use Power Apps Modern Text input Control

By taking a simple example, we will see how to work with the Modern Text input Control in Power Apps.

  • The below screenshot represents a Power Apps Modern Text input control and a Label control. When a user will enter the Coupon Code, then the entered code will display in the label control below.
Power Apps Text input modern control
Power Apps Text input modern control
  • To achieve this, select the Label control and set its Text property to the code below:
Text = "CODE: " &  txtCouponCode.Value

Where,

  • “CODE: “ = This is the text that will display in the label control
  • txtCouponCode = Modern Text input control name
Power Apps Modern Text input
Power Apps Modern Text input
  • Finally, Save, Publish, and Preview the app. Enter some coupon code inside the modern text input control. You can see the specific text code will appear in the label control.
See also  SharePoint Online Free Trial | SharePoint free trial

This is how to work with Power Apps Modern Text input Control.

Furthermore, you may like some more Power Apps Modern Control tutorials:

This Power Apps explored everything about Power Apps Modern Text Input Control, its properties, and how to add the Modern Text Input Control in Power Apps.

Also, we saw how to work with Modern Text input Control in Power Apps Canvas app with a few examples. Moreover, we learned how to enable Power Apps Modern Controls in the Canvas app.

>