Hi I have a question that might be basic but I’m having trouble implementing it.
As a random example, imagine I’m creating a Powerpoint type application. I have a ‘thing’ for each Powerpoint file, then within that Powerpoint file I have a list of slides.
I want a host to be able to present this to multiple users. The host must be able to toggle between slides, and as they do so, the current slide being displayed should change for ALL users, not just the host. So it all needs to be synchronised.
The way I have this set up is by having a custom state called “Current Slide”, which is a number (by default this number is ‘1’, aka the first slide), and as the users clicks ‘Next’ or ‘Back’, it cycles through the list of different slides.
I have this working from the hosts perspective: as they toggle between slides, it displays perfectly on the front end, but this only works for the host, it doesn’t work for anyone else viewing the page.
I’m guessing this has something to do with me using custom states, and custom states not being saved in the database, so these states are only reflect on one persons screen.
How can I make this work, so the front end is synchronised for all users? Do I need to create a data type called’ Current slide’ or something?
Yep, custom states won’t work for everyone else viewing. Create an extra field in your ‘thing’ for each Powerpoint file called ‘Active slide’ and when the host switches slides, it will then change this active slide. Definitely needs to be done in the database.
So I have created a field called ‘Current Slide’ (which is a ‘slide’ type field) within my ‘Powerpoint File’ data type. So on my screen now, all data being displayed will be taken from this ‘current slide’ field.
The way I’m currently cycling between slides is I have a custom state called ‘active slide’, which is a number. This is used to determine which number in the list of slides should be displayed. For example, by default when the presentation starts, this number will be ‘1’, which should display the first item in the list. So the data being displayed will be something like ‘current powerpoint files - slides (list) - item# - active slide’ (in this example, ‘1’).
If a user clicks ‘Next slide’, it will +1 onto the ‘active slide’ number. So it will go from ‘1’ to ‘2’, then it will display the second item in the list of slides. Does that make sense, and is that correct? Sorry it’s a bit confusing.
I have done a quick test since I posted this topic and haven’t got it working, but may need to experiment a bit more first. Thanks again for your reply.
You’ll need to add a workflow action so that when the host clicks ‘Next slide’, it makes a change to the ‘Current slide’ and sets it as ‘current powerpoint files - slides (list) - item# - active slide’.
Ideally you’ll deprecate the custom state entirely so that both the host and viewers are seeing slides based off the same logic.
Yes I think I should deprecate that too. However, with my current setup I’m referring to the custom state to determine what the item # is in the list of slides. How else would I do this without using the number from the custom state?
Regarding the overall synchronising of the UI for all users, this is how I have it set up:
On page load, there is a ‘start presentation’ button, which is only visible to the host.
Host clicks the ‘start presentation’ button and the following workflow triggers:
The ‘start presentation’ button is hidden
The first slide becomes visible
The timer becomes visible
The timer is started
From here they can toggle back and forth through slides, or pause/start the timer.
Again, from the hosts perspective, the above workflow executes correctly on the front end. As a guest in the presentation though, nothing happens. The page just stays in it’s loaded state.
I can’t tell if this is something that should be really simple and I’m completely missing it, or if synchronising the UI like this is asking too much from Bubble! It kinda makes sense that when a workflow triggers an action (e.g. shows/hides an element), it only happens on that particular users screen, but is there a way to hide it for all users viewing that page? I guess that gets to the core of my problem.
Add a fifth action
5. Change the current presentations ‘Current slide’ field to the same slide that you have selected using the ‘active slide’ custom state.
So your dynamic expression for that input will be something like Current Presentation’s slides item#active slide
What we’re doing is every time you update the active slide, we also update the Current slide field to reflect the right slide.
Yep! That’s what I’ve done, and I’ve actually got it working now… thanks so much!
The only thing that I’m trying to figure out now is what actions will or won’t be reflected on the front end for ALL users.
For example, if I make changes to the ‘current slide’ in the database as you mentioned above when toggling through a presentation, this can be seen in real time for all users. However, if I have a workflow to hide/show an element, this action will only happen on that specific users screen, it won’t hide it for all users.
I also need to work out how to make sure this timer is synchronised for all users too, but I’ll save you the headache because that’s probably more effort
Correct, but what you can do is add another field to your presentation data type and then trigger it based on that. For example, you might have a ‘Show timer’ field that is a yes/no. You could default it to no, but when the host wants to show the timer, you can then change it to yes. Then add a ‘Do when’ trigger to the page so that it checks when that field is yes, and then add an action to show the timer.
Making sure the timer is synchronised perfectly is going to be a bit of a challenge, but depending on your setup, you could define a ‘Countdown end’ field in your presentation data type which was a date field and you would simply set the datetime that you want and then all users would be counting down to that final datetime. That would probably be my recommendation to make sure everyone was perfectly in sync.
Correct, but what you can do is add another field to your presentation data type and then trigger it based on that. For example, you might have a ‘Show timer’ field that is a yes/no. You could default it to no, but when the host wants to show the timer, you can then change it to yes. Then add a ‘Do when’ trigger to the page so that it checks when that field is yes, and then add an action to show the timer.
Mate, you are an absolute legend!! This is a perfect workaround. Although my data types will probably end up having 100 fields haha, but as long as it works!
Making sure the timer is synchronised perfectly is going to be a bit of a challenge, but depending on your setup, you could define a ‘Countdown end’ field in your presentation data type which was a date field and you would simply set the datetime that you want and then all users would be counting down to that final datetime. That would probably be my recommendation to make sure everyone was perfectly in sync.
I noticed that with most timer plugins, it requires a countdown date/time, which would make sense if I want to keep things synced since the timer is counting down to the same date/time for all users.
In my scenario however, I have a different use case. I want the timer to being counting when the user starts the slide deck, then when they click ‘Next Slide’ the timer should restart and begin counting again. So it counts the duration the user spends on each slide. It’s completely unrelated to any particular date/time.
(Note that I’m not actually creating a Powerpoint slide deck application, I just wanted to use a relatable analogy, so that scenario above makes no sense in that context, but it’s essentially what I’m trying to achieve with my app.)
Okay sure, I mean you could make that work too - when they click next slide, set the date to be Current date/time+30 seconds or whatever length of time you want.
Regardless, seems like you’re on the right track now and have a mechanism for keeping everything in sync.
