Reference each component instance in New ListView

In the previous ListView you could refer to a particular component instance in a ListView like so: text1[i].value

In the new ListView if you simply reference text1.value within the scope of the ListView it will use the correct instance of the component.

But I see no way of getting to a particular component instance outside of the ListView scope.

In my particular use case, I add a new item to the ListView underlying array source and then I want to set focus to the first component in the new instance so the user can start typing right way.

1 Like

Hi @bradlymathews, you're right that we currently don't allow referencing values by indexing in the new list view. We're currently working on features to support this! This is due to some performance features as the new List View is completely virtualized.

For now we'd recommend using event handlers on these components, such as an onChange to write-back state outside of the List View. I'd love to hear more about your use case as we're working on aggregation features.

I'm also seriously struggling with this issue as well, and at the time it seems the only solution is going back to the old listview which is a shame since, overall, the new ones are way more friendly and intuitive to use.

But the use case that I'm working is the following:

Description

It's a simple task creator where you fetch the tasks and filter them with a transformer[projectTasks] based on the project and whether they are finished or not. This transformer is set to the default values of the listview mapping, and then you have a variable[changeTracker] which keeps tabs on the changes that have been done.

Issue

If there are changes then two buttons of save and restore appear and the icon to move the tasks to the other component change to restore just a single item. Everything was going alright, the values where resetting, some components where disabling as needed, the icons where changing as needed, the buttons where hiding as needed. However, the actual input of the text editables remained the same.

Attempts

I was able to configure the restoring of single item since you can easily reference the same item. And just put an event to change the components. But when I try to configure the restore button to restore all of the inputs I hit a wall several times.

1.- I had the buttons outside of the listview, but I was not able to run a script, use a reloading the fetchTask query to see if that reseted the values, using a javascript query, or access the information through any data of the components. Then I notice that in the console, whenever you typed taskNameEditable[0] to get the specific value, I would get the message of:

taskNameEditable can only be referenced in tasksListView because it may not always be available due to performance optimizations.

2.- So I decided to work within the ListView putting the buttons inside, and hiding all of the buttons except for the last ones, and work from there, but doing a console log on a run script event of the restore button of taskNameEditable[0] I also get undefined. I do have access to the particular Item, but not to the whole set of components within the listview.

Where I'm Now

I tried everything I could thought about in order to go around the issue but it just seems impossible to access the whole set of text input as I would do in the previous list views. So I'm wondering if there's anything that can be done or if not, then this would be a feature that I would greatly appreciate since it can be extremely useful.

Any news on adding a way to be able to reference components inside the new ListView from outside of the ListView? The new ListView is quite a bit more performant so I would rather use this but no way to reference individual components inside of it. Maybe you have some work around for now? So for example, how would I scrollIntoView a specific container in a ListView of containers? Before I would do contained[i].scrollIntoView() but now I cannot use i.

Hey @ashkan!

Here are our official docs on referencing the new List View child components:

https://docs.retool.com/apps/web/guides/components/list-view#reference-child-components

And here is a forum thread with some helpful and creative workarounds from fellow users:

https://community.retool.com/t/listview-modify-values-and-save/31733

And looking forward, we're working on a better solution for this :eyes: coming soon.

Let me know if the above help at all, or if you still have any questions!