Skip to main content

Changelog

Updates, changes, and improvements at Retool.

Retool released a new version of the List View component in December 2023. The previous version has continued to be available as the Legacy List View component. You can continue to use the Legacy List View component in existing apps but we recommend you switch to using the newer List View component. The newer version of List View is much more performant, has more features, and will receive updates.

Feature comparison

Learn more about the differences between Legacy List View and List View.

FeatureLegacy List ViewList View
Number of instancesSet the instances property value.Automatically generated for each array item in data.
Instance valuesReference nested values using the item index (e.g., textInput1[3].value).Nested components cannot be referenced outside of List View. For form inputs, use instanceValues instead.
Instance keysItem keys.Primary keys.
Auto-heightAutomatically grows with content.Requires a suitable maxHeight value.
Show borderYesNest the List View component within a container and use it to set the border.
Show drop shadowYesNest the List View component within a container and use it to set the drop shadow.
Styles and nested stylesYesNest a container within List View to apply styles and nested styles.

Instance keys and values

Retool recommends using primary keys, a unique identifier, to track and restore instances within the List View.

List View is virtualized and only evaluates and renders items currently visible. This significantly improves performance. However, this also means that you can no longer directly reference nested items as they may not have been evaluated yet. Instead, you can reference instance values for forms and input components.

Appearance settings

List View supports all of the same appearance settings as Legacy List View, with the following exceptions:

  • List View does not support border or drop shadow styles. Instead, nest a container within List View and configure it with a border and drop shadow.
  • A List View with a heightType of auto requires a suitable maxHeight value to maintain performance. The default is 100vh and you can specify a different value to use. You should consider using the container in which List View is nested to avoid unexpected scrollbars.

The Stack component is a container with Flexbox-like layout controls. Instead of following the standard 12-column grid layout, Stack automatically arranges nested components horizontally or vertically. You can then control the alignment and distribution of nested components and precisely adjust component size.

The Microphone component for Retool Mobile can record audio using the built-in microphone. Recordings are Base64-encoded in WebM format, and audio playback displays a progress bar and elapsed time.

Multipage apps.

Multipage apps contain pages to combine functionality and use cases. Standard Retool apps operate as single-page applications where all code and components is continually evaluated. Multipage apps are also supported by Retool Mobile where each screen functions as a separate page.

With multipage apps, Retool only evaluates the code and components of the page currently in view. The benefits of multipage apps include:

  • Greater performance of large and complex apps. Since Retool only evaluates code and components for the current page, multipage apps are 30-40% faster than a single-page app.
  • Seamless navigation between pages. Retool loads the complete app state whenever a user navigates to a single-page app. With multipage apps, navigation between pages is seamless and more responsive.
  • Improved app management. Multipage apps can replace multiple apps in your organization, such as a team's frequently used apps. This reduces the number of apps to maintain and allows for easier permission management.
  • Reduced module dependency. Modules are commonly used to create shared navigation menus across multiple single-page apps. With multipage apps, you can eliminate the need for additional modules and the complexities with maintaining them.

Each multipage app uses global and page scopes to separate pages. Globally scoped code, and Header and Sidebar frames, are available for use across every page, while each page has its own page-scoped code and components.

You can request access to the multipage app beta and explore the docs to learn more.