New: Editable Key Value

📣 Retool Announcements 💥 Product Updates
1

Currently available on Retool Cloud and Self-Hosted Retool 3.52 Stable, Key Value v2 properties can be made editable! Designed to replicate the editing functionality in Table, this feature allows you to make the presentation of your data both writable and readable with minimal configuration.

The editing experience

Editable Key Value properties are indicated by a pencil icon to the right of the value, which is configurable via the Edit icon add-on. Users can modify an editable property by clicking on the value. Modified values are indicated by a circle indicator to the left of the value. Key Value also has a default UX for saving or reverting edits which is configured in the Save actions add-on.

Key Value editing
Key Value editing794×980 39.3 KB

Here’s an overview of how to enable editing with persistence for your Key Value component.

Enable editing for a property

Currently, only saved properties can be made editable. You can use the + icon to save the property in the Properties list. A saved property can be made editable directly via the dropdown menus in the list, or in the Interactions section of the property details. Alternatively, use the “Make all editable” option in the menu to the right of the Saved header to enable editing for all saved properties that support it.

Make Editable Button
Make Editable Button311×400 6.6 KB
Make all editable button
Make all editable button311×400 6.35 KB

Note that some formats like Link do not support editing, so if you need an editable URL field you will need to change the property type to String in the property details.

Persisting changes

Once you have designated some properties as editable, you will have the option to configure the Save actions add-on. This works similarly to a Table component with editable columns. In your Save event handler, trigger a query that uses the new changeset property of Key Value to access the modified fields as an object. A typical application would be to use this object in the body of a PATCH request to a REST API endpoint.

Using Key Value changeset
Using Key Value changeset495×254 9.11 KB

Please feel free to reach out with any questions or feedback by creating a new topic in the App Building category here on the forum. Thanks and happy building!

5 Likes
2

This is really cool, thanks for this @jacobstern.

Just plugging in here this bug that doesn't seem to have been caught yet.

Thanks!

1 Like
3

Thanks for trying out the feature! Full option list handling for Key Value tags didn't make it into the initial release, but it's now available on Retool Cloud.

1 Like
4

Is support for registering field change event handlers for editable key value components on the roadmap anywhere? I'm trying to implement auto-save functionality, but there doesn't appear to be any way to tell when a value has been changed by a user.

5

Hi Dennis, it's been on our backlog for a while but I will raise it again with the team. For now the recommendation would be to use the Submit event rather than autosave.

2 Likes
6

Is there a way to use this component in a form? Trying to use the values to save to a jsonb column in postgres.

7

Hi Kyle, an editable Key Value won't add itself to the Form data as an input, but you should be able to reference the changeset and data properties of Key Value in your query to merge those updates in manually.

2 Likes
8

It would be really helpful if the key value component let us manually add and remove fields similar to how tables work. Sometimes values get added to our data without us noticing and is typically displayed by default so we have to go back through all the components and add/hide the new value. And sometimes we have an object that we want to display and it would be very convenient to just add a new value and map it instead of having to use a transformer.