Filter Items in Gallery based on click image

[Dorinda]

I am brand new to using Power Apps and would appreciate some guidance with this request.

I have a row of icons at the top of my home screen and I want to click on those items and have it filter the information within the gallery below.

I do not want to use a drop down, i have gotten that to work but not the experience I am looking for, I keep trying stuff and nothing is working as I want.

I have attached a screen shot to show what I am trying to do based on the drop down.

I want to click on the corresponding button/image at the top and have it filter, I have tried connecting this to another list to use for the categories, i have tried to use a drop down in the same SharePoint list.

Completely stuck.

Dorinda

[Dorinda]

I did mark this as answered but I have one issue, I need to have all items displayed below when the app opens then the ability to click on each image to filter.

I love that it is working but do I need to set a state for when the app opens or something?

[Digital]

@Dorinda 

There's a couple of ways you can achieve this. You can set the variable on the screen's OnVisible property to be an empty string and change your filter to use Starts With. This will display all items when varSelectedMenu is empty.

Personally I would change all of your context variable declarations to set a global variable instead. So for the icons where you have

UpdateContext({varSelectedMenu: "General Merch"}) change this to: Set(varSelectedMenu,"General Merch") for all your icon filter buttons.

Then in the App's OnStart property set the variable to be an empty string. This will set the variable to blank when the app starts.

Set(varSelectedMenu,"")

You could also put this variable on a button/icon for All if you want your users to be able to display all items at the push of a button.

In your gallery items property change the filter to use starts with. You might see a delegation warning that StartsWith may not work on large data sets. Read up on delegation if you are unsure about this. 

Filter(Classifieds,StartsWith(Category.Value,varSelectedMenu))

If your data set is large consider using the alternative approach I've outlined below. This will use the first filter if the variable has a value i.e. a button has been pressed and the 2nd filter if the variable is empty i.e. when the app starts.

 If( !IsBlank(varSelectedMenu),

Filter(Classifieds,StartsWith(Category.Value,varSelectedMenu)),

Filter(Classifieds,Category.Value=varSelectedMenu)

)

[Dorinda]

I couldn't get any of these to work and I do not understand how to work around the delegation issue.  I would appreciate a bit more detail.

I have created a new icon to view all but when I set it to   UpdateContext({_varSelectedMenu:""}) it is still not showing all items?

Thanks for helping me figure this out.

[Dorinda]

@Digital  can you help me figure this out please 🙂

[Digital]

@Dorinda ,

The delegation is only a warning that if you have more that 500 items to filter you might get an incomplete result set returned from SharePoint. You can increase the delegation limit to 2000 in the settings. If you are likely to have a lot of records in your SharePoint list then use the following formula in the items property of your gallery - my apologies, I posted the wrong solution in my last response!

This will filter using varSelectedMenu so long as varSelectedMenu contains a value. If varSelectedMenu does not have a value it will display all items without a filter.

If( 
   !IsBlank(varSelectedMenu),
   Filter(Classifieds,Category.Value=varSelectedMenu),
   Classifieds
)

Try this and let me know how you get on.

Is this this the first screen the user arrives at in your app? If so consider using global variables e.g. Set(varSelectedMenu, "YourCategoryName") in the OnSelect of the buttons and Set(varSelectedMenu, "") for the All filter button. This way when the app starts up all items will be shown.

Hope this helps!

[Dorinda]

@Digital I am not following or I am missing something.  If I put the Set(VarSelectedMenu, "") on the View all button  and click that button I see everything, but when I put it on the OnStart of the app the page is still blank and not showing the gallery. 

I don't want to have to click the button I want it all display on load.

This is not working or I am missing something please help me figure this out.

Dorinda

[Digital]

@Dorinda ,

Double check the variable name in the OnStart matches the one on the button. Make sure there are no UpdateContext variable declarations remaining as this will confuse Power Apps.

Once you've done that run the OnStart and press play to preview the app.

[Dorinda]

@Digital  I have done as you instructed updated all of the buttons to reflect the correct name Set(varSelectedMenu,"General Merch"), I have also ensured that the OnStart of the app is set to Set(varSelectedMenu,""), I still am not seeing the all items show up when I publish or run the app, in order to have them show I have to click the View All button which is not the experience I am looking for.

Oh and I made sure no reference to Update Context is on the form.

Now what?

[Dorinda]

ITS WORKING!!! You rock!!  It was cached DOH!