cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
SebS
Super User
‎08-24-2023 02:48 AM

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