Approach for creating a news ticker

I’m looking for thoughts on how best to implement a news / stock ticker. What I have in mind is some text that shows (from a collection) and then either fades or shifts away to reveal the next piece of text.

The first option I’m thinking of is some way to hide the items of a custom list and then use a timer to set/change a hidden input, with that input value being used by the list items to determine if the item should be shown or not. At this point, I don’t see how I can hide a list item.

The second option I’m thinking of is to filter the custom list down to one item and then use the timer/input value method to change the filter… I like this approach, but I’m not sure how I would refresh the list after the timer switches the input value.

The third option is to try to get the pragmaflows adhoc js to work and do it all through js… something I’d like to avoid, as it doesn’t seem to be well supported and would be hard to debug.

All input welcome!

1 Like

Actually, the second approach (where the input value changes and is used to filter the list) seems to be going OK – still, any thoughts would be appreciated.

1 Like

The fade is the tricky part. I would try using the html component and see what code you can get to work inside it for a fade. OR some kind of lottie or animated gif over the top that fades from transparent to white or whatever your BG colour is. Just hypothetical - of the top of my head.

1 Like

I read another post about using a lottie that fades in and out and showing / switching that over top.

To increment the filter ID, I have two input value components: filterID initialized to 1, and nextFilterID with a default value of filterID + 1 (starts off as 2). Then I have a timer that upon completion will set filterID to nextFilterID – that will then result in both incrementing: 2 and 3.

Then I’ll restart the timer for the next increment.

My next challenge will be to reset the filterID after it hits the max.

You can use the end of animation on the lottie to fire an action.

Rozza – as always, thank you for your expert advice.

Once I’ve got the solution in place, I’ll post back here so others can benefit.

2 Likes

Quick question (I hope): I have a couple of timers that work well for changing the shown list item, and when I navigate to the screen my timers restart, no problem… but if click on a “back” action to go to that screen, the timers don’t restart.

Is there a way to reset a timer or reset input values when I go “back” to a screen?

I read on another post about how using an autorefresh on a list will reset all the components on a screen. That sounds promising, but is it an OK thing to do to reset all the components on a screen if the user goes “back” to it? Maybe it is.

UPDATE: I’m going to look into Lottie animations and actions around them… just like you told me to :slight_smile:

I think I would approach with the lottie. You can’t reset timer once it is loaded.
Depending on your logic you may be re-showing the ticker message.

I would probably have a ‘last_shown’ number field in the user collection.
Then filter your list of ticker_messages ID = LIU last_shown.
Then your lottie or timer updates the LIU last_shown = current ticker_message ID

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.