Hi - I don't know what I'm doing, but I've looked through a bunch of related forum posts (though most seem to describe legacy components) and still can't figure things out.
Desired workflow:
- User uploads file(s)
- File name and size appear as a row(s) in a table
- User manually inputs additional metadata into other editable columns in table (these columns are initially null when the file(s) is uploaded)
- User's edits to the table are saved (note: this table is just a frontend, without a formal backend - meant as a 'temporary' visual before the files are saved)
- User clicks a button to actually upload the files with their associated metadata to s3 (metadata determines which folder to upload to)
So far:
My File Input component (addDataFile) has an Event Handler that, upon Change, runs the following query to set Retool variable addDataTableData (which is then used to update the table):
const files = addDataFile.value;
const uniqueFiles = new Map();
files.forEach(file => {
const name = file.name;
const size = Math.trunc(file.sizeBytes / 1024);
if (!uniqueFilesMap.has(name)) {
uniqueFilesMap.set(name, { name, size });
}
});
const uniqueFiles = Array.from(uniqueFilesMap.values());
addDataTableData.setValue(uniqueFiles);
My table, addDataTable, has Data source set to this Retool variable addDataTableData, and this works correctly: when files are added, their names and sizes appear as rows in addDataTable.
This table, addDataTable, has another two columns, both of which are editable and of format Tags. Call these two columns A and B. The table has an Add-on that, upon Save actions, runs the following query to update the Retool variable addDataTableData (same one from before, used to update the table):
const tableData = addDataTable.data
const changeSet = addDataTable.changesetArray
tableData.forEach((row, index) => {
Object.assign(row, changeSet[index]);
})
addDataTableData.setValue(tableData)
This query runs successfully, and I've checked console logs to confirm the variable addDataTableData is updated with the user's manual inputs. However, the table does not reflect these updates correctly (recall addDataTableData is the Data source for the table). Any updates the user makes to column A don't show up at all. Any updates the user makes to column B get added to a newly-created column, also called B (instead of updating the original column B). Furthermore, if the user makes an update to the second row of column B, that update is made to the first row of the duplicated column B, and the second row is kept null.
What am I doing wrong here, and how do I correctly implement table saving (without creating a full Retool table backend)? Really appreciate the help.
