How to select values in KeyValueMap?


I have a KeyValueMap control displaying data. I would like the user to be able to select any data value so they copy it to the clipboard.

Is that possible?

IOW: how do we make that control's data clickable or selectable?

tried something like thing in the mapper, but it doesn't work, and it breaks the alignment.

<button onClick="utils.copyToClipboard()" style="border:none;background:none">{{ self }}</button>

Hey Francis, The Key Value component isn't selectable, unfortunately. A workaround here might be to use a table with two columns (a key column and a value column). Users could then select a row and you could set up an event handler on the table to run a script on 'Row select'. That script could transform the back into a key and value (or whatever you want it to be) and then copy that value to the clipboard with utils.copyToClipboard. Here's a quick example of what that could look like

I hope that helps :smile:

That is really unfortunate, I just built out an entire app using by copying one of your existing boards and found out that the 5 key value pairs components are not selectable.... ouch. I hope this is an upcoming feature, the key value pairs is a really clean way to present labeled data from multiple sources.

Hey @bryangateley, Could you replace those key value components with table components for now? You'd need to wrap the object you pass to the table in Object.entries().