Working with Text Input Control in Microsoft PowerApps

  Before reading this article, please go through the important article links given below-

•    Quick Start on Microsoft PowerApps
•    To Use Template
•    To Use Blank App
•    To Add Excel File
•    To Use Sort And SortByColumn Functions
•    To Use Filter, Search, And LookUp Functions
•    To Add Contacts
•    To Get User Details
•    Developing Camera App
•    Using Radio Button
•    Developing Drawing App
•    Using ListBox Control
•    Adding Audio And Video Control
•    Using Slider Control
•    Import And Export Data In Microsoft PowerApps
•    Using CheckBox Control
•    Making Graphics Effect Using Shape Control

In PowerApps, we can Add the Text Input Control.

Text Input Control

The user can specify data by typing into a Text Input Control. The Text Input Control is used to get the input from the user.

Hover Property of Text Input Control

Hover properties are used when the user hovers over the control with a mouse.

 

 

HoverBorderColor

If the user moves the mouse pointer on the control, the color of a control's border will change.

 

HoverColor

If the user moves the mouse pointer on the control, the color of a control's Text color will change.

 

HoverFill

If the user moves the mouse pointer on the control, the background of a control's color will change.

 

 

 

Follow the below steps to work with Text Input Control in PowerApps:

Step 1

Log into the PowerApps

After downloading the PowerApps from the Windows store, here we need a Microsoft related organization’s Office 365 ID or (MSDN, Microsoft, Skype, Office 365 etc.,), to login with it.

 

 

 

Step 2

Create a New App in PowerApp

After Login, we can see the Dashboard. There we click on the New button.

 

 

 

Step 3

Choose the Blank App

 

Step 4

Designing the App

Now, let's start designing the App. In the left side we can see the Individual Screens for adding our data. In the right side we see the List of Layouts. In the Top we see the formula bar. There you seen the Properties of the screen what you select. In the Right Side we see the Add Data Source to add the External data Source.

 

 

Step 6

Drag and Drop the Text Box Control

      1. Go to the Insert menu then Controls and Drag the Text Control.

     

 

2. Drop the Text Control on the Screen.

     

 

3. Rename to inputFirst

     

 

4. Drop another text control

     

 

5. Rename to inputLast

 

Step 7

Drag and Drop the Button Control

      1. Go to the Insert menu then Controls and Drag the Button Control.

     

 

2. Drop the Drop Down Button Control on the Screen.

     

 

3. Add the Coding

Select the Button and add the following coding to the OnSelect Event

Coding:

Collect(Names, {FirstName:inputFirst.Text, LastName:inputLast.Text})

 

 

Step 8

Drag and Drop the Text Gallery Tool

If you Click on the button , the changes appear on the Text Gallery control.

 

      1. Go to the Insert Menu then choose Gallery and Drag the Text gallery -> Horizontal.

     

 

2. Draw the Text Horizontal control to the screen.

     

 

3. Add Coding

Select the Text Control and change the Items to Names

 

Now, Select the first item in the Text gallery and add the ThisItem.FirstName to Text Property

 

Next, Select the First box and change to FirstName and Second box to Last Name in the Property window.

 

   

 

Step 8: Run the App

 

 

Output 1: Main Screen

 

 

Output 2: Enter the Text Box and click on the Add button.

 

 

Output 3: Data added on the Text Gallery.

 

 

Conclusion:

I hope you understood how to add the Text Input Control in Microsoft PowerApps and how to run it.