Reference each component instance in New ListView

Feature Requests
1

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
2

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.

3

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:

image
image1888×824 142 KB

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.

5

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.

6

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!

7

@victoria any updates on this?

1 Like
8

Very annoying to not have a simple way to get selectedValue in a list. I run a loop to produce a list of radio button groups and need to get the selected values of each of them.

Seems like such a simple task, but running into this same issue. I've seen at least 10 forum posts of people asking for the same thing. Fingers crossed. More functionality lost in a legacy component :frowning:

9

@chris_4 Not sure your use case, but I was able to reference the value of a repeating radio group by enabling and accessing .instanceValue

1 Like
10

@shawnhoffman ahh, that's interesting, I'll look into that next time I get a chance. Thank you!!

Very much appreciate you sharing the solution/workaround/tip for this functionality (and especially for the tag), as I imagine many others have (and will) come across it at some point -- hopefully this can save them some time.

Will probably take me a few weeks to get around to testing it out, but will make sure to update when I do. Unfortunately I was on a tight timeline when looking into this, and ultimately transitioned to building the specific functionality I was looking for into what I'd best describe as a "wildly over-engineered Apps Script-powered G Sheet" -- just b/c I knew it would be easy to connect/sync that with Retool and b/c I had an idea on how it could be possible.

I definitely don't recommend what I did as a solution, sharing however in case anyone else finds themselves in a similar scenario, and for whatever reason isn't able to solve through the .instanceValue approach you uncovered.
- Unlikely, but if so, I'm happy to connect and share my workaround if helpful (way too long to post).

Thanks again, @shawnhoffman!!

1 Like