cancel
Showing results for 
Search instead for 
Did you mean: 
SebS

Creating simple Scenario Filter in Power Apps: A Step-by-Step Guide

Recently, I saw an excellent search menu with a search Scenario display.

 

SebS_7-1692870377450.png

 

 

I decided to create a simple replica of this approach, and I hope it will be helpful to someone.

 

 

SebS_0-1692869539585.gif

 


Step 1: Set up Dropdowns

 

Create three dropdowns with simple names: "City," "Skill," and "FullName."

 

SebS_1-1692869591974.png

 

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"})

 

 

SebS_2-1692869633628.png

 

 


Step 4: Gallery Setup

 

Insert a Horizontal Gallery.

 

 

Gallery Setup

 

SebS_3-1692869653478.png

 

 


Step 5: Configure Gallery

 

Set the Gallery's Item property to the collection you created in Step 2.

 

Gallery Item Formula

 

ShowFilter

 

SebS_4-1692869721153.png

 

 


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)
)

 

SebS_5-1692869759785.png

 


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)

 

SebS_6-1692869781255.png

 


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

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?

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

 

Example.jpg

 

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.

Hello @SebS 

 

A great technique to reset all controls that need to reset. Thanks for your detailed tutoring.