Power Community

Power Community

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.

This post was originally published on this site

- Advertisement -spot_img

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisement - Advertisement

Latest News

Unpacking the VMware Rapid Migration Plan

Allie Wolf Allie is the Marketing Manager at Dynamic Consultants Group. She graduated from Northwest Missouri State University with...

More Articles Like This

- Advertisement -spot_img