Create editable tables within nested listview

💬 App Building
,
1

  • Goal: create editable tables within nested listview

  • Steps:

  1. I have a list of needs associated with each client, and a list of tasks associated with each need. For the nested listview, I used a query getTasks to array agg all the tasks associated with each client need.
SELECT 
  cn.*, 
  json_agg(cnt.*) as tasks
FROM 
  client_needs cn
LEFT JOIN 
  client_needs_tasks cnt ON cn.client_need_id = cnt.client_need_id AND cnt.status = 'open' AND cn.client_id = {{ client_table.selectedRowKey }}
GROUP BY 
  cn.client_need_id
  1. Then I set the data source of the listview to be the getTasks query.
  2. Then I added table component to the listview component, and set data source as {{item.tasks}} and made the tables editable.
  3. I'm now stuck on the updateTasks step. I'm using "bulk update via primary key" but can't seem to reference the embedded tables in the listview for "Array of records to update". I checked this post but couldn't get it to work.
2

Hi. You need a variable to serve as a mutable proxy of your data, and a bunch of event handlers to make this work.

For a detailed, step-by-step guide on making ListViews editable, refer to this blog article .

Regards
Abdul Wasae
Toolshed - Hire Retool Developers

1 Like
3

Thanks for this, but I'm not sure this addresses what I was asking. What I'm doing is an embedded table view (from json array column) so I basically need to update the json array based on the table edits. Even with a proxy variable, not exactly sure how to do that?

4

Hi. Once you introduce a proxy variable, as long as you are able to represent all of your source data as a giant JSON, you can then use the setIn method to modify your source data in the proxy variable. Now i understand that this might require you to write some pure JS code to translate your table edits to changes in the proxy variable, but it should work.

In the end, your proxy variable should act as a changeset object you can us to update data in the source DB.

Hope this gives you a direction.

1 Like
5

Hi @ckei,

Just wanted to check in and see if toolshed's suggestions were useful to your use case!