Creating simple Scenario Filter in Power Apps: A Step-by-Step Guide
Recently, I saw an excellent search menu with a search Scenario display.
I decided to create a simple replica of this approach, and I hope it will be helpful to someone.
Step 1: Set up Dropdowns
Create three dropdowns with simple names: "City," "Skill," and "FullName."
Item property City
[
"New York",
"Los Angeles",
"Chicago",
"Houston",
"Miami",
"San Francisco",
"Boston",
"Seattle",
"Dallas",
"Atlanta"
]
item property Skill
[
"Python programming",
"Data analysis",
"Machine learning",
"Web development",
"Cybersecurity",
"Cloud computing",
"Database management",
"Network administration",
"DevOps",
"Artificial intelligence"
]
Item property FullName
[
"John Smith",
"Emily Johnson",
"Michael Davis",
"Sarah Wilson",
"David Anderson",
"Jennifer Brown",
"Robert Lee",
"Linda Martinez",
"William Taylor",
"Mary Garcia"
]
Step 2: Create a Collection
Make a collection to store user choices.
When users make a selection in a dropdown, it should be added to this collection.
We'll deal with removing previous choices later.
Collection ShowFilter creates it, and we will add the below code to dropdowns in the next step.
Collect(ShowFilter, {Name: Self.Selected.Value, Control: "City"})
Step 3: Manage Dropdowns
For each dropdown, use the OnChange property.
City Dropdown Formula
Remove(ShowFilter, LookUp(ShowFilter, Control = "City"));
Collect(ShowFilter, {Name: Self.Selected.Value, Control: "City"})
Skill Dropdown Formula
Remove(ShowFilter, LookUp(ShowFilter, Control = "Skill"));
Collect(ShowFilter, {Name: Self.Selected.Value, Control: "Skill"})
FullName Dropdown Formula
Remove(ShowFilter, LookUp(ShowFilter, Control = "FullName"));
Collect(ShowFilter, {Name: Self.Selected.Value, Control: "FullName"})
Step 4: Gallery Setup
Insert a Horizontal Gallery.
Gallery Setup
Step 5: Configure Gallery
Set the Gallery's Item property to the collection you created in Step 2.
Gallery Item Formula
ShowFilter
Step 6: Display User Choices
In the label's Text property, use ThisItem.Name to show the user's choice.
In the icon's OnSelect property, add code to remove the choice from the collection and reset the appropriate dropdown based on the choice's control name.
Icon OnSelect Formula
Remove(
ShowFilter,
ThisItem
);
Switch(
ThisItem.Control,
"City",
Reset(City),
"Skill",
Reset(Skill),
"FullName",
Reset(FullName)
)
Step 7: Clear All Choices
Add a button outside the gallery.
Use UpdateContext to create a variable called ResetFilter.
Set this variable to true and then false.
Finally, use Clear to clear the entire collection, removing all choices from the gallery.
Button OnSelect Formula
UpdateContext({ResetFilter: true});
UpdateContext({ResetFilter: false});
Clear(ShowFilter)
That's it! You've set up a system to filter and display user choices in your app using Power FX formulas. Remember to replace "City," "Skill," and "FullName" with your actual control names.
Comments
-
Creating simple Scenario Filter in Power Apps: A Step-by-Step Guide
Hello @LHammer2023
It's controlled by Reset property of each of the control using a variable I will try to make it more clear and update it.
basically You creates a variable :
UpdateContext({ResetFilter: true}); UpdateContext({ResetFilter: false});
And in Reset Property of each Control You need to relace false with name of the variable in this case :
ResetFilter
You replacing :
Reset(FullName); Reset(City); Reset(Skill)
With
UpdateContext({ResetFilter: true}); UpdateContext({ResetFilter: false});
this approach helps a lot when you have 10-15 controls to reset with one button rather naming them all.
-
Creating simple Scenario Filter in Power Apps: A Step-by-Step Guide
Hello @SebS
Thanks for sharing this excellent approach. Following your steps, I managed to make a replica😊. Because for Step 7: Clear All Choices in last snapshot I can't recognize which property of the City Dropdown is set to
the variable ResetFilter. I use below formula to reset these 3 dropdown controls instead.
Reset(FullName); Reset(City); Reset(Skill)
Would you like to upload to a clearer snapshot?
*This post is locked for comments