How to add text input to Power Apps collection?

In this Power Apps Tutorial, we will learn how to add text input to a Power Apps collection.

Recently, we got a requirement to add text from the text input control to a Power Apps collection while working with the Canvas app. Also, we will discuss the below topics based on Power Apps text control:

• How to add multiple text inputs to a collection in PowerApps
• Add text input to an existing collection in Power Apps
• Update text input to a collection on change in Power Apps

Add text input to a Power Apps collection

Here, we will discuss adding data from a Power Apps text input control to a new Power Apps collection. That means when the user dynamically inserts any data in the text input control, it will add them to the Power Apps collection via a button click.

To work with this scenario, the following steps are:

• On the Power Apps screen, add a Text Input control and button control.
• Give a name to the button control ex: Save to Collection.
• Insert the below expression on the button’s OnSelect property.

OnSelect = Collect(
    CollProject,
    {ProjectName: ProjectName_txt.Text}
)

ProjectName_txt is the name of the Power Apps text input and CollProject is the name of the new collection we created.

• To display the collection add a vertical gallery to the Power Apps screen and connect it with the collection (i.e., CollProject).

• For the time being, let’s save and publish the app. Insert any data on the Power Apps text input control in preview mode, and we can see that when we click on the button control, the text is added to the Power Apps collection, as shown below:

This is how to add text Input control to a Power Apps collection.

Add multiple text inputs to a collection in Power Apps

In this section, we will see how to add multiple text inputs to a Power Apps collection at once. That means when the user clicks on the button, it will add the data from the multiple text input controls to the Power Apps collection.

Consider the following scenario: the user enters the employee’s name, email address, and current project name into the appropriate text input controls, and then clicks the button to save the data in the collection.

To achieve this requirement, the following steps are:

• On the Power Apps screen, add 3 text input controls for inserting the employee’s name, email address, and current project name.
• Add a button control to the screen and give a name to the button control.
• Insert the below expression on the button’s OnSelect property.

OnSelect = Collect(
    Coll_Project,
    {
        FullName: EmployeeName_txt.Text,
        Email: Email_txt. Text,
        Project: ProjectName_txt.Text
    }
)

Where,

• Coll_Project is the name of the collection.
• EmployeeName_txt, Email_txt, and ProjectName_txt are the name of the Power Apps text input controls.

• Let’s add a Power Apps vertical gallery control to the screen and connect it with the collection to display the collected data.

Let’s preview the app and insert the data into the text input controls. We can see the collected data on the Power Apps gallery while clicking the button.

This is how to add multiple text inputs to a Power Apps collection.

Add text input to an existing collection in Power Apps

In this section, we will see how to add data from text input control to an existing Power Apps collection.

That means when the user inserts any data into the text input control, the data will be collected and stored in an existing collection. To work with this scenario, the following steps are:

• We have created a collection on the Power Apps screen’s OnVisible property.

OnVisible = ClearCollect(CollGadget, {GadgetName:"Meta Quest Pro", Manufacturer:"Meta"}, {GadgetName:"Google Pixel 7", Manufacturer:"Google"},{GadgetName:"Airpods Gen 2", Manufacturer:"Apple"}, {GadgetName:"Gocycle G4 electric bike", Manufacturer:"GoCycle"}, {GadgetName:"Legion Pro 7i Powerful Laptop", Manufacturer:"Lenovo"})

Where,

1. CollGadget is the name of the Power Apps collection.
2. GadgetName and Manufacturer are the names of the collection headers.

• Let’s add two text control to the Power Apps screen to insert the gadget name and manufacturer.
• Also, add a button control to the screen to store the data on the collection via the button click. Insert the below expression on the button’s OnSelect property.

OnSelect = Patch(
    CollGadget,
    Defaults(CollGadget),
    {
        GadgetName: GadgetName_txt.Text,
        Manufacturer: Manufacturer_txt.Text
    }
)

Where,

1. CollGadget is the name of the existing Power Apps collection.
2. GadgetName_txt and Manufacturer_txt are the names of the text input control.

• Add a gallery control (or data table) and connect that with the existing collection i.e., CollGadget.

Let’s insert data on the above text input control and click on the button. We can see the inserted items got added to the existing collection as shown below:

This is how to add text input to an existing Power Apps collection.

Read Network error when using Patch function: Field ‘Title’ is required

Power Apps update text input to the collection on change

In this section, we will see how to update the data from a text input control into the Power Apps collection. That means when the user selects any collection item via a gallery, the respective data will display on the text input control. When the user inserts any data, the inserted data will be updated on the Power Apps collection.

To work with this scenario, we are going to use the above Power Apps gallery that is connected with the CollGadget and the following steps are:

• Add a text input control to the Power Apps screen and place it beside the above gallery.
• Insert the below expression on the text input’s Default property to display the selected item’s manufacturer.

Default = ColGadget_Gal.Selected.Manufacturer

Where ColGadget_Gal is the name of the Power Apps gallery and Manufacturer is the name of the collection column.

• To update the selected item’s Manufacturer, insert the below expression on the text input’s OnChange property.

OnChange = Patch(
    CollGadget,
    LookUp(
        CollGadget,
        Manufacturer = ColGadget_Gal.Selected.Manufacturer
    ),
    {Manufacturer: Manufacturer_txt.Text}
)

• To identify the selected items from the gallery, we will insert the below expression on the Color properties of the right navigation icon.

Color = If(ThisItem.IsSelected, Color.IndianRed, Color.Blue)

Let’s preview the app and select an item from the gallery. Also, update the manufacturer name and we can see the modification will be visible on the collection via gallery.

This is how to update PowerApps text input to the collection on change.

Conclusion

From this Power Apps tutorial, we learned how to work with Power Apps collection using text input control based on different scenarios. Such as:

• Power Apps add text input to the collection
• Add multiple text inputs to a collection in Power Apps
• Add text input to an existing collection in Power Apps
• Power Apps update text input to the collection on change

You may also like:

• How to format a currency column in Power Apps?
• How to Sort a Power Apps Dropdown Control?
• Add a Time Picker in the Power Apps Canvas App
• Patch Dataverse Choice Column in Power Apps