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 update List content based on async JS Query

Issue

I am having trouble updating the content of my List widget after clicking a toggle button which runs an async JS function with different settings. The data in the List widget does not update, even though the function returns new data. I am looking for a solution to update the List content.

Resolution

There is a known bug in Appsmith where List widgets do not update with new data after page load if the data is generated by an async JS function. As a workaround, you can use the storeValue() method to save the result of the async function to an Appsmith store, and then retrieve that value to populate the List widget.

Here is an example of how you could use the storeValue() method:

JS.loadData = async () => {
  // your async function logic here...
  const result = await asyncFunction();

  // store the result in the Appsmith store
  await storeValue("myData", result);

  return result;
}

Then, in your List widget, you can use a Data query to retrieve the stored value and populate the List:

Data query:
{{ getAppsmithStore('myData') }}

List widget:
Items: {{ data }}