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.
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.
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.
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!