I need help mirroring data between pages

Hi there,

I’m creating a scoreboard app with bubble. So far I’ve created an admin panel where the admin can update scores, start, pause and resume the countdown timer. I’ve also created a dashboard view for the “audience”. It’s all hooked up so I have shareable links where the scores update in real time.
Where I’m really struggling and need help is “mirroring” the countdown clock from the admin panel to the audience view. I’ve tried a few different ways through states. I’ve tried saving the countdown timer to the database every second and pulling an update on the audience view side every second but that hasn’t worked unfortunately. I’m at a loss at the moment unfortunately so any help advice or otherwise would be amazing

Thanks!

Hello @conor86 welcome to the community

Turn that component into a reusable element

1 Like

Thanks for the reply! Would you mind explaining to me how this could help? Ive played around with it a bit but cant figure it out. When I converted it to the group I lost all the data. The countdown is triggered by on page states so im not quite sure how to have those live in a reusable element

I think where @cmarchan was going with this, was to create your countdown clock as a reusable and then add it to both pages/views (Admin & Audience). Then it is ‘just’ a case of triggering the countdown so it runs in both. There a probably a few ways of doing this and this post is definitely worth a read A guide to advanced use of reusables but if you are using states to trigger the countdown, one way may be to move those states to the reusable itself (note the part in the post about adding states to the reusable group itself, not its elements). The other option might be to use the EnvVariables plugin (mentioned in post) to create global states.

1 Like

Awesome! That makes sense. Thanks so much for the help