More Checkbox in ListView questions

App Building
1

I've got more questions about accessing/manipulating a checkbox in a listview.

Here is the overview:
I've got three "overall" checkboxes:

  • Select All
  • Assembly Required
  • Non-printed

Then I have a list view with a checkbox. Hook it up to my data source and I get a list of checkboxes where the labels represent order numbers.

Select All box - when ticked, selects all the orders. When unticked, deselects all the orders. Assembly Required and Non-printed work similarly, just with logic regarding some status of the orders.

Now, to implement the above, I used a JS Query called checkboxBehavior. When Select All, Asssembly Required or Non-printed checkbox changes, it calls this JS Query. The output of this query is an array of bools, that output is connected to the ListView Checkbox.

Overall this is working. Manipulate one of these three overall selectors and it changes the list as you would expect.

Next step for me then is to make it so they overall checkboxes play well when one is ticking/unticking individual boxes. Let's say someone uses Select All and then unticks one particular order. Well the select all should become unticked.

So on the checkbox in ListView I add an on change event to also call the JS Query checkboxBehavior. However now I get an error: Cannot read properties of undefined (reading length).

I think this is referring to this element in the JS query: listView_orders.data.length

So maybe the scope is different based on the caller? That makes sense, but I'm not familiar enough with JS or Retool to know how to resolve this. Or maybe there is a better way to implement the desired behavior.

But I'm not sure how best to handle this case. I need an array for the checkboxes to update to. So I went the JS query route.

3

Hello @Awestruck,

Great question.

So it sounds like the 'select all' is working, but what you want is that when a single, non-overall checkbox is then unchecked, that the 'overall' box will uncheck but everything outside of the "overall" checkboxes will stay the same correct?

Having an on change event handler is the right idea. It sounds like you are using the same JS query, "checkboxBehavior" but I think it might be better to have a different JS query run on change instead.

You can have this new different JS query unselect one or all of the 'overall' boxes.

Or on the other hand, if you want a uncheck to completely undo the logic run by whichever "overall" checkbox was first triggered, that could also be done with its own unique JS Query.

I am curious about that bug as you should be able to access the length property. The only scope limitations would be for multi-page apps and be related to globally scoped vs page scoped properties but from your description I don't think this is the case.

My guess is that potentially this data for some reason has not populated yet (maybe needs query to run first?) but I would likely need a screenshot of the state tab with listView_orders.data to see if there is data in there as expected.