Access values of components in ListView

Hi -- I'm creating a listview and including a toggle for each item. I want to create a query that displays the values in a text component for each list item where the toggle is true. I'm stuck figuring out how to access listview items where a certain condition is true. Can anyone give advice on how to access the key/value pairs of the listview components in a SQL query?

Hey there @juliea and welcome to the community!

Assuming I understand your use case correctly, this is pretty straightforward - the ListView component has a .data property that tells you about the components in each row. So if you have a toggle set to true in the first row, for example, then listview.data['0'].toggle1 will evaluate to true.

Here's a quick example I made locally - the property browser on the left hand side shows the properties I mentioned and their values.

If you want to filter that .data property for only items where the toggle property is true, you could use something like this:

listview.data.filter(item => item.toggle1)

Or the longer hand, listview.data.filter(item => item.toggle1 === true)

Let me know if this helps!

Thanks @justin that worked great!

1 Like

There are situations where Event Handling may need the index of the selected container within the Listview.

When populating the Listview from a query or other collection, the magic index i is available. For example in myQuery.data[i].user.

Without some tactic, during the context of handling an event, the event handler does not know the index of the container within which the event was triggered.

This may not be the ideal way, but I discovered that I can add an initial Event Handler to a clickable component (order matters) that sets Temporary State for the clicked component. For example "state1" can be set to {{[i]}} to record the index of the card/container that is the parent of the clicked component.

Then, within the Event Handler for running a query, that state1.value can be retrieved and used.

This allows the event handler to retrieve the values of other components, also in the same container, that hold values that set the parameters of the query.

4 Likes

I did something very similar to create a "variable input list" type component.

The List component has a single row of 3 different inputs. 1 text input, and 2 dropdowns.

I created two temporary state values. The first was a number passed to the List Component to control the number of rows. The second was to store the List component data when adding rows. This is because when you increment the value of the inputs, it clears the data.

So I added an "add row" button that when clicked would take the current data in the List component, set it to one of the temporary states, incremented the value of the number of rows temporary state, and then re-applied the values back to the inputs.

So more specifically if the 3 inputs fields were: firstName, lastName, and state, the default value for the inputs would look like:

{{ temporaryListValues.value[i].firstName }}
{{ temporaryListValues.value[i].lastName }}
{{ temporaryListValues.value[i].state }}

It worked like a charm, so thank you @lonniev for the hint about the i

The data was stored to the state value simply as "{{ licensesList.data }}"

1 Like