cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Anonymous
Not applicable

Format specific items in ListBox based on criteria

Hi,

 

Does anybody know of a way to format the display properties of certain items in a ListBox control based on some criteria? For Example:

 

Sample Table:

 

Name      |       Status

-------------|----------------

Sarah      |       On Time

Mike        |       Late

Tod          |       Late

Matt         |       On Time

 

In the ListBox, where the items property is set to Name, I'd want the names of people who are Late (Mike and Tod) to display in Red font on the ListBox, and On Time names (Sarah and Matt) to be black.

 

I think this is easy if there is a way to do it. I just don't know how to reference specific items in a listbox. I'm thinking something leveraging the ForAll formula like:

 

ForAll(
    Table,
    If(
        Status = "On Time",
        RGBA(0, 0, 0, 1),
        RGBA(255, 0, 0, 1)
        )
    )

 

Any help much appreciated!

 

1 ACCEPTED SOLUTION

Accepted Solutions
CarlosFigueira
Power Apps
Power Apps

The listbox itself cannot do that, it does not have the functionality to change the formatting on a per-item basis.

 

An alternative is to use a gallery to behave like a list box. Here are some steps to do that as shown below:

ForumPost001.PNG

First you need to have a collection with the data that you need to display in the gallery and an additional flag (to identify whether the item is selected or not). In my case, I'm using a local collection, but you should be able to get that information from whatever data source you're using. Here's the code to initialize the collection:

ClearCollect(Table,
    { Name: "Sarah", Status: "On Time", Selected: false },
    { Name: "Mike", Status: "Late", Selected: false },
    { Name: "Tod", Status: "Late", Selected: false },
    { Name: "Matt", Status: "On Time", Selected: false })

Now I add a gallery (blank vertical), and add a label on the gallery template. With the following properties, you should get a behavior similar to what you want:

Gallery1.Items: Table
Gallery1.BorderThickness: 2
Label1.Text: ThisItem.Name
Label1.Color: If(ThisItem.Status = "On Time", RGBA(0, 0, 0, 1), RGBA(255, 0, 0, 1))
Label1.Fill: If(ThisItem.Selected, RGBA(62,96,170,1), RGBA(0, 0, 0,0))
Label1.OnSelect: Patch(Table, ThisItem, {Selected: !ThisItem.Selected})

You'll need to update the layout to have the label fill the entire gallery template, and you may have to update paddings / borders, and you can make it look just like the listbox.

View solution in original post

5 REPLIES 5
bean
Continued Contributor
Continued Contributor

Correct me if I'm wrong. Here's my thoughts after giving it a try.

 

I don't think it is possible to access each field in a list box on an individual level. So while you can get selected values, you can't get the properties of each one that isnt selected.. 

 

tl;dr nah, but am very interested to see if someone has a solution to this!

 

Sean

CarlosFigueira
Power Apps
Power Apps

The listbox itself cannot do that, it does not have the functionality to change the formatting on a per-item basis.

 

An alternative is to use a gallery to behave like a list box. Here are some steps to do that as shown below:

ForumPost001.PNG

First you need to have a collection with the data that you need to display in the gallery and an additional flag (to identify whether the item is selected or not). In my case, I'm using a local collection, but you should be able to get that information from whatever data source you're using. Here's the code to initialize the collection:

ClearCollect(Table,
    { Name: "Sarah", Status: "On Time", Selected: false },
    { Name: "Mike", Status: "Late", Selected: false },
    { Name: "Tod", Status: "Late", Selected: false },
    { Name: "Matt", Status: "On Time", Selected: false })

Now I add a gallery (blank vertical), and add a label on the gallery template. With the following properties, you should get a behavior similar to what you want:

Gallery1.Items: Table
Gallery1.BorderThickness: 2
Label1.Text: ThisItem.Name
Label1.Color: If(ThisItem.Status = "On Time", RGBA(0, 0, 0, 1), RGBA(255, 0, 0, 1))
Label1.Fill: If(ThisItem.Selected, RGBA(62,96,170,1), RGBA(0, 0, 0,0))
Label1.OnSelect: Patch(Table, ThisItem, {Selected: !ThisItem.Selected})

You'll need to update the layout to have the label fill the entire gallery template, and you may have to update paddings / borders, and you can make it look just like the listbox.

bean
Continued Contributor
Continued Contributor

Good effort.

Anonymous
Not applicable

Thanks Carlos! I was thinking about changing to a gallery because of the formating cabilities of ThisItem and your example is spot on.

 

Is there a way to have the up/down arrow keys change the selection of a Gallery the way they do in a ListBox? This is a nice feature of a ListBox that allows the user to quickly go through records, I think you have to click through with a Gallery.

Unfortunately you cannot rely on arrow keys on the galley - PowerApps currently doesn't support key-related events - although some sort of keyboard-based navigation for the gallery should be coming. You can create a new feature request in the PowerApps Ideas board for this.

Helpful resources

Announcements
Power Apps News & Annoucements carousel

Power Apps News & Announcements

Keep up to date with current events and community announcements in the Power Apps community.

Community Call Conversations

Introducing the Community Calls Conversations

A great place where you can stay up to date with community calls and interact with the speakers.

Power Apps Community Blog Carousel

Power Apps Community Blog

Check out the latest Community Blog from the community!

Top Solution Authors
Top Kudoed Authors
Users online (3,835)