How to access button index in list view

App Building
1

We are trying to use a toggle button within our list view to be able to add and remove listed items to a shortlist (using a boolean in our database). However, we have been unable to access each button individually using its index.

We have tried various combinations to access the index of the button but have been unable to do so. If we change our code to "... WHERE id = 1" it will set the first item's shortlist value in our database to false, so we know that it works.
We've looked through the docs and various forums on the Retool Community but so far, have had no luck in solving this.

Here is our latest attempt - using instanceValues:

Screenshot 2024-09-19 at 09.40.24
Screenshot 2024-09-19 at 09.40.24848×284 16.4 KB

We have also tried numerous other combinations to try to access the index unsuccessfully such as:
Screenshot 2024-09-19 at 09.57.11

How our components are structured:

Screenshot 2024-09-19 at 09.49.16
Screenshot 2024-09-19 at 09.49.16672×1176 42.1 KB

We are using Retool 3.94.0

Any questions let me know. Any help would be very welcome! Thank you

1 Like
2

Basically you need the {{item}} or {{i}} from the collection list nested item to access the attribute like {{item.id}} right?

As far as I know you can’t reference it in a query. So you have to provide it.

How I do it:

update_picked.trigger({
    additionalScope: {
      primary_key: item.id,
    }
  });

I set the click event handler for the button to script and use this code. Then I can reference {{primary_key}} in the resource query update_picked.

For us that’s a normal button as toggle where we change the icon and set the state to disabled whenever it has been picked/clicked. But you can use the toggle option as well I think. You just need the click event handler and sent the state of the button and the id of the item with additional scope. I even managed to set individual buttons loading state by checking if the query isFetching is true and checking if the item.id is the same as the item.id I’ve stored using additionalScope in a variable. Although in this gif it wasn’t working yet. As you can see the loading state for all checked buttons is activated. But there’s a solution for that.

image

I wanted to do a HowTo already. So I made one. I think it can help your challenge as well. You just need to replace the button with a toggle in my example and decide how to account for the true/false state. You'll probably have to put the boolean value and the id in the additional scope. Otherwise it will be set to FALSE every time. That FALSE value in your query should be replaced by the boolean value of the toggle I guess.

Here is my HowTo:

3 Likes