Flex Repeater not refreshing when `instances` list changes

Ignition
,
1

I'm trying to figure out why the flex repeater won't refresh what is displayed when the instances list changes. I have a flex repeater that starts out with 4 objects (the actual number of objects doesn't matter).

I have a button which has this script on it:

toast = {
    "border-color": "blue",
    "text": "This is an info message."
}
	
self.getSibling("FlexRepeater").props.instances.append(toast)

When I add an object, the flex repeater updates right away and I can see the new view appear.

However, when I remove an item in the instances list, I get weird behavior. The actual instances list changes, but the number of views displayed in the repeater acts really weird, especially when the instance that is being deleted isn't the last one. It usually just removes all instances from the flex repeater.

This is a problem that is hard to explain, so I'll include a link to a short video below. What is interesting is that instances changes exactly how I would expect it to (including with a 1 second delay so that the animation finishes displaying).

(I'm being told I'm a new user, so I can't add it directly into this post).

2

I suspect you are suffering from the expectations of the event system of Ignition. Generally, properties that take lists and datasets and documents don’t properly react to changes unless the base object is itself replaced. Internal changes don’t produce events, but lookups within them afterwards can yield inconsistent results. In your script, try using something like:

newList = list(self.getSibling("FlexRepeater").props.instances)+[toast]
self.getSibling("FlexRepeater").props.instances = newList
1 Like
3

I’m also guessing. Do you see the same behavior while not using the ease transition?

1 Like
5

This is it… Here is the script I had on the close icon on the toast:

import time
self.parent.props.style.classes = "animate__animated animate__backOutLeft"    # root container of Toast view
time.sleep(1)    # this is so the animation displays; otherwise just disappears

system.perspective.print("index: " + str(self.view.params.index))
system.perspective.sendMessage("removeToastByIndex", payload = { "index": self.view.params.index })

When I removed the first 3 lines, the problem went away. I can add and remove instances and it behaves as expected. I also implemented @pturmel’s solution above, but I don’t think that was the problem.

1 Like
6

Great, I haven’t play that much with CSS but I think there is a cleaner way to do delayed transitions. Maybe a transform or opacity0 might work better than a delayed transition. But timing is written as 1s or 1.5s in css.

7

The delay time.sleep(1) doesn’t do anything for the animation directly. If I don’t put it in there, the instance is deleted immediately from the flex repeater and the flex repeater instances are redrawn, so the animation doesn’t ever happen as far as the user can see.

I’m using the animate.css library to deal with the animations, I just add the appropriate classes to my components. I would love to use animation to dismiss alerts, it makes my Perspective application feel like a full-blown interactive web application. I’m more bummed because the animation works exactly as expected if the toast that is being dismissed is the last one. Oh well…

1 Like