In my last blog post I explained how to create a form screen including a gallery in order to add/edit/view table entries and browse them. (LINK).

We’ll now learn how to filter the data in different ways

  • using a drop down control
  • using another gallery
  • by the actual user

Preview

Filters in Action 🙂

Filter PowerApps Gallery Using a Drop Down Control

We start where we left with creating the form screen and add a drop down field. To have some name values to filter I just set the Items property to

["Martin Wölzmüller", "Otto Walker", "Christian Gut"]

Of course you can fill the drop down items to any data source you want.

Create Drop Down Field

Now as we have some filter values, we’ll start editing the gallieries Items property. The desired function looks as Filter([DataSource], value = DropDown.Selected.Value)

Adjust the Galleries Items Property
Filter(
    MWO_DeviceLists,
    'Device User Name' = Dropdown1.Selected.Value
)

Once we play the PowerApp and start using the drop down list, we’ll see the content of the gallery changing accordingly.

Filter by Drop Down Control – Result 1

Filter by Drop Down Control – Result 2

That was pretty easy, wasn’t it? Let’s go for the next one.

Filter PowerApps Gallery Using Another Gallery

I’ll now copy the existing form screen, remove the drop down control and set the gallerie’s Items property back to have a clean start. Finally I’ll rename it to ‘Form Screen GalleryGallery Filter’

Duplicated Screen, Controls and Property Set Back to Start

Now we are going to add a new screen which should hold the second gallery which holds the filter values for our device list. To have some data for the gallery I’ll now collect some data once the screen loads – as before you may of course use your preferred data source that holds the required data.

For my sample I’ll fill the OnVisible property of the new screen with the following function to have a user list. The collection will be called “col_Users”.

ClearCollect(
    col_Users,
    {
        Name: "Martin Wölzmüller",
        Phone: "+49 1578 455 789 236",
        Mail: "me@mail.com",
        Department: "Sales"
    },
    {
        Name: "Christian Gut",
        Phone: "+49 1778  987 456 132",
        Mail: "he@mail.com",
        Department: "Procurement"
    },
    {
        Name: "Otto Walker",
        Phone: "+49 1611 311 788 555",
        Mail: "ow@mail.com",
        Department: "Human Resources"
    }
)
Collect User List for New Screen

Now I’ll rename the screen to ‘User List Screen’ and add the gallery and set the Items property to the new collection col_Users (or your preferred data source)

User Gallery

To allow switching to the device screen you could either set the galleries OnSelect property to navigate to the device screen or you may just add a button. – we’ll go for the button and set it’s OnSelect property to navigate us to the device screen. The navigate function always includes information about the target screen and the way the screen shall be changed (cover, fade…)

New Button for Navigation
Navigate(
    //Target Screen
    'Form Screen GalleryGallery Filter',
    //Transition information
    ScreenTransition.CoverRight
)

For better overview, we’ll rename the user list gallery to ‘GAL_Userlist’ – proper naming of elements is always a good thing once the app is getting more complex 🙂

Now we click the button – and we are back to our duplicated form screen. We should see all list items now. As we’d like to filter them by the user list gallery, we now set the device list gallery’s Items property as follows.

Adding Filter to Device Gallery
Filter(
    MWO_DeviceLists,
    'Device User Name' = GAL_Userlist.Selected.Name
)

For better navigation, we’ll now add a back icon to the screen, so whe can navigate back to the user list screen. We’ll use the back function in this case – always a safe way to bring us back from where we came. Back is very similar to navigate the function works as Back(Transition Mode)

Adding the Back Icon
Back(ScreenTransition.UnCoverRight)

Now switch back, select another entry from the user list and click the Device List button again. Easy enough, right?

Filter Result

Filter By Actual User

Filtering a list by the actual user is very easy as well. To do this, we’ll just copy the form screen again and rename it to ‘Form Screen User Filter’. Again we reset the gallery’s Items property to the intial value.

To enable filtering by the actual user in PowerApps, Microsoft added a user function which you can use to gather information about the actual user.

  • Email
  • Full Name
  • Image
PowerApps User Function

Having this in mind, it’s really easy to define the filter. Just edit the gallery’s Items property accordingly. In my case I’ll filter by the Full Name.

Filter PowerApps Gallery By Actual User
Filter(
    MWO_DeviceLists,
    'Device User Name' = User().FullName
)

As you might have realized, we now have those blue underlines in our code. This means we have a problem with delegation which might lead to incomplete data sets. In general this happens regularly when we try to filter data sources by values that are calculated on the fly. There is an easy workaround for this problem. Somewhere in the app you might want to add a label, rename it to ActualUserName and the the label’s Text property to User().FullName.

User().FullName

Now change the gallery’s filter again to be

Filter(
    MWO_DeviceLists,
    'Device User Name' = ActualUserName.Text
)

Tadaaa, no more blue underlines 🙂

Filter Result – Filter By Actual User

To make the app great again, you can now just put the label to invisible…

Thanks for reading 🙂