How to Create a Power Apps Collection Manually [With Practical Example]

Microsoft Power Apps has a feature called Collections, a concept we use in our real-time application.

We can create a Power Apps collection from the values of a SharePoint list, Excel Spreadsheet, SQL, or any other data source. And we can also create a Power Apps collection manually (Without using any data source).

So, in this Power Apps tutorial, I will show you the Power Apps collection syntax and how to create a Power Apps collection manually.

Moreover, I will explain how to display a Power Apps collection using a gallery control and delete a particular item from a Power Apps data group.

Additionally, we will discuss how to clear all the items from a Power Apps collection using clear() function.

What is Power Apps Collection?

• A collection is a group of data like a table, which stores the data in a Power App memory.
• Once the collection is created, it can be accessed all over the screens in a Power Apps app.
• We can store the group of data in the forms, galleries, and data tables.

Note:

Collections are stored only in temporary memory of Power Apps, that means when the user closes the application the data will be gone.

Power Apps Collection Syntax

To create a Power Apps Collection, we can write the below syntax:

Collect(CollectionName, {values});

Where,

1. Collect: This function helps to add a record to a data source.
2. CollectionName: Provide the collection name while creating a Power Apps collection.
3. Values: Provide the data as a single or multiple values to a Power Apps collection.

Power Apps Collection Example

We can create a Power Apps collection from the values of a SharePoint list, Excel Spreadsheet, SQL, or any other data source. And we can also create a Power Apps collection manually (Without using any data source).

Recently, I was working with a client project where we had a requirement to customize a form for order booking, where the end-user should provide the details like:

1: Name

2: Email

3: Product

4: Order Date

Based on the product, it should automatically display the Product Cost and Product Image. Also, there should be two button controls in the form:

Control	Description
Book button control	Once the end user provides details in the form and then clicks on the Book button control, it should display the Power Apps collection using the gallery control.
Reset button control	If they click on the Reset button control, it should reset all their provided information in the form.

In the Gallery control, the requirement is to display the group of data (items), and if the end-user needs to delete a particular item, they can click on the trash icon.

Also, we need to design the gallery control by adding a button control to clear all the items in the Power Apps collection.

Let’s see how to achieve this by the following steps:

Create a Power Apps Collection Manually

Here, we will see how to create a Power Apps collection manually:

• Open the Canvas app Power Apps, where you must manually create a Power Apps collection.

NOTE:

If you are a Power Apps beginner, then check out this complete tutorial to learn how to create a Power Apps Canvas app: How to Create a Canvas App in Power Apps

• Then we will provide a heading to it, so add a text label control -> provide a text property based on your requirement:

• Now, create an edit form manually for order booking. So, we will add six label controls and then change the text property for each of them as shown below:

Text Label control	Text Property
Name	“Name:”
Email	“Email:”
Product	“Product:”
Product Cost	“Product Cost:”
Order Date	“Order Date:”
Product Image	“Product Image:”

We will add input controls for the end users for all the next-to-label controls.

• Now, for the two label controls [Name and Email], we will add the text input control next to them. Then, we will provide the Hint text for both of them as

Name text input: "Provide your name"
EMail text input: "Provide your mail address"

• Now, for the third label control [Product], we will add a drop-down control for it. Then provide the Items property as:

Items = ["iPhone","Samsung","OnePlus"]

• The input should be based on the drop-down control for the 4th label control [Product Cost]. So, we will add another label control because the end-user should not change it.
• Now, in the Text property, provide the code as:

Text = If(drp_OrderedProduct.Selected.Value="iPhone","$1300$",If(drp_OrderedProduct.Selected.Value="Samsung","1250$","1150$"))

• Now for the 5th label control [Ordered Date], we will add the Date picker control. Then in the DefaultDate property, the code should be based on today’s date.

DefaultDate: Today()

For the 6th label control [Product Image], the input should be based on the drop-down control. Based on the drop-down values the image should display. The dropdown values are:

• iPhone
• Samsung
• OnePlus

So for that, we will add those three images using image control and make their visible property off.

• Add the three images of the Product using image control.

• Now, I need to off the visible property for all the image control.
• To off the visible property, select the image control -> In the image property pane, turn off the visible property.

• Then, image control won’t be visible as shown below:

• Then, do the same for all the remaining image control by turning off the visible property.

• Now, next to the 6th label control [Product Image] add an image control, where the image should be based on drop-down control.
• Then in the Image property, provide the code as:

Image: Switch(drp_OrderedProduct.Selected.Value,"iPhone",Iphone,"Samsung",Samsung,"OnePlus",Oneplus)

Now, we will add the button control to it. Whenever the user clicks on the button, I need to create a group of data [collection].

• Add a button control to a form, then change the text property to “Book” and the Fill property to pink.

• In the Button OnSelect property provide the code as:

OnSelect: Collect(colOrder,{Name:txt_Name.Text,'EMail ID':txt_EMail.Text,'Ordered Product':drp_OrderedProduct.Selected.Value,'Product Cost':lbl_Productcost.Text,'Ordered Date':dte_OrderedDate.SelectedDate});

Now as end users, we will add some of the data later by clicking on the Preview the app.

Once the end-user clicks on the Book button control, I want to store the data. Now we will see where the data will be stored.

• On the right-hand of the Power Apps page, click on the Variables icon (x) ->Then click on the Collections.,
• Once you click on it, it will provide the collection name you created; click on the More options (…) -> Select View Table.

• Now, it will display the stored data in the collection.

• Now, we will see how to reset all the end-user details which are provided in the form. For that add another button control next to a Book button control.
• Then in the text property, provide the text as Reset, and in the OnSelect property, provide the code as:

OnSelect: Reset(txt_Name);Reset(txt_EMail);Reset(drp_OrderedProduct);Reset(dte_OrderedDate);

• All their provided information will be reset once the end-user clicks on the Reset button control.

As per the client’s requirement, I want to display the data from my collection using gallery control. Let us see how to achieve it.

Display Power Apps Collection Using Gallery Control

Here, we will see how to display the Power Apps collection using Gallery control.

• On the Power Apps screen, add a Vertical gallery control as shown below:

• Once we click on that gallery control, a dialogue box will appear as Select a data source [in our app, we already created a collection so that it will display the collection name] -> choose the collection name.

• Now our Power Apps collection will be connected to a Gallery control.

Now, If the end-user needs to delete a particular item in the group of data. Let’s see how to do it in the below-mentioned points:

Delete an item from Power Apps Collection

Here, we will see how to delete or remove an item in the Power Apps collection. For that, we will add a trash icon and provide the code.

• Select the gallery control -> Insert the Trash icon -> Then change the color property to red as shown below:

• Select the OnSelect property, provide the code as:

OnSelect: Remove(colOrder,ThisItem)

Now, if the end-user clicks on the Trash icon, that particular item will be deleted from the group of data[Collection].

But, when the end-user needs to delete all the items of the group of data [Collection], using a single click. Let’s see how to do this by the below steps:

Clear all items from Power Apps collection

To clear our collection, a function used as:

Clear(CollectionName]

Here, I will explain how to clear all the items in the Power Apps collection.

• On the Power Apps Screen, Insert a Button control -> Then change the text property to Clear and the color property to pink.
• Select the OnSelect property, then provide the code as:

OnSelect: Clear(colOrder)

Now, if the end-user clicks on the Clear button control, it removes all items from a collection as shown below:

Per the client, this is how I manually created a Power Apps collection manually.

Furthermore, you may like some more Power Apps tutorials:

• How to Remove Duplicate Rows in Power Apps Collection?
• How to Add a Lookup Column to Power Apps Collection
• Power Apps Collection vs Table

Conclusion

In this Power Apps tutorial, we discussed what Power Apps Collection is, Power Apps Collection Syntax, and how to create a Power Apps collection manually without using any data source.

Moreover, I explained how to display a Power Apps collection using a gallery control and delete a particular item from a Power Apps data group.

Additionally, we will discuss how to clear all the items from a Power Apps collection using clear() function.