New repeatable not loading data when underlying data changes?

Trying to configure a new Repeatable component to dynamically change the data that is shown, rather like a page view, but based on a List component. Choose from the list component in the sidepanel, what should appear in the listview. (I use a variable for the data which gets updated when the components change (or, in the case of textArea, on blur).

But when I change an item - e.g. type in the textArea component...

The change that I made, is still there even if I select a different item in the List component. All the other components "reload" their data except for the one I changed.

Am I going about this in a bad way? This is how I interpreted the idea of storing data in variables and "keeping track of changes using events". I have a version that is one big list (which works but is not performant). In this case, when typing in a text area, it is possible that mid-typing, the textArea reloads and you lose what has been typed!

Any help much appreciated.

wow, this looks like quite a complex app you've developed with lots of custom logic in there, kudos.

Without getting into the details too much I think there's a few things going on with states and default values that are possibly tripping over one another, based on the behaviours you've described.

I'm interested in the listView you've put in the centre of the app - it appears, in the code, that it would only ever show 1 record? If the intent is to pick from the left listbox and show a single record for editing in the main panel then perhaps a more traditional Form component would be easier for you to manage and keep track of changes, set the values etc?

If the intent is to select multiple records and edit them all simultaneously then that could also be a job for multiple forms inside a listview.

Then when the listbox value changes you can set the value of the form to the selected item in one event handler.
When the form fields are edited you can detect that as another change and use the forms own functions to collect all the edited data for writing back to your data source in an update query.

Thanks @dcartlidge,

I do tend to creep the complexity of the app, because Retool is so cool and can do loads of things.

I realised after posting that my examples were all of single records. There are a mixture of single and multiple records, depending on which item is selected in the listbox and how many of those items there are.


FAD - New edit FAD 3 | Editor - 31 January 2024 - Watch Video


FAD - New edit FAD 3 | Editor - 31 January 2024 - Watch Video

The suggestion you describe seems to be what I thought I had, but I am unsure. I fear that I may have made the logic too complicated.

I use the Blur event to save the value of the TextArea to the variable.

I have another version of this app where all the items are in one big long listView component. This is non-performant too. I think because there are so many components in the container. I am wondering if I try to split this into multiple views (e.g. one for text, one for costs) whether that would improve performance. Interestingly in this version, the textArea components keep getting reset back to default values multiple times as you type, which seems to relate to this article:

but as I'm already using a temp state/variable I can't see how this solution would help me?

Do you have any other ideas?

Definitely looks more complex than a usual app - I think what the issue might be with your "resetting" fields is your blur event handler

It looks like you're setting the value of "Textual_content" in the ObjectsOnAccount variable to whatever the text box contents are for index 0 (if it's the first record)

Looking at earlier screenshots the ObjectsOnAccount variable seems to be an array of objects with ObjectIDs etc - I can see the listbox selection drives the listview, filtered by selected objectID

So I think what I'm guessing at is that your ObjectsOnAccount variable isn't being written to as you expect with that setIn command and, instead, is writing the first record in the array, not the first record in the array that matches the selected ObjectIDs property?

Maybe take a look in the state inspector at your ObjectsOnAccount as you change a text field and see if it's updating the record and textual_content you expect and not replacing the first entity.
That could explain what you're seeing - so when the first text area shows it's default value it's always using the value in index 0, so once you've made a change the textarea will be using that value for every future text box in index position 0.

Hopefully that makes sense?

@jclutterbuck Any updates on this from Retool? I just ran into the same issue when moving from the legacy listView to the new one.

My components here are on change handlers and update a state object, which the listView in turn pulls from. Each component has its default value set to item.attribute_name which should allow the updated values to be pulled into the component when I select a new page. Instead the component maintains its current value.

If not for the limitation of the new component I'd try patching it by just running resetValue() after page changes but now the child components aren't accessible from outside of the LV. :man_shrugging:


User Dashboard | Editor | Retool - 19 February 2024 - Watch Video

image

image

image

@victoria @Tess is there a way to get some visibility to this? I know it’s not tagged as a bug but it does seem to not be working as intended and it’s breaking a reasonably common code pattern.

Hi @DoingMyBest our team is investigating this issue with paginated grid view lists. I'll keep you posted

As you noted, currently child components aren't accessible from outside of the LV (flagged by our team here under scope limitations). This is something we're working on, but may be a longer term project, so I don't have a timeline yet.

1 Like

Thank you very much!

I too have a ListView that is not updating when it's .data changes.

I have a Table and a ListView. The table's rows contain JSON that I load into a Variable onRowSelect. That Variable is the source for the ListView. The user can change the data int eh ListView repeatable and the data is saved back to the source Variable and then back to the database. I can also re-order the items which make appropriate changes to the source Variable.

When I first load the app, it all works fine, I change the table row and the ListView updates.

As I make changes, at some point (early on) the ListView stops updating. I have not yet determined a specific thing that does it.

Here is the result - you will see the ListView.data does not agree with what the ListView is displaying, though it does agree with instanceValues (yes, I am using the Beta.)

The nested ListView items DO change however. Sometimes. It depends. But what that does tell me is that one repeatable child component is not getting its automagic, reactive mojo, but another one at the same scope is. Hopefully that is an important clue.

Just want to see what I can do to bump this to the top of someone's fixit list. My new app is totally unusable until this is addressed.

When this is fixed, I am planning on publishing this app to the Community Show & Tell forum to supersede my ListView Advanced Example, but for the New ListView.

3 Likes

Thanks for flagging! Will try to make sure this fix gets prioritized :crossed_fingers: really appreciate the detailed steps. Any chance you can also share an app export?

1 Like

Sure.

It needs a Retool DB with this structure:

CREATE TABLE IF NOT EXISTS public.checklist_templates
(
    checklist_template_id serial,
    checklist_name text  NOT NULL,
    checklist_template text,
    CONSTRAINT checklist_templates_pkey PRIMARY KEY (checklist_template_id)
)
1 Like

I had to abandon the listView and went back to the table with expanding rows!

(I was struggling with not being able to see currentSourceRow from the column DataSource, so I couldn't make the dropdown reflect already selected values - but I can from the expanded row, so this is how my latest version works. It is much more performant, which is great. However, now I am wishing for control over the expanding and collapsing so that I can keep it tidy)

But I'll probably revisit listViews when this issue is fixed.

And now I've just found the newly added expandRows and collapseRows!

Yay

2 Likes

Thank you everyone for the feedback here! I wanted to follow up to let you know that this bug is fixed as of Cloud 3.39.0. Please let me know if you're running an on-prem version, so I can patch it for you :slight_smile:

2 Likes

Thank you for getting this turned around quickly!

It is not fixed for me. :grimacing:

image

Hi Bradly! Thanks for flagging. I've loaded your App JSON and tried to reproduce, but I'm unable to do so. Could you write out the actions you take to repro? :pray:

First off a new thing. when I first open the app now, the nested ListView's components are not filled in:

if I click a different Checklist to view and then go back to the first, then they fill in:

If change any one of the item's text and that component will no longer change based on it's source. If I change a parent item, then the parent item component will not change. If I change a child item then the child component will not change. It does seem to be a tad intermittent, but fails most of the time.

Here is a video:

1 Like

There are multiple threads out the fact the new listView(v2) doesn't update external data. As stated by @bradlymathews, it makes it unusable for most use cases.

+1 on solving this important issue.

One more thing:

It would be nice to have a bulit-in way to add and remove a specific item in the list, for exemple the 3rd item.

Thanks!