Category: How do I do X?
Updated

This solution is summarized from an archived support forum post. This information may have changed. If you notice an error, please let us know in Discord.

How do I connect two widgets with a JS object?

Issue

I'm having trouble getting a table widget to refresh its data when the selected value of a MultiTreeSelect widget changes. I've verified that the data returned from the onChange function is correct, but the table doesn't update. After contacting support, I learned that this is a known bug and the workaround is to use storeValue() in the JS function and consume the value in the Table Data property of the Table widget. This solution worked for me.

Resolution

The issue described was that a MultiTreeSelect widget was used to select a value, and a Table widget was used to display rows based on the selected value. A JSObject function was triggered on the onOptionChange event of the MultiTreeSelect to pull together new data, but the Table widget did not update when the selected value changed.

The issue was identified as a bug in Appsmith and the workaround was to use the storeValue() function in the JSObject function to store the data and then bind the Table Data property of the Table widget to {{ appsmith.store.tableData }}. This allowed the Table widget to update when the getTableData function was run from another widget.

Example code:

async function getTableData(selectedValue) {
// Query DynamoDB table and map to array
// ...
// Store data in appsmith store
await storeValue("tableData", myArrayWithTableData);
}

// MultiTreeSelect widget
onOptionChange(() => {
const selectedValue = // get selected value
getTableData(selectedValue);
});

// Table widget - set Table Data property to {{ appsmith.store.tableData }}