UI Builder dynamic list not updating correctly

[Andreas_Marinopoulos]

I have a dynamic list called studentContainer

On page load, I create a large array called calendarListRaw and put it into Page Data, then filter a sublist for past events to show in the studentContainer, this works fine.

On a menu button click, I want to push a different sublist of calendarListRaw for future events into the dynamic list to show it on the screen.

While the dynamic list seems to be filtered correctly with the new sublist. I am saving the dynamic list before and after into a table, and the array is correct (before there are only past values, after there are only future values). The code seems to be fine.

Yet, on the UI I still see objects from the old sublist.

Is there something I can do to troubleshoot? I changed the block IDs yesterday. While the names changed dynamically in the code itself, I suspect this may have something to do with it.

[mark-piller]

You could do the following to diagnose the problem:

1. Try adding a print block here to log the values in messagingList:
   
   
2. Change the logic to use data binding instead of using “Set Dynamic List Items to” block.

Regards,
Mark

[Andreas_Marinopoulos]

Thanks Mark. I am not well versed in using the browser’s inspect tool, I can never find the printouts in there for some reason. That is why I am saving the values to my test table “errors”. And the values of messagingList seem to be transformed correctly by the code.

I will try your suggestion with the data binding.

[mark-piller]

Here’s a link that will help you find the “console” logging output:

Finding Your Browser's Developer Console | Balsamiq

[Andreas_Marinopoulos]

Very strange @mark-piller , still not working correctly. I am now using data binding, and the array is working. You can see the printout in the console log starts with students Bella, Ben, Kaitlin as it should. The UI keeps 4 ‘old’ objects at the top, before starting with Bella, Ben, Kaitlin.

[mark-piller]

How is the data binding configured for the data container? Is it bound to a property or you have binding logic?

[Andreas_Marinopoulos]

Bound to a property @mark-piller

[mark-piller]

I see the items that should not be there have different background and a slightly different layout:

Could it be that they are in a different container? Have you inspected the structure at the final HTML level when the page is rendered in a browser?

[Andreas_Marinopoulos]

I use visibility logic to change the look of the row depending on certain attributes in Page Data

Specifically, might this one below be an issue? Under certain conditions, I change the background to orange. My assumption is that when these are not in the dynamic list, they don’t appear

[Andreas_Marinopoulos]

Seems to be one container

[mark-piller]

What component is the “Visibility Logic” and “Content Logic” shown above are for?

It appears that you have some logic somewhere that merges two different lists into one somewhere.

[Andreas_Marinopoulos]

The visibility logic is for the payable block and the content logic is for the homework block.

But since I am printing out the Page Data property that is data bound to the dynamic list, and that is okay, should that not be the decisive factor?

[mark-piller]

Try to experiment with it and assign an empty list to the studentContainer property in Page Data. This should result in all the elements in the UI being removed. If some of them are still there, the data must be coming from somewhere.

[Andreas_Marinopoulos]

I just tried that, litterally just now and everything is removed.

[mark-piller]

When these orange elements appear:

Were they in the container before you assigned a new list to the studentContainer property?

[Andreas_Marinopoulos]

Yes, they were. I have now disabled the visibility/content logic that changes the color to orange, and it is still the same issue.

[Andreas_Marinopoulos]

Since I can get it to null, it may be something in my logic. Let me troubleshoot a bit more so I do not take up your time.

If I find it, I will post the solution here. If I can’t, I will post another query here.

[Andreas_Marinopoulos]

@mark-piller It is strange. When I replicate the issue on the backend (where I feel more comfortable), my logic works perfectly, filtering a large list of 45 objects that contains objects with both past and future start_times, into a sublist with only future start_times.

But when I do the same on the UI Builder, it does not work correctly, even if the dynamic list contains the correct objects.

[mark-piller]

The data must be coming from somewhere. The problem is not in the click event logic. Try this:
instead of data binding to the studentContainer property right here:

add logic where you do the following:

1. obtain the value from Page Data for the studentContainer property
2. print out value from (1)
3. return value from (1)

Do you have any places in your logic where you possibly use this:?

If you do, then change it to use data binding.

[Andreas_Marinopoulos]

@mark-piller I made it so that I print both the total list of calendar events (past and future) as well as the current sublist in the studentContainer.

The arrays are correct but the UI is still messed up.