Manipulate recordUpdates with JavaScript and have GUI updated

Given that I have a table component with a checkbox column, how do I offer the user a feature to “select or deselect all checkboxes” with one click …

… while having all records highlighted as changes (looking like a usual manual change) and being able to still de/select one specific checkbox before persisting it with “Save Changes”?

I tried manipulating the recordUpdates property of the table component with a JS query, but the property update isn’t reflected in the GUI (I guess it’s read-only).

=> Is there a way to do manipulate the recordUpdates property and have these manipulations reflected in the GUI?

… (without any further requirement) ?

I have solved it now with a DB query by simply setting the checkbox column to false and then triggering the refresh of the table component.

  • In case the user wanted to select all checkboxes and then deselect one specific one before actually saving it, 2 instead of 1 DB queries were executed
  • Hence this would be slower

Hey @emvau and welcome to the forum! You are correct - .recordUpdates is read-only, programmatically at least. We don’t expose a JS utility for the table to bulk set editable values like that - but one thing you might be able to do is work with temporary state and have your table’s data rely on an external JSON blob. Roughly:

  • Create a temporary state variable and initialize it to an array of boolean values (you could pull these from your DB, so the initial temp state value could be something like
  • In your checkbox column in the table, use a Mapper and set the value to {{ yourTempState.value[i] }} which will index it at the table row’s index
  • Create a JS query to manipulate the temporary state variable via yourTempState.setValue()
  • Hook up a “select all” button to that query

This should work - the basic idea is initialize the temp state based on your DB values, manipulate it, and then write the results back. LMK if this helps!

Hi @justin, yeah, that sounds like a neat solution - will give it a try within the next days and get back to you! Thanks!

1 Like

Was also wanting the exact same case: write-access to the recordUpdates variable. Unfortunately, this workaround suggested by Justin looks really overkill.

Here is an example using no temporary state, just some JS queries
Checkbox Multi-Select + Details Pane.json (17.6 KB)

1 Like