Introduction
In this article, I would like to show you how the collections variable can be used in a PowerApp.
What are we going to build?
A very simple app divided into 3 sections on one screen where:
Section 1 – “Contacts Data Entry”
The user enters the contact name, phone, and address in this section. This data is saved in a collections variable.
Section 2 – “Contacts Gallery”
A gallery in this section that uses this collection variable as its data source. This gallery also allows deleting an existing row value from the collection.
Section 3 – “Contact Details”
This section shows details about a contact selected from section 2 and allows editing and updating contact data.
Here is a screenshot of the finished PowerApp:
![]()
Let us build this one screen PowerApp canvas app using the “Blank app tablet layout” template with the following controls,
Section 1 - Contact Data Entry
Drag and drop the following labels onto your canvas app screen and set their properties, as shown in the table below.
| Control |
Name |
Text |
| Label |
lblName |
Name |
| Label |
lblPhone |
Phone |
| Label |
lblAddress |
Address |
Drag and drop the following text inputs onto your canvas app screen and set their properties, as shown in the table below.
| Control |
Name |
| Text input |
txtName |
| Text input |
txtPhone |
| Text input |
txtAddress |
When the “Add to Collection” button is clicked, we will do the following:
- Add the data in Name, Phone, and Address text boxes to a collection called “colContactInfo”
- Notify the user that the data about the contact was added to collection successfully
- Dismiss the above notification after 5 seconds
- Reset the Name, Phone and Address text boxes
In order to achieve this, drag and drop the following button onto your canvas app screen and set its property as shown in the table below.
| Control |
Button |
| Name |
btnAddToCollection |
| Text |
Add to Collection |
| OnSelect |
Collect(colContactInfo, {
Name: txtName.Text,
Phone: txtPhone.Text,
Address: txtAddress.Text
});
Notify("Contact added tocollection successfully", NotificationType.Success, 5);
Reset(txtName);
Reset(txtPhone);
Reset(txtAddress) |
When the “Clear Collection” button is clicked, we will do the following:
- Clear the “colContactInfo” collection
In order to achieve this, drag and drop the following button onto your canvas app screen and set its properties as shown in the table below:
| Control |
Button |
| Name |
btnClearCollection |
| Text |
Clear Collection |
| OnSelect |
Clear(colContactInfo) |
Next, we will add a gallery and set its data source to our collection “colContactInfo”.
Drag and drop the following gallery onto your canvas app screen and set its property as shown in the table below:
Section 2 - Contact Gallery
| Control |
Gallery |
| Name |
galContacInfo |
| Layout |
Title and subtitle |
| Data Source |
colContactInfo |
| Fields |
Title : Name
Subtitle : Phone |
Select “galContacInfo” gallery and click on the “Insert” menu, select 'Icons' and scroll all the way down to find the 'Trash' icon. Click on this icon to add it to your gallery.
When the trash icon in this gallery is clicked, we will do the following,
- Remove the currently selected item from “colContactInfo” collection
In order to achieve this, set Trash icon properties as shown in the table below.
| Control |
Icon |
| Name |
icnTrash |
| OnSelect |
Remove(colContactInfo,ThisItem) |
When the ChevronRight icon (NextArrow) in “galContacInfo” gallery is clicked, we will do the following,
- Set the “bContactDetailsEdit” which is a Boolean variable to store whether the data in Contact Details Section must be presented in Edit Mode or View Mode.
In order to achieve this, set ChevronRight icon properties as shown in table below,
| Control |
Icon |
| Name |
NextArrow |
| OnSelect |
Set(bContactDetailsEdit,false) |
Finally, let's create a section to display contact details when a contact is selected from “galContacInfo” gallery by clicking the ChevronRight icon.
Section 3 - Contact Details
Drag and drop the following labels onto your canvas app screen and set their properties as shown in the table below:
| Control |
Name |
Text |
| Label |
lblContactDetailName |
Name |
| Label |
lblContactDetailPhone |
Phone |
| Label |
lblContactDetailAddress |
Address |
Drag and drop the following text inputs onto your canvas app screen and set their properties as shown in the table below:
| Control |
Name |
Default |
| Text input |
txtContactDetailsName |
galContacInfo.Selected.Name |
| Text input |
txtContactDetailsPhone |
galContacInfo.Selected.Phone |
| Text input |
txtContactDetailsAddress |
galContacInfo.Selected.Address |
We will use a button to edit and update a selected collection variable row’s data as edited by the user.
When PowerApps starts and the “galContacInfo” gallery is empty, the text on the button will be “Edit” and the button will be disabled.
When the “galContacInfo” gallery is not empty, this section will show details of the first/selected contact from the gallery. The text on the button will be “Edit” and the button will be enabled.
When the “Edit” button is clicked, we will do the following:
- Set boolean variable “bContactDetailsEdit” to true. This will run a function and change the text of the button to “Save”. The display mode of all text inputs in this section will be set to “Edit” mode so that the user may edit the contact details.
When the “Save” button is clicked, we will do the following:
- Use the patch function to update our collections variable row data for selected gallery contact.
- Set this button’s text to “Edit”. Since the updated data has been saved, change the button text to “Edit”.
- Set boolean variable “bContactDetailsEdit” to false. This indicates that this section locked out for editing. The section will be unlocked for editing when the “Edit” button is clicked.
In order to achieve this, drag and drop the following button onto your canvas app screen and set its property as shown in the table below:
| Control |
Button |
| Name |
btnEditSave |
| Text |
If(bContactDetailsEdit,"Save","Edit") |
| DisplayMode |
If(CountRows(colContactInfo)>0, DisplayMode.Edit, DisplayMode.Disabled) |
| OnSelect |
If(btnEditSave.Text = "Edit", Set(bContactDetailsEdit, true), Patch(colContactInfo, galContacInfo.Selected, {
Name: txtContactDetailsName.Text,
Phone: txtContactDetailsPhone.Text,
Address: txtContactDetailsAddress.Text
}); btnEditSave.Text = "Edit"; Set(bContactDetailsEdit, false);) |
The display mode of text inputs in this section will be set to “Edit” mode when our Boolean variable “bContactDetailsEdit” is set to true. Otherwise, these text inputs will be locked for editing.
In order to achieve this, set the DisplayMode property of text inputs in this section as shown in table below,
| Control |
Name |
DisplayMode |
| Text input |
txtContactDetailsName |
If(bContactDetailsEdit, DisplayMode.Edit, DisplayMode.View) |
| Text input |
txtContactDetailsPhone |
If(bContactDetailsEdit, DisplayMode.Edit, DisplayMode.View) |
| Text input |
txtContactDetailsAddress |
If(bContactDetailsEdit, DisplayMode.Edit, DisplayMode.View) |
Conclusion
In this article, we saw how to use the PowerApps collections variable.
Hope you liked this article! Please share your valuable comments and feedback with me.
Stay well and happy PowerApping...!