By 
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.
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.
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)
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 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.
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.
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.
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.
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.
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:
- How to send email from PowerApps button click?
- How to open outlook from PowerApps step by step?
- Show or hide columns conditionally in SharePoint list form
- Create your first chatbot in PowerApps step by step
- Cascading dropdown in PowerApps using SharePoint data
- CRUD operations in PowerApps using SharePoint online list
- CRUD Operation in PowerApps Using Excel OneDrive
- Phone number and email validation in PowerApps
- Connect to a SharePoint list in PowerApps step by step
- Understand the difference between Set and UpdateContext function
- String concatenation function in PowerApps
- 3 ways to create Power Apps – Types of Power Apps
- Overview view of PowerApps development environment in Power Platform
- Customize SharePoint List Forms Using PowerApps step by step – Office 365
- Create free development environment using Power Apps Community Plan
Buy SharePoint Online & Office 365 Administration eBook
Buy the premium version of SharePoint Online & Office 365 administration eBook from here:
Reference URL
About Post Author
1 comments on “Best way to work with collection variable in PowerApps – Microsoft 365”