Collection variables in PowerApps - Demo

Best way to work with collection variable in PowerApps – Microsoft 365

One comment

Loading

In this PowerApps Tutorial, we will learn about collection variables in PowerApps. Like many other programming languages, PowerApps do have collection types of variables where we can temporarily store the “data collection” during the programming. For example, we have employee card information like the first name, last name, and mobile number, in the PowerApp form, this information is stored in a section, now if we want to store this employee information, we can use the gallery control to store this kind of data, by end of this tutorial we will clear our understanding on collection variable in PowerApps.

Best way to work with collection variable in PowerApps

Here is my demo app where I have a form with the first name, last name, and mobile number, when the user enters the information in first name, last name, and mobile number and clicks on the “Add to collection” button – the entire information gets saved to the gallery control which is located in the right side of the form, now I will explain how this was developed.

Gallery control in PowerApps Canvas App
Gallery control in PowerApps Canvas App

Design contact information form in PowerApps for Collection variable in PowerApps demo

As usual, way go to the “Insert” tab menu and the first name, last name, mobile number label, and text input control. Then add a gallery control to the form and configure a data source to the gallery control. In the upcoming section, I will explain how to add a gallery control into a PowerApps form and configure the data source to it.

Design contact information form in PowerApps
Design contact information form in PowerApps

How to add value to the collection variable in PowerApps?

To add a value to the collection variable in PowerApps, select the “Add to collection” button, then select the “OnSelect” event from the event selection dropdown list.

Write the below function:

Collect(varCollectionContactCard, { 
First_Name: txtFirstName.Text, 
Last_Name: txtLastName.Text, 
Mobile_Number: txtMobileNumber.Text 
}); 
Notify("Contact added to collection variable successfully", NotificationType.Success, 5); 
Reset(txtFirstName); 
Reset(txtLastName); 
Reset(txtMobileNumber)
How to add value to the collection variable in PowerApps?
How to add value to the collection variable in PowerApps?

In the above there are two functions calls:

  • Collect() – It is used to store the collection of data to variables.
  • Notify() – It is used to notify the user about the status of the button click event.
  • Reset() – It is used to reset the control value after submitting the data.

Collect() function in PowerApps

The Collect function adds records to a data source. The items to be added can be:

  • A single value
  • A record
  • A table

The first function is Collect() which takes two parameters. 1) The first parameter is the collection variable name, and the second parameter is the value that will be assigned to the collection variable which is will be in the JSON format. In the above example, we have passed the first name, last name, and mobile number as the parameter, and they got stored in the collection variable “varCollectionContactCard”.

Syntax of the Collect() function in PowerApps

Collect( DataSource, Item, ... )
  • DataSource – Required. The data source that you want to add data to. If it doesn’t already exist, a new collection is created.
  • Item(s) – Required. One or more records or tables to add to the data source.

How to use notify() function in PowerApps?

The second function in the add to collection button click event is “notify()”, which is similar to the alert function in javascript. It is used to display the status message after adding the record to the data source.

Syntax of the Notify() function in PowerApps

Notify( Message [, NotificationType [ , Timeout ] ] )
  • Message – Required. Message to display to the user.
  • NotificationType – Optional. Type of the message to display from the table above. The default is NotificationType.Information.
  • Timeout – Optional. A number of milliseconds to wait before automatically dismissing the notification. The default is 10 seconds (or 10,000 milliseconds). The notification will be displayed indefinitely with a Timeout of 0.

Example:

Notify("Contact added to collection variable successfully", NotificationType.Success, 5);

How to use Reset() function in PowerApps?

In the above example, the third function is the reset function whose job is used to clear the control value after the submission of the data which gets triggered on the button click event.

Syntax of the Reset() function in PowerApps

Reset( Control )
  • Control – Required. The control to reset.

Example:

Reset(txtFirstName);
Reset(txtLastName);
Reset(txtMobileNumber)

By now, we have the data in the collection variable, now we will add a gallery control to the form and configure the data source as this collection variable.

How to add the gallery control to the PowerApps form?

In order to add the gallery control in the PowerApps form, follow the below navigation.

Click on the “Insert” menu -> click on the “More” control dropdown menu from the top right side corner -> Click on the “Gallery” control, then associate the collection variable (varCollectionContactCard) data source.

How to add gallery control in PowerApps?
How to add gallery control in PowerApps?

How to configure the data source in PowerApps gallery control?

Once the gallery control got added to the form, select the gallery control.

Go to the gallery control property pane, then select the data source property as “varCollectionContactCard” which we have created in the “Add to collection” button OnSelect event. That’s it, from now onwards everything is automated. If we add any items to the employee card section and click on the “Add to collection” button, the item gets added to the gallery control automatically.

Configure data source in PowerApps gallery control
Configure data source in PowerApps gallery control

Collection variable in PowerApps: Add to collection demo in PowerApps

Add some test values to the employee card section and click on the “Add to collection” button, the employee details will be added to the gallery control.

Add to collection demo in PowerApps
Add to collection demo in PowerApps

Gallery control demo in PowerApps

After adding the data to the employee card section click on the “Add to collection” button, the details of the employee are added to the gallery control.

Gallery control demo in PowerApps
Gallery control demo in PowerApps

Clear variables in PowerApps: Clear collection variable data in PowerApps demo

To clear the collection variable value, click on the “Clear collection” button and select the “OnSelect” event, and then in the function box add the below:

Clear(varCollectionContactCard)

Note:

  • In the above example, the clear function is clearing the value from the “varCollectionContactCard” collection variable.
How to use clear function in PowerApps Canvas app?
How to use the clear function in the PowerApps Canvas app?

Once we click on the “Clear collection” button, we could see that the gallery control has been disappeared as the collection variable “varCollectionContactCard” has been cleared.

Clear collection variable data in PowerApps demo
Clear collection variable data in the PowerApps demo

Summary: Collection variable in PowerApps

Thus in this article, we have learned the below with respect to collection variables in the PowerApps Canvas app:

  • How to design contact information forms in the PowerApps Canvas app?
  • How to add value to the collection variable in PowerApps?
  • How to use the Collect() function in PowerApps?
  • How to use notify() function in PowerApps?
  • How to use Reset() function in PowerApps?
  • How to add the gallery control to the PowerApps form?
  • How to configure the data source in PowerApps gallery control?
  • How to add data to the collection variable in PowerApps?
  • How to use gallery control in PowerApps?
  • How to configure the collection data sources with gallery control?
  • How to clear collection variable data in the PowerApps Canvas app?
  • How to use the clear function in the PowerApps Canvas app?

See Also

You may also like the below PowerApps articles:

Buy SharePoint Online & Office 365 Administration eBook

Buy the premium version of SharePoint Online & Office 365 administration eBook from here:


Buy SharePoint Online & Office 365 Administration eBook

Reference URL

About Post Author

1 comments on “Best way to work with collection variable in PowerApps – Microsoft 365”

Do you have a better solution or question on this topic? Please leave a comment