In this tutorial, we will be answering a question by one of our PowerApps users on how to work with a collection in PowerApps. The tutorial will cover collections, which are a special type of PowerApps variable. These allow you to work with the data as a whole data instead of just individual pieces of information. And this is pretty handy.
What are Collections?
Most variables set one piece of information and retrieve that one piece of information - whether in context or globally. Collections, however, let you create a table of information so you can store bigger things, such as shopping cart data, or a whole bunch of data to let users prune though it before you submit it and send it off on email. Collections open up the ability for you to create a bunch of different solutions.
In this Tutorial
We start with the basics on how to use PowerApps Collections and how they work. After this, you will then be able to move on to the more complex stuff in subsequent tutorials. The functions we will use in this tutorial include Collect, ClearCollect, Patch, and Remove.
If it's other types of variables you are after, don't worry, we have a video covering global and contextual variables. To watch Intro to PowerApps Variables video, click here.
Getting Started with PowerApps Collections
Collect
First up, sign in to PowerApps. Once you're in, click on Create, and then Canvas app from blank. We're going to work with a blank template, so click Tablet under Format and name your app. Tablet format will give you a little more space. If this is your first time creating an app, you may see a pop-up, just click Skip to skip over the tutorial.
Pro Tip: It is a good idea to watch the tutorial at some point.
So let's get to building out and working with a collection. Firstly, click the Insert tab and click the Label button. Make three labels: Name, Phone Number, and Comments.
Pro Tip: Once this is done, it's good practice to go into the Tree View on the left panel of the Screen and change the name of your labels. Try following a naming convention like starting the name of all your labels with “lbl”.
Now click the Insert tab and click the Text button and choose the Text Input option. Do this three times and align them alongside your labels. Once this is done, delete the default text in these Text Input controls by selecting the Default property in the property dropdown at the top or the properties pane on the right side of the screen. Now go and rename these in the tree view: I_Name, I_Phone, and I_Notes. Then click the Insert tab and insert a Button. Double click on the button to change the text property; type Add to Collection.
Side Note: To use a collection, you simply have to define it with the Collect or ClearCollect functions. You don't have to define it elsewhere or set it up ahead of time. All you have to do is pass some data, give it a name, and make a collection.
To set up your collection, go to the OnSelect property of your button and type in the formula bar: Collect(ContactInfo, {Name:I_Name.Text, Phone:I_Phone.Text, Comments:I_Notes.Text})
You can check if this worked by clicking the Play icon at the top right of your screen, which enables your Preview mode, and then you can type in the text for each column and click the Add to Collection button. Although it doesn't look like anything has happened, we simply don’t have a way to display the collection yet. To check the contents of your collection, close Preview and click the View tab and click the Collections button, it will show you the first 5 rows of information for your collections.
Now let's go back so we can add more to our collection. Click the Back button and then Play icon and type in your dog's name, partner's name, mother's name, etc. and comments and click Add to Collection. Close Preview, and now we have some more data added to our collection.
Gallery
If you want to have a feature that allows you to look at your data in the app, you can use a gallery. So click the Insert tab and the Gallery button and for the tutorial let's choose the Vertical option. It will be added to your page. Now, realign it to where you want it on the page by dragging it.
Once it's placed, click DataSource in the Gallery pop-up box and you'll see your ContactInfo collection listed there. If you click it, the gallery will display your collection instead of sample data. You can choose Layout on the right hand properties pane. For this we don't have any images, so we'll just choose Title and Subtitle. Set Title to the person's Name and Subtitle to the Phone number.
Now if you click the Play icon, you will see the records show up and add more Now that you know the basics of how collections work, you can use them for different scenarios.
Clear the Collection
Let's look at how we can manipulate the data in your collection by clearing it out to start from scratch.
First, close the Preview screen. Highlight the Add to Collections button, and hit Ctrl + C and then Ctrl + V to copy the button. Move the new button next to your first button on the page. Now change the button text by double clicking or going to the Text property to say Clear the Collection.
Now in the properties dropdown, choose OnSelect and type Clear(ContactInfo) in the formula bar and that will do it. Click the Play icon, and then hit the Clear the Collection button. You'll see that all the data is now gone.
Remember to leave data in your list before you click to Clear the Collection. It's easier to work that way so that you can learn and test easier.
Pro Tip: You can press and hold down the Alt key while testing features in your app to enable preview mode without pressing the Play icon or expanding the application.
There is also a command that you can use called ClearCollect. ClearCollect will clear out the collection and then start putting data back in. The idea behind this to be able to wipe out and replace data in one step.
Remove
Now you know how to create and clear out your whole collection, but what if you want to get rid of just one record or row in your collection? Click on the Gallery card and click Insert Tab and the Icon button, and then choose the Trash can icon. Now grab the icon and move it to where you'd like to see it, adjusting the size if necessary.
Now type into the OnSelect property in the formula bar Remove(ContactInfo, ThisItem). ThisItem represents the item which is currently highlighted. Once you've added this prompt, you can click on your Trash can, and you'll see the item disappear. Easy as that. PowerApps is giving you the ability to work with individual items through the gallery. And now if you click Add to Collection, you'll see more items appear with the trash can icon as you click and have the ability to delete them as you wish.
Working with Items
Next, we'll focus on how to work with items. If you take a look at the comments, it doesn't have a lot of space to show you all the comment text. You can add a separate screen at the bottom that will allow this. So click the Insert tab and the Label button. Grab the label and move it where you want, and double click the label to change the text. Type in Item Details. Then click on the Home tab, change the font to make it stand out a bit to show it's important.
Once this is done, click on your Name label on the top of your screen and copy it by clicking Ctrl + C and pasting it below your new Item Details label by clicking Ctrl + V. Then click the Insert tab and the Text button and choose the Text input option. Drag and place it under the new Name label. Now go to the prompt bar and delete the Text Input text, because what we want is to specify the current item that has been clicked on. To do this, specify the name of your gallery, the item, and the field you wish to show. Type in Gallery1.Selected.Name
Now let's look at that in Preview mode. First, quickly add to your collection. When you have done that you'll see the arrow in the Gallery card. If you click the arrow, you'll see the name details change at the bottom in the Item Details.
Side Note: Another thing we could have done with the arrow icon is to Click on the arrow icon then type in the OnSelect property in the formula bar Select(Parent);Navigate(Screen2Name) - replacing the underlined portion with the name of an additional screen if you had one.
Let's finish up the Item Details task. Click on the Phone Number and Comments labels at the top of your page and then copy and paste them by clicking Ctrl + C and Ctrl + V. Then drag them to the bottom of the screen under the new Name label. Once this is done, add the Text Input again by clicking the Insert tab and the Text button and choosing the Text Input option. Make the default property in the formula bar Gallery1.Selected.Phone for this input. And for the next one, Gallery1.Selected.Comments
Make the box for the Comment Text Input bigger than the rest of the boxes, so you can read all the comments.
Edit
Now if you go back to the Preview screen, we can see things look a bit awkward. Although you can type in the comments section in Item Details, there is no way to save this information. If you don't want users to be able to edit the fields,you need to Select all three fields and go to the Home tab and click the Group button, and then we can set a property.
In the Screens tab on the left, you can see Group1 added. Click on the dropdown arrow in the Properties bar above the tree view and click Display Mode. You'll see in the formula bar that the default for Display Mode is DisplayMode.Edit -delete Edit and type in DisplayMode.View to see what happens. In Preview mode you'll see that you now can't type/edit in the Item Details fields anymore.
But what if the users want to edit these fields? Okay, let's do that. We'll start by adding another icon. Click the Insert tab and the Icon button, choose the Edit/pencil icon and drag it down to the bottom with Item Details. While you have the icon highlighted, you can set the variable. For the OnSelect property type into the formula bar Set(Edit, rue) - then click on your grouped labels and click on Group1 in the Screen tab, and above this you'll see the DisplayMode property.
You'll need an If statement in the formula bar. So type If(Edit, DisplayMode.Edit, DisplayMode.View) So let's check if that worked in Preview. Click on the Edit icon, and you can see that you can edit the labels. To make it look better, you may want to have the Edit icon be a toggle or a button that says turn off Edit Mode, etc.
Save and Patch
The last thing we'll cover is how to overwrite existing data if your user took advantage of the Edit button and they changed a field such as the Name. After they are done making a change, you'll want the edits saved. Click the Insert tab and the Button button and drag it under the Edit icon in Item Details and change the text on it to read Save. In OnSelect property in the formula bar, we're going to apply a patch. A patch applies the updates to a specified row and changes it in the data source. Type in Patch(ContactInfo, Gallery1.Selected, {Name: I_Name2.Text, Phone: I_Phone2.Text, Comments: I_Comments2.Text})
Side Note: If you didn't label your Group1 fields in the Screens tab, this is where it can get confusing, so label them now - I_Name2, I_Phone2, I_Comments2.
Now let's see if that worked in Preview. Edit the first name, click Save and then you'll see in your Gallery item at the top, the name has been changed. Using Patch, you can edit the data for a collection, but it also works on your other data sources which we will further explore in future tutorials.
And that's a wrap. You now know how to create a collection, delete all the rows to clear the collection, remove an individual item out of a collection, and how to edit specific items in the collection.
Why PowerApps?
If you're looking for an app that lets you build seamless and professional applications for your business, PowerApps is your best bet. PowerApps can help you easily streamline processes and solve challenges your organization may be facing. Plus, PowerApps lets you customize and optimize every detail of your app for specific tasks and roles.
Whatever your requirements, PowerApps lets you build all the business applications you need. Whether you need assistance with an issue or complete project services, PowerApps is here to help. To watch the full video tutorial on Working with a PowerApps Collection, click here.
Comments