Format specific items in ListBox based on criteria

[Anonymous]

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!

[bean]

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 · Accepted solution]

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:

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]

Good effort.

[Anonymous]

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.

[CarlosFigueira]

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.