Working with Collections in Power Apps

[Priyaranjan]

                                                        

 

Introduction

 Collections are special types of variables or data storage mechanism which can be used to manipulate the data within Power Apps. Collections are usually a group of similar items which acts like a table of values with columns and rows. We can create, update, delete, use it as the data source for a gallery to view the items within Power App.

In this article we will see how we can work with collections and explore the entire CRUD(Create,Read,Update,Delete)Lifecyle of the Collection within the Power App.

Add to Collection

So as to implement the addition of data to the collection, we will add the below 4 labels and text input using which user can input the data that needs to be added to the collection.

Labels	Text Inputs
Label_Manufacturer	TextInput_Manufacturer
Label_Model	TextInput_Model
Label_Month	TextInput_SalesMonth
Label_SalesCount	TextInput_SalesCount

We will also add a button and set the below formula on its OnSelect Property to add the Text Input Values to the Collection

Collect(SalesData,{Manufacturer:TextInput_Manufacturer.Text,Model:TextInput_Model.Text,Month:TextInput_SalesMonth.Text,Count:TextInput_SalesCount.Text})

Here we use the Collect method to save the data to the Collection named SalesData. The collection will be created with this name, if it does not exist already. The key value pair inside the braces are read as {Column in Collection : Value to be saved inside the colum}. The column will be created in the collection, if it is not already present. So in this case it will create the column Manufacturer and save the text value from the input TextInput_Manufacturer . Same way, it will copy over the remaining input text values as well to the collection.

Testing the addition of data to collection

Let’s click on the Preview button in the top right corner to play the app and test the data input. Adding the data and clicking on the button will save the input values to the collection

Heading back to the canvas and clicking on the View -> Collections will open up the collection in the UI which will list the recently added data.

Thus we can see the Collection named SalesData with the data

View the Collection Data

Since in the previous section, while clicking on the Button added the data to the collection in the back end and we couldn’t see the action in real time, lets add a Gallery control to view the added collection data as soon as its saved to the collection.

Let’s add a Gallery control and set its data source to SalesData Collection.

We can update the Gallery to show the desired layout by editing the Layout from the Properties tab.Below, we have changed the Image,Tilte and Subtile Layout to Title and Subtitle layout as we don’t have to show any image. We can also update the fields that needs to be shown in the gallery by mapping the fields from collection to the Title and Subtitle in the layout.

As by default we have just 2 fields in the Title, Subtitle layout, we can add the remaining fields by dragging and dropping labels to the Gallery. Dropping the 2 new labels in to the Gallery, will automatically pick the remaining fields in the collection and tag it to the new labels in the Gallery. In case you want to map the newly added labels to a different set of fields in the collection, we can do that by heading over to the Properties tab of the gallery ->Edit.

We have added few Labels to denote the field names and rearranged the Gallery to look a bit more polished.

Since in our demo, we will be using the Gallery to write back updates values to the collection, having the label hold the values will make it impossible to write back . So as to make the values editable we will remove the Labels that hold the values of the collection and replace it with Text Inputs and retain the labels that hold the field names.

View Items in the Collection

Let’s test the View function of the Updated Gallery by playing the app. The newly added data is coming up live in the Gallery .

Edit the Individual Collection record

We will remove the Right arrow as we are not intending to show any child data on its click for now. Instead, we will add a new Button to Enable us edit the individual records in the Gallery and Save them back to the Collection on Button Click.

But before doing that, lets define a variable EditCollection which will have the initial value as false.We will use this variable to toggle the Edit Functionality of the Collection.

Next, we will add a button that lets us toggle the edit functionality of the collection. We will update the Variable to toggle the values using the formula :

Set(EditCollection,!EditCollection)

Now we will toggle the Display mode of the Value Text Input boxes based on the EditCollection variable value. So as to apply the formula to all 4 text inputs, lets group them together.

We will then set the formula on the Group’s DisplayMode property to set it to Edit Mode if the Toggle Variable is true.

If(EditCollection = true,DisplayMode.Edit,DisplayMode.View)

Now that we have set the Functionality to toggle the Edit function of the collection, lets add a Icon clicking on which it will save the changes back to the collection.

Patch(SalesData,Gallery_ShowSalesData.Selected,{Manufacturer:TextInput_Gallery_Manufaturer.Text,Model:TextInput_Gallery_Model.Text,Month:TextInput_Gallery_Month.Text,Count:TextInput_Gallery_Count.Text})

Lets test the Save functionality by playing the app and changing the Count from 500 to 750

Clicking on Save will update the collection and we can see that the collection is now updated with the latest value of 750 for Polo GT

Remove Item from Collection

Lets move to the final section of CRUD, where we implement the Row Wise Delete functionality as well as the entire collection deletion

Row Wise Deletion

So as to remove a row in the gallery from the collection, we will add a Trash Icon and add the below formula that will remove the record from the collection.

Remove(SalesData,ThisItem)

Delete Complete Collection

We can also add a functionality to delete the entire collection in one go by adding a button and using the Clear function.

Clear(SalesData)

Running the app and clicking on Clear Collection has cleared the entire gallery

If we check from View->Collection, we can see that the collection has been cleared.

Summary

Thus we saw how to use Collection and work on the Complete LifeCycle of Create,Read,Update,Delete records within the Collection.