Event handlers on Custom Columns

App Building
,
1

I have a custom column dropdown in a table. I want to save the data to the database when it changes.

How can I make this happen? Basically, when someone changes the value in the drop-down, I want to trigger a query to update the database.

Select components have event handlers, is there not a way to trigger a query when a value is changed in a Custom Column drop down?

Additionally, how do you reference the value in the dropdown of a custom column? When I type {{ currentRow. }} the custom column doesn't appear in the list of options.

Let's say I'm going to add a table Action button (to each row) to save the data, but I want it to be disabled if the user hasn't selected anything from the drop-down. I see there's a .changeSet that tracks which dropdowns have data. How do I disable the action button if the same row does not have anything selected in the drop-down?

{{ !(table2.selectedRow.index.toString() in table2.changeSet)}} updates all of the action buttons whenever you change the row

How can I get the index of the current row?

image
image580×1628 88.8 KB

image
image774×606 30.9 KB

image

2

Hey @travis!

Great question! I believe changes to custom columns are saved in both the changeSet table variable and the recordUpdates table variable. Are you looking for this update query to update a single row at a time on input change? If so, I think I have found a solution here. Rather than using a direct event handler here we could have your update query "trigger when inputs change" and watch for any updates from this custom column value.

In my test example here I am just using a postman echo endpoint but this would be your update query. As long as you make reference to either this changeSet or recordUpdates variable, whenever its updated your update query will run.

To prevent this from triggering whenever the record updates are cleared, under the advanced settings for this query we can disable it when {{table1.recordUpdates.length == 0}}

1522×494 47.4 KB

Now, we can add an event handler to re-run the query that is displayed in the table after we update the selected record

654×654 14.6 KB

Now, when you make a change to a row, the update query should run and update the table. Do you think this could work for your use case here?

3

This is really good! Thanks for the thorough reply.

This works for a single update, but when the user makes multiple updates, or if I have multiple columns, it seems to break down. I see that when a value is changed, a new entry in table.recordUpdates is created. For simple scenarios, we can run our update based on the last record in recordUpdates, e.g. table2.recordUpdates[table2.recordUpdates.length -1]

Filter - (submit the ID of the record in Mongo we want to update)

{ _id: 
 	{ 
    $oid: {{ table2.recordUpdates[table2.recordUpdates.length -1]._id }}
  } 
}

Update (set the value to be the value the user just selected in the drop down)

{ $set : 
 	{ 
    	size: {{ table2.recordUpdates[table2.recordUpdates.length -1]['Custom Column 1'] }},
	}
}

Scenario 1: Single column.

  • User changes value in row 1 - table.recordUpdates has length 1, run the update
  • User changes value in row 2 - table.recordUpdates has length 2, run the update
  • User changes the recently changed value in row 1 - this changes table.recordUpdates[0] - but our query doesn't know that, and updates the value from row 2 again.

Is there a way to tell which record in table.recordUpdates changed?

Do we need a bulk write in this case? And submit all of the entries in table.recordUpdates when an input is changed? And if so, how do we dynamically create the Operations based on the contents of table.recordUpdates ?

Scenario 2 - Multiple columns:

This is similar. There are two columns.

  • User selects an option from row 1, column A - the update is performed
  • User selects an option from row 2, column A - the update is performed
  • User selects an option from row 1, column B - this changes table.recordUpdates[0] - but how do we know that's the record that changed?

I've recorded a Loom video if it makes it more clear.

4

It looks like I can use a .map for the bulk write:

image
image1740×1324 194 KB