New component: Key Value v2

App Building
1

Hi all!

We are excited to announce the launch of a new Key Value component. Compared to the older Key Value component, this version has significantly more functionality, and offers much improved visual controls.

  • Customize how values are displayed, with the same familiar display options as the Table component, such as dates, tags, avatars, images, links, and more
  • Add click handlers to values
  • Render in single-column, multi-column, or 'wrap' mode
  • Control the text color and label positions

The component is designed to work without configuration -- it will automatically generate readable labels based on the key and guess the format of the value. However, you can also 'save' properties to manually configure them, which lets you set their order, custom labels, placeholders, and more.

Check out the docs to find out how to configure your Key Value component: Display key-value pairs | Retool Docs

This new component is now available for all orgs on cloud, and will be made available for on-premise users in the coming weeks!

Screenshot 2023-11-17 at 3.30.00 PM
Screenshot 2023-11-17 at 3.30.00 PM1056×730 43.6 KB

Screenshot 2023-11-17 at 3.30.41 PM
Screenshot 2023-11-17 at 3.30.41 PM1028×786 46.3 KB

9 Likes
2

Thanks for the new component! Is there a way to migrate current old Key Value to the new Key Value, just like what we could do when the new Table component came out?

3

Thanks for reaching out, @brianzjj!

:confused: We don't currently have an upgrade path for this component from the legacy key value. You can start using the new key value component as a brand new component, or you can continue to use the legacy key value components -- we don't have plans to remove the legacy version.

Similarly for the table, in the past we have shipped upgrade paths for smaller improvements to the table (see docs for upgrade examples), but if you want to replace any legacy tables with the newest table component, you'll need to create it from scratch.

4

Hi @dlee :wave:

Happy to see that this component got an update! I frequently found myself writing custom CSS to improve the styling of the key value component, so glad to see that the configuration solves that challenge for me.

Thanks!

5

Hi @Tess :wave:

Slightly off topic: I love to see these posts of new functionality getting added to Retool, but sometimes it feels like it's buried between other posts within the App Building category. Would it be possible to create a separate topic for announcements like these?

Appreciate your insights!

3 Likes
6

Hi @avr Thanks so much for the feedback! Makes sense :blush: we'll look into other options

1 Like