cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
Frequent Visitor

Add a button that filters gallery

I have a gallery with the following formula:

 

SortByColumns(Search(Lunchlijst,Zoeken.Text,"Title","Achternaam"),"Achternaam",Ascending)

 

This works, as i can use the search box to search in the Title en Achternaam columns. I also want to add a button that when people click on it, it returns the gallery items where the InternofExtern column is equal to Intern. I have no idea how i must do this, can somebody help? 

7 REPLIES 7
Highlighted
Super User
Super User

Re: Add a button that filters gallery

There are probably several ways to do this but one way is to use UpdateContext() to create a new variable that represents your Gallery items and assign it to the button. I am assuming that you want the gallery to initally show all items and then to have a button filter your list and to be able to toggle between the two options.

1) Set the Screen's OnVisible property to UpdateContext({FilteredList: SortByColumns(Search(Lunchlijst,Zoeken.Text,"Title","Achternaam"),"Achternaam",Ascending),buttonvis: true})

2) Set the Gallery's Items property to FilteredList

3) Add a new button and name it "Intern". Set the button's OnSelect property to: UpdateContext({FilteredList: Filter(SortByColumns(Search Lunchlijst,Zoeken.Text,"Title","Achternaam"),"Achternaam",Ascending),InternofExtern="Intern",buttonvis: false}). Set the button's Visibility property to buttonvis.

4) Add a second button and name it "All".  Set its OnSelect property to UpdateContext({FilteredList: SortByColumns(Search(Lunchlijst,Zoeken.Text,"Title","Achternaam"),"Achternaam",Ascending),buttonvis:true}). Set this button's Visibility property to !buttonvis.

5) Line up the buttons so they exactly overlap. 

Highlighted
Frequent Visitor

Re: Add a button that filters gallery

Any ideas?

Highlighted
Super User
Super User

Re: Add a button that filters gallery

Several ways to do this but you can use UpdateContext() to create an alias for your gallery Items property.  I am assuming that you want to toggle the gallery to show all the items and then the filtered items.  I would do as below:

1) Set the screen OnVisible property to UpdateContext({FilterList: SortByColumns(Search(Lunchlijst,Zoeken.Text,"Title","Achternaam"),"Achternaam",Ascending), buttonvis:true})

2) Set the Gallery Items property to FilterList.

2) Add a button and Name it "Interns".  Set its OnSelect property to UpdateContext({FilterList:Filter(SortByColumns(Search(Lunchlijst,Zoeken.Text,"Title","Achternaam"),"Achternaam",Ascending),InternofExtern=Intern),buttonvis:false}). Set the Visibility property of the button to buttonvis.

3) Add a second button and Name it "All". Set its OnSelect property to  UpdateContext({FilterList: SortByColumns(Search(Lunchlijst,Zoeken.Text,"Title","Achternaam"),"Achternaam",Ascending), buttonvis:true}). Set it's Visibility property to !buttonvis.

4) Exactly overlap the two buttons. Let me know if you have any problems.

Highlighted

Re: Add a button that filters gallery

Hi @rschalker,

 

This might be a little easier using a toggle. A toggle has 2 specific states: on or off.

When you use a toggle you cab add an If-statement to your formula to filter or not depending on the state of the toggle.

Since you use the search formula that complicates things a bit because the toggle should act as a filter. 

What you could do is maken an if-statement that specifies when to use the filter option and use your currect search formula as the datasource in your filter. 

 

Something like this:

 

SortByColumns(
	If(
		Toggle.Value=true,
		Filter(
			Search(Lunchlijst,Zoeken.Text,"Title","Achternaam"),
			InternofExtern = "Intern"			
		),
	Search(Lunchlijst,Zoeken.Text,"Title","Achternaam"
	)
	"Achternaam",Ascending
)

Your formula states that the items shown should allways match the search text in Title or Achternaam, but should only be filtered on InternofExtern when the toggle is 'On'. Sorting in both cases is done by Achternaam. 

Highlighted
Frequent Visitor

Re: Add a button that filters gallery

Hi,

 

Thanks for your answer. I tried step 1, but i get an error. ParentClose is expected, error is found.

 

UpdateContext({FilterList: SortByColumns(Search(Lunchlijst,Zoeken.Text,"Title","Achternaam"),"Achternaam",Ascending), buttonvis:true})

 

 

 

Highlighted
Community Support
Community Support

Re: Add a button that filters gallery

Hi Rschalker,

 

Have you tried the suggestion posted by @Rebetcha?

 

Using a toggle or checkBox should be better to control the items within the gallery.

 

Besides, for the error messages, would you please share a screenshot for it?

The formula posted should be able to work with the two variables.

Adding the function reference:

UpdateContext function in PowerApps

 

Regards,

Michael

 

Community Support Team _ Michael Shao
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.
Highlighted
Super User
Super User

Re: Add a button that filters gallery

The key is to create an alias for the items in your gallery and then filter the alias.  I agree that using a toggle be easier than using two buttons but your question indicated a preference for a button. I tested this using one of my own galleries and it worked for me. 

Add two buttons to the screen outside of the gallery, Name one "All" and the other "Intern".

Set the OnSelect of the first button to UpdateContext({ds:  Lunchlijst}) and  the second to UpdateContext({ds: Filter(Lunchlijst,InternofExtern="Intern")}) . 

Change your Gallery's Items property to SortByColumns(Search(ds,Zoeken.Text,"Title","Achternaam"),"Achternaam",Ascending)

To have the Gallery show all of the items unfiltered when the screen becomes visible, set the screen's OnVisible property to UpdateContext({ds:  Lunchlijst})

Helpful resources

Announcements
secondImage

New Return to Workplace

Reopen responsibly, monitor intelligently, and protect continuously with solutions for a safer work environment.

Experience what’s next for Power Apps

Join us for an in-depth look at the new Power Apps features and capabilities at the free Microsoft Business Applications Launch Event.

Check this Out

Helpful information

Featuring samples like Return to the Workplace and Emergency Response Applications

secondImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

Top Solution Authors
Top Kudoed Authors
Users online (8,408)