I am having an issue with my table and list widgets on my app. When I select a row in the table, the corresponding data in the list below does not initially display. It only displays after selecting a different row and then returning to the first row. The list gets populated by a query that runs in the onRowSelected event of the Table widget. Although the query runs fine without reloading, it does not return any data initially on page load. The queries depend on each other, and I need to chain them in order to make the app work properly.
The issue is that when selecting a row in a table, the data for it comes up on the right and the corresponding data from a different sheet should display in a list below it, but it is not initially displaying on the list when deployed. The problem is that the catalog query is dependent on the previous query running, but it is currently running concurrently, causing the catalog query to not have the necessary data when initially deployed.
To solve this, the queries need to be chained so that the catalog query runs only after the requestor query is completed. This can be done using JavaScript Promises. The following code example illustrates:
widget.datasource.onReady().then(() => {
widget.catalog.datasource.query({}, { onSuccess: function(data) {
widget.catalog.items = data;
}});
});
This code waits for the widget.datasource to be ready, then runs the catalog query after the requestor query has completed. The onSuccess callback sets the data for the catalog list items.
In addition, the onRowSelected event of the table widget should also run the same chain of queries. Finally, to ensure that the catalog list is initially displayed with the correct data, the onReady event of the widget should also run the same chain of queries.