Introducing our new Repeatables

📣 Retool Announcements
1

Hi Retool community!

As introduced in our build-along last week, Repeatables have been rebuilt from the ground up with our new List View and Grid View components! Learn more about how to use the new List View through docs here or watch the build-along session here.

Here are some exciting features about our new Repeatables:

Attaching a datasource

Most repeatables have underlying data that determine the number of instances as well as the content for your list or grid. You can now select a query or variable to power your repeatables, or use JavaScript.

|323.5135135135135x390.07771079394723

The item variable

After setting up a datasource, you can use the keyword item to access the relevant entry for your datasource from any children inside of a Repeatable.

Before: After:

If you’re working with nested repeatables, you can access items from different scopes with references to listView1.item or listView2.item:

i and ri are also still available as variables representing the index.

Virtualization & Performance

We’ve made performance improvements by virtualizing the new List Views so they can support many items.

:warning: Scope limitations: for performance reasons, we currently do not support indexing into components inside of a Repeatable to access their properties. Instead, we recommend adding event handlers to track state changes back to data in your Repeatables.

Stay tuned for upcoming aggregation features for the new List View!

Feel free to post questions & feedback here on the forum! We look forward to seeing what you build.

12 Likes
2

Awesome feature

1 Like
3

:flushed:

2 Likes
4

This is a game changer for me. All my applications currently utilize various forms of Repeatables. This will necessitate a substantial rebuild of many components, but it's a change for the better. Thank you! :blush:

1 Like
6

are there plans on adding Events to these like the old ones to access onChange?

7

@bobthebear Though the legacy list view didn't support events, we do hope to support events similar to onChange with upcoming aggregation features -- we'd love your input in our Aggregation Feedback post!

8

Please see this link on a bug I found on the new List view:
SQL Query Running Once, Subsequent Times Fail. Preview Always Works - App Building - Retool Forum

Subsequent query runs while using the new list view are failing. Requires a deletion of the listview for queries to run again.

9

When would this be available for self-hosted?

10

Is there any plan to add indexing into components, or at least add the ability to perform actions on components across all iterations of a repeatable at the same time?

I have now seen multiple forum entries now for the new ListView stumbling over this not working (see Clearing select component in listview - #3 by Nicholas_Alden) as well as explanations on how to use this with the old listView from longer ago, which shows that this is a feature that's often requested.

I myself am finding myself in a situation in which I need to reset the values of all textInputs in a listview at once and cannot find a workaround. If the only possible workaround is migrating back to the old listview component, the initial introduction of the new listView component (which aside from this is awesome!) seems questionable.

3 Likes
11

The new Grid view performance is so poor. I have grid view with 100 result in it(10row, every row with 10 columns), each item with header, checkbox component, image component, and a text component in it. When I scroll it vertically, the page becomes very stuck. and the same thing happen if you try to edit it.
Even I delete checkbox component and image component, and text component in it, it still stuck.

image
image1550×703 260 KB

My solution to change to use image component which is very smoothly even the item is more than 100. But the disadvantage is that you cannot add checkbox in the image grid, and there is no corresponding event handle for hover or change instead of click.

12

Hi AnnaW,

Regarding the new List View and Grid View components, after referencing the documentation, I have some questions I'd like to ask:

  1. I would like to simulate that when selecting any object in the Demo App's list view/grid, it opens the drawerFrame and brings parameters similar to selectedData or ListView.data[item]. However, Retool tells me that 'item' is not defined, so I am unable to retrieve the parameters from ListView successfully. Can you please advise on what might have been overlooked?

  2. I noticed that when selecting an object in the Demo App's list view, there is a hover style, but I haven't seen a similar setting in my own version. Could you guide me on this?

  3. As a side note, I reviewed the retoolEats App you provided, and I really liked it! Is there a chance it could become a template? Additionally, I noticed the button behavior in the App applies the confetti explosion animation syntax. I am very curious about how this is implemented in Retool and would appreciate any guidance or tutorials on this matter!

Thank you.