I am facing an issue while updating a table record using a dropdown (column type) for a table column.
Basically, I display a dropdown of a list of products (query) matching the product_id of the order table.
The update works but I need to force refresh the display of the table to get the actual NEW dropdown value after update.
Flow:
Alter the Dropdown value
Save the row
Table automatically refresh and revert the dropdown selected value prior the step 1
Hey @existenz25, and welcome to the community! Thanks for this detailed writeup - have you set the update query to trigger the get query on success? So if there’s a query that’s reading data and backing your table, you should configure it to re-run when your update query succeeds
Hey @justin
The problem occurs in a basic usage like updating a text field in the Product table (onboarding_db).
Here a full example of my problem using a from-scratch project:
When I update the product name, then I update the row, the text value is changed back to the previous value before updating.
I need to force refresh the table (using the refresh button in the table or programmatically) to display the new value updated.
The display is then odd: I change the text value => press save => the text value changes back to the old value => I force refresh the table => the text value returns to the good value.
I guess there is a problem here: either a bug or a misunderstanding when using the dropdown in a table …
But I think I have followed pretty much the official documentation here:
Gotcha! Well it looks like at the end of the video, you configured your bulk update query to trigger query1 on success, which then updated the table correctly.
I don’t have enough information to help you debug this here - I’d recommend writing into Intercom to get quicker support. We’ll want to take a look at what’s getting triggered when and what the .data property of your table looks like post-update.
I run into the same problem with a checkbox. The Save Changes button makes the changes undo. Exact like existenz25 describes:
When I update the product name, then I update the row, the text value is changed back to the previous value before updating.
I need to force refresh the table (using the refresh button in the table or programmatically) to display the new value updated.
The display is then odd: I change the text value => press save => the text value changes back to the old value => I force refresh the table => the text value returns to the good value.
Trigger update query to save the new values in your database
On success of update query, rerun the query that populates the table
If you are doing all three of these and it's not populates the UI, do the values coming back from the database that are meant to be shown in the dropdown column match an option in the dropdown?
I'm working on something similar to this one as well just now. I followed @Cole 's workflow but can't seem to make it work. Had to check again my bulk update query and realised I didn't change the 'Array of rows to update' field to the table I am getting the update.
For context:
Resource: google spreadsheet
Column Type: (editable) dropdown
Data Validation in spreadsheet: only set to raise a warning but not restrict unwanted data input.
Created extra queryStatus with statuses (id, name)
Made one of the columns a Dropdown with (id, name) from queryStatus
Created save query and assigned Success trigger to queryStatus
Now I am trying to edit status via drop down but page keeps refreshing and resetting the value I changed
I wanted to share my solution to this problem, as it works around the "refresh the table" approach as it didn't work well for me due to sorting changing. I needed to save multiple rows, and wanted to change "in-place" rather than re-querying the database. This is how I approached it with the save changes event:
table.recordUpdates.forEach(function (update) {
updateQuery.trigger({
additionalScope: {
...
},
onSuccess: function(data) {
const tableData = table.data.map(function (existing) {
// use whichever field corresponds to unique identifier
if (update.recordId === existing.recordId) {
return update;
}
return existing;
})
table.setData(tableData);
},
onFailure: function(data) {
utils.showNotification("Failed to update update");
}
});
});
It may result in several updates to the table, but does successfully update "in-place" as required.
Interesting, you are basically copying the table.data array but replacing the updated records, then making that new array your new table.data. I had thought of something along these lines but hadn't yet tried to implement it and this is a more straightforward approach than I probably would have ended up with.
