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	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...!