Syncing Modals to Table Columns

App Building
1

I want to use a Table Modal column to allow users to modify and update data.
I am able to show the data in the modal by using {{ table1.selectedRow.data.column}}
But any edits inside the modal are not in sync with the underlying table, it seems like selectedRow.data is readonly.

Is there a way to keep both in sync?

I thought then of using a workaround, by triggering a query update on a Save button on the modal and refreshing the table, or directly modifying the table with setData

My problem is if the table has pending changes (recordUpdates) from other rows/columns these will be wiped out whenever the modal saves.

Is there a way to to programmatically modify recordUpdates or a better way to sync modals and table columns?

2

Hi @fed! Welcome to our community, and thanks for your patience in getting a response here.

What you're looking to do is a bit tricky, but I think it's possible! Here's a way to set it up:

  1. Instead of using a "Modal" Column type, create a single Modal component in your app, e.g tableEditModal. This modal can have "hidden" set to true so the button to open it is not visible in the UI.

  2. Create a JS Query that opens this modal: tableEditModal.open()

  3. In your table, create a table Action called "Edit". The button type should be "run a query", and it should run the simple query you created in the previous step.

  4. Important: in your modal, the inputs that correspond to the columns you're editing need to be named the same as the column. If they are not named the same, then saving the data the end will not work.

  5. Create another JS Query, e.g saveTableData. The code for that query would look something like:

    const index = table1.selectedRow.index;
table1.recordUpdates[index] = { id: index, ...modalForm.data };
tableModal.close();
table1.setData(_.merge(table1.data, table1.recordUpdates));

    This query appends to the table's recordUpdates array.

  6. In your modal's save/submit button, add an Event Handler to trigger the saveTableData query.

  7. Lastly, in the table itself, add a "Save Changes" event handler that also triggers the above query. Doing so allows recordUpdates from other rows to be included when saving from the modal.

I'm attaching sample app JSON that you can import in to your account to play around with this set-up as well. Hope it's helpful!

table-modal-sync.json (19.1 KB)

1 Like