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.

This post was originally published on this site