Canvas App – 847 Tech

How to Remove multiple items from Gallery list – Add Delete Button in Gallery control

Following up on my previous post about enhancing the UI for Canvas Apps in PowerApps, I was inspired by this post to make a tutorial for extending the remove functionality in PowerApps.

Here is where we left off on the previous post, in this example I am using the mobile template for apps but everything else is identical to the previous app. In this tutorial, we will be developing a solution that allows the user to select multiple contacts and be taken to a confirmation screen to confirm their choice to delete contacts.

First, we will have to add a column to our table to keep track of which contacts we have selected. Here I am using AddColumns() to add “toBeDeleted” alongside “RandomIndex” (which is being used to set our color), and setting its default value to false.

In this app, we are using ClearCollect() to create a collection instead of adding a column directly on the Gallery Items. This is so that we can edit this data locally without having to update the backend data source. It is also currently not possible to create a collection within the Gallery Items section. After creating your collection, set your gallery items to the created collection.

Next, we are going to add a trash icon to our gallery, this can be done by clicking inside a gallery item and selecting the “Icons” button on the top toolbar.

Inside our delete icon, we are going to first change the OnSelect() code to set the selected items value to the opposite of what it currently is on click of the icon.

We are also going to add an if statement inside the icons color so that we can differentiate contacts that have been selected for removal.

Finally, we can add our delete button, and fill in the following for OnSelect(). What our code is doing here is removing the record from the datasource as well as our local collection, records to be removed are determined by having a true “toBeDeleted” value.

Here I added some code to disable the button if we do not have any members for removal. This disables the OnSelect() so that users do not mistakenly think they can remove members without selecting anyone to remove.

Here is an example of a confirmation screen you can create for deletion using this method.

How to Create Gallery items With Multi-Colored Icons In PowerApps Canvas Apps

This is the first blog post on 847. Written to help PowerApps Users who want more stylish Gallery Options.

Gallery items in Canvas Apps give developers an easy way customize how they want to display data. Below is an example gallery I made in a demo app that is getting its information from the “Contacts” Entity in the Common Data Service.

By clicking on the “Edit” button on the fields menu we can see what fields from the contact are being used to populate our gallery items.

Though the gallery item is very easy to use and customize, often developers want to extend it even further and develop a custom UI for viewing their galleries. This is what I was attempting to do when I ran into a blocker for being able to use different colored icons for my gallery items so that they would be easily differentiable. However, currently Canvas App does not offer any out of the box options for multi colored gallery item icons.

Below is my solution:

First, we have to add a color palette for our gallery icons, we can do this by adding color values to a table variable that we will initialize using the Set() function. Below I have only added 4; but the more colors that you add to your color palette, the better the randomization and color variation will be.

After this, we want to add a value to our data so that we can use this to reference our color palette selection. Here I am adding a column using the AddColumns() function, I am using 4 as a multiplier here due to there only being 4 colors in my palette.

Finally, we want to add code to our icon so we can display our random color. Here I am changing the fill on our circle Icon to display the first color in the pallet if the item has a random value less than 1 (our min), and the last color in our pallet if the item has a random value more than 4 (our max). Values in-between use the LookUp() function to get the appropriate color.

Finally here we have our finished product with different colored icons in the gallery!