Limited Time Offer: Watch All Our Bubble Tutorial Videos for Only $99 per Year!

In this Bubble tutorial video, I'm going to show you how you can make a post scheduler. I'm going to be demonstrating how you can have the user have an interaction with your app. But then a second step takes place later on at a date and time that either you specify or your user.

Great for Buffer clone

This will be very useful if you're building an app which has got a feature like Buffer where you want to schedule social media posts to go live on social networks. If you're looking to have a way for users to be able to log into different social networks or different other services through your app, then I'd really recommend you go and check out Pathfix.

UI design in

But in this video we're going to be focusing on the scheduling elements. So we're going to put the essentials on the page, which is basically going to be a let's first of all set our page to aligned parent. Align this in the center.

I'm basically just going to have a box where I can write a post and set a date and time. So make that column. Let's just add a little bit of styling here using rows and columns, 20 bit padding.

Right. So we'll start with a multiline input, set the width to 100%, make it responsive within its parent. And I'll say here, write your post here. Then we need a date time picker. Now you can use Bubble's built in date time picker that looks like this one, I think.

Date time picker

So you can use the Bubble's built in date time picker, but there are other date time pickers available in the plugin store. And if you find bubbles one a bit limiting, do go and check out those other date time pickers because here I wanted to say date and time. Let's make it a little bit wider. Perfect. And then we'll have a button.

So we'll say schedule post.

Put in a little bit of gap between all our elements. Okay, so what I'm going to do is create the post at this point, but then change a status field on the data type of my post so that it goes live at a later date. But that could be where you send it off to a social network using an API. This is going to translate well into a number of different scenarios. So this is an app that I've done quite a bit of testing with so do I have a data type called post?

Database - Setting up a Post type

No, let's create a data type called post.

And so post needs to have content and then I'm going to have a yes no field saying is live. That could mean published.

So when they're created, I want to say no. And we'll also save the date. We'll say published date, which is not text. Of course it's going to be a date. Okay, so when we create the post, let's create our data type, or rather an entry for that data type.

So create a new thing post and we'll set our content. We don't need to set is live, but we will set our published date. So no, we won't. We'll set the published date when we actually publish it. Basically the transferable skills here is what you do in a workflow on the page that your user triggers with a button press.

Backend Workflows & Scheduled Worklows

And what do you do when you actually run the scheduled action? So this is going to be our multiline input right now to kind of the meat of it, which is how do you schedule something to happen? Well, you have limited scheduling tools on the page. You can schedule custom events, but that's relying on the user staying on the page because it's effectively run in the front end. If they leave the page and the steps haven't been completed, then the workflow gets broken.

So we need to go in and add in a back end workflow. So back end workflows serve a number of purposes. In this one we're basically wanting to say we want this to run on the server side regardless of what the user is doing. So I'll say schedule no, it's going to be publish post. Publish post doesn't need to be public, we don't need to ignore privacy rules.

And in order to know what we're working with, we need to pass our post into this workflow. So we get a post, and this just means that this API workflow is set up to receive a post and then run actions based on any data that I can retrieve around that post. So the main thing I'm going to do is say this post is live and I change it to yes, and I shall save the publish date and say current date time. So we get a date stamp of when it actually publishes it. So how do I link the front end form to this backend workflow?

Let me go back to my page.

I say schedule an API workflow. Here's the link between the front end and the back end. So I'll then say publish post. That's my workflow schedule date. Now I refer to my date time pickers value and the post is the result of step one.

Let's preview that. So I'm going to write some content. This is a test and I'm going to select, let's say two days time at 430 and I'm going to click schedule post. Now, there's loads of other UX UI things you can do here. You could show a toast notification, you could show height elements, you could reset the input so that a user could add in another social post.

But let's click schedule and I'm going to show you how you can check that this works and you can debug it. So we'll go in back into our app and we'll go into logs and we'll go into the scheduler. And now by clicking show, it's going to show me that. So today's 26 February. Yes, on the 20 eigth February at 04:30 p.m.

That's going to publish. One final tip for the end of the video is that when you are dealing with date time pickers, it's going to be from the perspective of your user's time zone unless you override it. Bubble has got options where you can override time zones, but when I see as the editor 04:00 p.m. That's because I'm also the user and I see 04:00 p.m. Now if I was a user in a different time zone, and you can use Chrome's developer tools to fake the time zone that you send to bubble because that's all part of the data that bubble and the browser exchange.

So you can fake that. If I faked the eyes in a different time zone, then I would see a different time printed in the editor as I set as the user because the editor is going to show the time for me, which I haven't faked. But if the user is faking their time zone or legitimately in a different time zone, then they're going to see a different time, but it will be the same time because it is all adapted based on time zone. So there you go. That's how you can add in scheduling into your app and use it to create some sort of buffer clone or social media scheduling app.

Latest videos