PowerApps Collections Variable

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
  1. Collect(colContactInfo, {  
  2.     Name: txtName.Text,  
  3.     Phone: txtPhone.Text,  
  4.     Address: txtAddress.Text  
  5. });  
  6. Notify("Contact added tocollection successfully", NotificationType.Success, 5);  
  7. Reset(txtName);  
  8. Reset(txtPhone);  
  9. 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
  1. If(btnEditSave.Text = "Edit", Set(bContactDetailsEdit, true), Patch(colContactInfo, galContacInfo.Selected, {  
  2.     Name: txtContactDetailsName.Text,  
  3.     Phone: txtContactDetailsPhone.Text,  
  4.     Address: txtContactDetailsAddress.Text  
  5. }); 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...!