Hi everyone,
I noticed that one of my multi-page apps has started to behave strange in terms of how data is populated into a table from JS.
A short context information: A lot of tables in my apps have to show data from two different data sets (students and tutors) depending on a toggle. Each of these contact types has its own database table, as they share a lot of characteristics, but some are different. When I first designed this multi-page app for my client I wanted to avoid to (a) either always have to load all rows from both tables and then filter out half of it in Retool based on the toggle and (b) always having to have to separate tables for each contact type. I have actually made a post about these apps in the "Show and Tell" section last year.
So the the basic principle of all apps and the way I populate tables is thus through JS code like this:
if(re_startMatchingContactType.value === "student") {
return getStudentsStepOne.trigger();
} else if(re_startMatchingContactType.value === "tutor") {
return getTutorsStepOne.trigger();
}
[name of this JS code in Retool: 'getStepOneData'
'getStudentsStepOne' and 'getTutorsStepOne' are both SQL queries
're_startMatchingContactType' is a toggle component]
So, when users selected one of the two contact types and clicked on a button "Search contact" this JS query triggered the appropriate SQL query and returned the result of it. The table then accesses this result through:
{{ getStepOneData.data }}
Again, this has worked perfectly fine for the last year and a half. Now it doesn't work anymore and the table stays empty after hitting the "Search contact" button. But it gets more difficult here, because the table will tell me in the module grid that
"value: Cannot read properties of undefined (reading 'state')"
...but the data section of the table will show me that there is actually data passed to it by the JS query from above:
Still, the table stays empty and shows nothing. The problem is "solved" when I hit the reload table icon in the bottom left corner, but this doesn't help my apps that are using cross-linking between each other to auto-select specific rows in this and other tables.
So my question is: How can this be fixed? Why does the table not show/update the data anymore that is passed to it by the JS?
Solving this issue is crucial for my clients. Because of the complexity of the apps that are affected by this, it is not an option to change the general approach of using a JS to pass on data.
To add one more thing: This issue causes all of my search forms to be useless, as the table will not show new and filtered results (also provided to it by a JS) until I hit the reload icon of the table.
I'm really looking forward to your help in solving this issue quick. Thank you!
Best, Timo